Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

自社サイトをPWA化した話

Avatar for KeitaroOkamura KeitaroOkamura
September 20, 2018
Technology
0
120

 自社サイトをPWA化した話

Avatar for KeitaroOkamura

KeitaroOkamura

September 20, 2018
Tweet

More Decks by KeitaroOkamura

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

Other Decks in Technology

See All in Technology
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
970
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
420
今からでも間に合う！速習Devin入門とその活用方法
Avatar for Izumu KUSUNOKI ismk
1
690
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
350
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
970
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
570
re:Invent 2025 ふりかえり 生成AI版
Avatar for TakaakiKakei takaakikakei
1
200
AWS Bedrock AgentCoreで作る 1on1支援AIエージェント 〜Memory × Evaluationsによる実践開発〜
Avatar for Yusuke Shimizu yusukeshimizu
6
400
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
150
第4回 「メタデータ通り」　リアル開催
Avatar for データ横丁 datayokocho
0
130
Power of Kiro : あなたの㌔はパワステ搭載ですか？
Avatar for r3_yamauchi r3_yamauchi
PRO
0
120
Kubernetes Multi-tenancy: Principles and Practices for Large Scale Internal Platforms
Avatar for hhiroshell hhiroshell
0
120

Featured

See All Featured
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
510
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k

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