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
Agents IA : la nouvelle frontière des LLMs (Tech.Rocks Summit 2025)
Avatar for Guillaume Laforge glaforge
0
370
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
Avatar for ogugu ogugu9
1
110
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
9.9k
AI駆動開発によるDDDの実践
Avatar for ディップ株式会社 dip_tech
PRO
0
290
Multimodal AI Driving Solutions to Societal Challenges
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
1
120
生成AI・AIエージェント時代、データサイエンティストは何をする人なのか？そして、今学生であるあなたは何を学ぶべきか？
Avatar for kuri8ive kuri8ive
2
1.8k
Databricksによるエージェント構築
Avatar for Takaaki Yayoi taka_aki
1
120
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
5
2.2k
翻訳・対話・越境で強いチームワークを作ろう！ / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
Avatar for ar_tama ar_tama
4
1.6k
「え？！それ今ではHTMLだけでできるの！？」驚きの進化を遂げたモダンHTML
Avatar for Riya Amemiya riyaamemiya
10
4.4k
履歴テーブル、今回はこう作りました 〜 Delegated Types編 〜 / How We Built Our History Table This Time — With Delegated Types
Avatar for moznion moznion
15
9.4k
Microsoft Agent 365 を 30 分でなんとなく理解する
Avatar for skmkzyk skmkzyk
1
290

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
780
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k

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