Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

自社サイトをPWA化した話

Avatar for KeitaroOkamura KeitaroOkamura
September 20, 2018
Technology
130
0

 自社サイトをPWA化した話

Avatar for KeitaroOkamura

KeitaroOkamura

September 20, 2018

More Decks by KeitaroOkamura

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

Other Decks in Technology

See All in Technology
クラウドサインを止めずに Nuxt へ 次の10年のために先に決めたこと
Avatar for 弁護士ドットコム bengo4com
1
160
How we choose session proposals
Avatar for Yasunobu Kawaguchi kawaguti
PRO
0
170
データマネジメント × 法務で作りあげる、 freeeの新しいデータガバナンスへの軌跡
Avatar for freee freee
PRO
1
420
dbt Semantic Layerで進めるenechainのデータ民主化
Avatar for Aki Zhou akizhou
1
270
LLM Content Moderationを支える評価・改善ループの実践
Avatar for suikabar suikabar
2
360
E2Eってつらくないですか？E2Eの管理コストを下げる手段とその実践
Avatar for Kosei Akaboshi (akaboshinit) akaboshinit
1
210
BacklogのRAG 今ならこう作る - S3 Vectorsと自前パイプラインの勘所
Avatar for Tsuyoshi Yamasaki revsystem
0
140
AI秘書と毎日働くのはもう当たり前。開発以外の業務に足りない機能をどう埋める？
Avatar for みのるん minorun365
PRO
2
1.7k
Claude Code on Bedrock で統制をかける小ネタ集/claude-code-bedrock-governance-tips
Avatar for emi emiki
1
13k
導入から定着へ ~コーディングエージェントを日常業務に組み込む実践知~
Avatar for Yuki Sakai yukisakai1225
0
230
[re:Invent2026事前勉強会(有志開催)]続きは、ラスベガスの廊下で / continue-in-the-vegas-hallway
Avatar for sh_fk2 sh_fk2
0
260
なぜAI時代に技術記事を書くのか？どう書くのか？ 〜bunの場合〜
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
130

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
70
67k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
850
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
540
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.9k

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