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

自社サイトをPWA化した話

Avatar for KeitaroOkamura KeitaroOkamura
September 20, 2018
Technology
0
130

 自社サイトをPWA化した話

Avatar for KeitaroOkamura

KeitaroOkamura

September 20, 2018
Tweet

More Decks by KeitaroOkamura

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

Other Decks in Technology

See All in Technology
JAWS Days 2026 楽しく学ぼう！ 認証認可 入門/20260307-jaws-days-novice-lane-auth
Avatar for opelab opelab
11
2.3k
プラットフォームエンジニアリングはAI時代の開発者をどう救うのか
Avatar for Kazuto Kusama jacopen
5
2.6k
AWS DevOps Agent vs SRE俺 / AWS DevOps Agent vs me, the SRE
Avatar for SMS tech sms_tech
3
830
Go標準パッケージのI/O処理をながめる
Avatar for matumoto matumoto
0
210
2026-03-11 JAWS-UG 茨城 #12 改めてALBを便利に使う
Avatar for SUZUKI Masashi masasuzu
2
380
JAWS DAYS 2026 ExaWizards_20260307
Avatar for ExaWizards exawizards
0
430
OCHaCafe S11 #2 コンテナ時代の次の一手：Wasm 最前線
Avatar for oracle4engineer oracle4engineer
PRO
2
130
Cortex Code CLI と一緒に進めるAgentic Data Engineering
Avatar for あれ __allllllllez__
0
290
GCASアップデート（202601-202603）
Avatar for 高橋広和 techniczna
0
110
20260311 技術SWG活動報告（デジタルアイデンティティ人材育成推進WG Ph2 活動報告会）
Avatar for OpenID Foundation Japan oidfj
0
350
VLAモデル構築のための AIロボット向け模倣学習キット
Avatar for Ken Matsui kmatsuiugo
0
150
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
3k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Fireside Chat
Avatar for paigeccino paigeccino
42
3.8k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.7k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
84
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
320
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k

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Ͱ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ࢖͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧ஋ΛஷΊ͓͚ͯ͹ɾɾɾ ࠓޙɺϏδωε޲͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔΋͠Ε·ͤΜ