Upgrade to Pro — share decks privately, control downloads, hide ads and more …

自社サイトをPWA化した話

Avatar for KeitaroOkamura KeitaroOkamura
September 20, 2018
Technology
0
110

 自社サイトをPWA化した話

Avatar for KeitaroOkamura

KeitaroOkamura

September 20, 2018
Tweet

More Decks by KeitaroOkamura

See All by KeitaroOkamura
Suspenseのユースケースを探る
Avatar for KeitaroOkamura keitarookamura
1
280
ヤギでもわかるソフトウェアテスト
Avatar for KeitaroOkamura keitarookamura
0
120
ヤギでもわかるオブジェクト指向UIデザイン
Avatar for KeitaroOkamura keitarookamura
3
290
ヤギでもわかるGit入門
Avatar for KeitaroOkamura keitarookamura
1
250
ユースケースから考えるユーザビリティ
Avatar for KeitaroOkamura keitarookamura
1
210
サクッと簡単！お手軽 Scaffold
Avatar for KeitaroOkamura keitarookamura
1
280
CSS Animations vs WAAPI
Avatar for KeitaroOkamura keitarookamura
0
500
マイクロインタラクションから考えるアニメーション
Avatar for KeitaroOkamura keitarookamura
1
260
Vue.js+AtomicDesign
Avatar for KeitaroOkamura keitarookamura
2
2.7k

Other Decks in Technology

See All in Technology
SalesforceArchitectGroupOsaka#20_CNX'25_Report
Avatar for atomica7sei atomica7sei
0
170
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
Avatar for HASEGAWA Tomoki tomzoh
4
3.2k
本が全く読めなかった過去の自分へ
Avatar for ゲンシュン genshun9
0
290
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
Avatar for ShigeruOda shigeruoda
4
480
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
Avatar for Mitsuki Ogasahara yamitzky
0
430
rubygem開発で鍛える設計力
Avatar for Tomohiro Hashidate joker1007
2
200
Witchcraft for Memory
Avatar for pocke pocke
1
310
MySQL5.6から8.4へ 戦いの記録
Avatar for Koji Yoshida kyoshidaxx
1
210
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
140
Wasm元年
Avatar for asuka askua
0
140
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
28
5.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k

Transcript

  1. 1 ࣗࣾαΠτΛ 18"Խͨ͠࿩ ࣾ಺-5େձ

  2. 2 1SPGJMF ໊લɿQFUFS झຯɿ௼ΓʢΤΪϯάʣ

  3. 3 ✨18"ରԠ͠·ͨ͠✨

  4. 4 ͳͥ18"ରԠͨ͠ͷ͔ʁ ͱ͋ΔҊ݅Ͱ18"։ൃͷ࿩͕ڍ͕Γɺ ͦͷௐࠪͷͨΊ✏ ࣗࣾαΠτΛ18"Խ͢Ε͹ 18"ؔ࿈ͷ͓࢓ࣄ͕ ࠓޙೖͬͯ͘Δ͔΋ɾɾɾʁ✨

  5. 5 ͦ΋ͦ΋ɺࣗ෼ͷखฑͷΑ͏ʹ ஻͍ͬͯ·͕͢ɾɾɾ

  6. 6 18"ରԠͨ͠ͷ͸ 8BTBCJ͞Μ ✨ ϨϏϡͨ͠ਓʢসʣ

  7. 7 18"ͷ։ൃͱ͔ͨ͜͠ͱͳ͍͊ɾɾɾ Α͠ɺϨϏϡ͍ͭͰʹษڧ͠Αʂ

  8. 8 18"ͬͯͳʹʁ ωΠςΟϒΞϓϦͷΑ͏ͳ69Λ ϒϥ΢β"1*ʹΑͬͯ ఏڙ͢Δ࢓૊Έ

  9. 9 ʘ͔ΜͨΜ̏εςοϓʗ NBOJGFTUKTPO Λஔ͘ 4FSWJDF8PSLFS εΫϦϓτ࡞੒ 4FSWJDF8PSLFS ʹొ࿥

  10. 10 4FSWJDF8PSLFSͷϥΠϑαΠΫϧ Λཧղ͢Ε͹ɺ ܅΋18"ΤϯδχΞͩʂʢۃ࿦ʣ

  11. 11 4FSWJDF8PSLFS ͬͯͳʹʁ ϒϥ΢β͕8FCϖʔδͱ͸ผʹ όοΫάϥ΢ϯυͰ࣮ߦ͢Δ +BWB4DSJQU؀ڥ

  12. 12 ΫϥΠΞϯτ αʔόʔ HTTP request response

  13. 13 ΫϥΠΞϯτ αʔόʔ 4FSWJDF8PSLFS

  14. 14 ΫϥΠΞϯτ αʔόʔ 4FSWJDF8PSLFS Cache Storage IndexedDB σʔλΛอଘΩϟογϡ

  15. 15 4FSWJDF8PSLFSͷ ϥΠϑαΠΫϧ

  16. 16 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFSʹొ࿥ 4FSWJDF8PSLFSΛ࢖͏ʹ͸ɺ·ͣొ࿥͢Δඞཁ͕͋Γ·͢ɻ register

  17. 17 ΫϥΠΞϯτ 4FSWJDF8PSLFS ొ࿥͞ΕΔͱ࣍ʹ4FSWJDF8PSLFS͕ϒϥ ΢β؀ڥʹΠϯετʔϧ͞ΕɺҰछͷৗறϓ ϩάϥϜͱͳΓ·͢ɻ register installing

  18. 18 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFS͕ଘࡏ͠ͳ͚Ε͹JOTUBMMJOH ঢ়ଶͷ͋ͱ͙͢ʹɺBDUJWBUFঢ়ଶʹͳΔ͕ɺ طʹ4FSWJDF8PSLFS͕ଘࡏ͢Δ৔߹͸ɺ XBJUJOHঢ়ଶʹҠߦ͠·͢ register installing waiting

  19. 19 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFS͕ར༻Ͱ͖Δ४උ͕੔ͬͨঢ় ଶ͕BDUJWBUF ͔͠͠ɺ࣮ࡍʹΫϥΠΞϯτΛίϯτϩʔϧ͢ Δ͜ͱ͸Ͱ͖ͳ͍ register installing waiting

    activate

  20. 20 ΫϥΠΞϯτ 4FSWJDF8PSLFS BDUJWBUFঢ়ଶͰ଴ػͯ͠ɺ ࣮֬ʹ҆શͳ࣌ʢը໘͕΋͏Ұ౓ߋ৽͞Εͨ࣌ʣʹ DPOUSPMMFS ʹͳΔ DPOUSPMMFSʹͳͬͯॳΊͯωοτϫʔΫϦΫΤετΛίϯτϩʔ ϧ͢Δ͜ͱ͕Ͱ͖Δ register

    installing waiting activate controller

  21. 21 ϨϏϡͰࠔͬͨ͜ͱ 1. IUUQT͔MPDBMIPTU্Ͱ͔͠ಈ͔ͳ͍ 2. ΊͬͪΌΩϟογϡ͞ΕΔ͠ɺ σόοΫͬͯͲ͏ͨ͠Β͍͍ΜͩΖ͏

  22. 22 1. ʹؔͯ͠ Vagrant ʹ͸ port forwarding ͱ͍͏ͷ͕͋Γɺ localhost ʹΞΫηε͢ΔͱɺԾ

    ૝؀ڥʹΞΫηεͯ͘͠ΕΔͷͰɺ ϩʔΧϧ։ൃ؀ڥͰ PWA Λ֬ೝͰ͖ΔΑ͏ʹͨ͠

  23. 23 2. ʹؔͯ͠ Chrome DevTools ͷ৽͍͠ [Application] ύωϧΛ࢖༻͠ ͯ Service

    Worker ͷσόοά ΍ΩϟογϡͷௐࠪΛߦ͍·͠ ͨ

  24. 24 ·ͱΊ

  25. 25 ࠓճͷ18"Խʹ͍ͭͯ طଘͷৼΔ෣͍Λकͬͨ··ߴ଎Խ͢Δ 4FSWJDF8PSLFSͷ࢖͍ํ

  26. 26 ࠓޙͷ18"ʹ͍ͭͯ 4FSWJDF8PSLFSͰ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ࢖͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧ஋ΛஷΊ͓͚ͯ͹ɾɾɾ ࠓޙɺϏδωε޲͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔΋͠Ε·ͤΜ