Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
自社サイトをPWA化した話
Search
KeitaroOkamura
September 20, 2018
Technology
0
120
自社サイトをPWA化した話
KeitaroOkamura
September 20, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
290
ヤギでもわかるソフトウェアテスト
keitarookamura
0
130
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
300
ヤギでもわかるGit入門
keitarookamura
1
250
ユースケースから考えるユーザビリティ
keitarookamura
1
210
サクッと簡単!お手軽 Scaffold
keitarookamura
1
290
CSS Animations vs WAAPI
keitarookamura
0
510
マイクロインタラクションから考えるアニメーション
keitarookamura
1
270
Vue.js+AtomicDesign
keitarookamura
2
2.7k
Other Decks in Technology
See All in Technology
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
データ分析エージェント Socrates の育て方
na0
7
2.5k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1.6k
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Automating Front-end Workflow
addyosmani
1370
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing Experiences People Love
moore
142
24k
The Cult of Friendly URLs
andyhume
79
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Transcript
1 ࣗࣾαΠτΛ 18"Խͨ͠ ࣾ-5େձ
2 1SPGJMF ໊લɿQFUFS झຯɿΓʢΤΪϯάʣ
3 ✨18"ରԠ͠·ͨ͠✨
4 ͳͥ18"ରԠͨ͠ͷ͔ʁ ͱ͋ΔҊ݅Ͱ18"։ൃͷ͕ڍ͕Γɺ ͦͷௐࠪͷͨΊ✏ ࣗࣾαΠτΛ18"Խ͢Ε 18"ؔ࿈ͷ͓ࣄ͕ ࠓޙೖͬͯ͘Δ͔ɾɾɾʁ✨
5 ͦͦɺࣗͷखฑͷΑ͏ʹ ͍ͬͯ·͕͢ɾɾɾ
6 18"ରԠͨ͠ͷ 8BTBCJ͞Μ ✨ ϨϏϡͨ͠ਓʢসʣ
7 18"ͷ։ൃͱ͔ͨ͜͠ͱͳ͍͊ɾɾɾ Α͠ɺϨϏϡ͍ͭͰʹษڧ͠Αʂ
8 18"ͬͯͳʹʁ ωΠςΟϒΞϓϦͷΑ͏ͳ69Λ ϒϥβ"1*ʹΑͬͯ ఏڙ͢ΔΈ
9 ʘ͔ΜͨΜ̏εςοϓʗ NBOJGFTUKTPO Λஔ͘ 4FSWJDF8PSLFS εΫϦϓτ࡞ 4FSWJDF8PSLFS ʹొ
10 4FSWJDF8PSLFSͷϥΠϑαΠΫϧ Λཧղ͢Εɺ ܅18"ΤϯδχΞͩʂʢۃʣ
11 4FSWJDF8PSLFS ͬͯͳʹʁ ϒϥβ͕8FCϖʔδͱผʹ όοΫάϥϯυͰ࣮ߦ͢Δ +BWB4DSJQUڥ
12 ΫϥΠΞϯτ αʔόʔ HTTP request response
13 ΫϥΠΞϯτ αʔόʔ 4FSWJDF8PSLFS
14 ΫϥΠΞϯτ αʔόʔ 4FSWJDF8PSLFS Cache Storage IndexedDB σʔλΛอଘΩϟογϡ
15 4FSWJDF8PSLFSͷ ϥΠϑαΠΫϧ
16 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFSʹొ 4FSWJDF8PSLFSΛ͏ʹɺ·ͣొ͢Δඞཁ͕͋Γ·͢ɻ register
17 ΫϥΠΞϯτ 4FSWJDF8PSLFS ొ͞ΕΔͱ࣍ʹ4FSWJDF8PSLFS͕ϒϥ βڥʹΠϯετʔϧ͞ΕɺҰछͷৗறϓ ϩάϥϜͱͳΓ·͢ɻ register installing
18 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFS͕ଘࡏ͠ͳ͚ΕJOTUBMMJOH ঢ়ଶͷ͋ͱ͙͢ʹɺBDUJWBUFঢ়ଶʹͳΔ͕ɺ طʹ4FSWJDF8PSLFS͕ଘࡏ͢Δ߹ɺ XBJUJOHঢ়ଶʹҠߦ͠·͢ register installing waiting
19 ΫϥΠΞϯτ 4FSWJDF8PSLFS 4FSWJDF8PSLFS͕ར༻Ͱ͖Δ४උ͕ͬͨঢ় ଶ͕BDUJWBUF ͔͠͠ɺ࣮ࡍʹΫϥΠΞϯτΛίϯτϩʔϧ͢ Δ͜ͱͰ͖ͳ͍ register installing waiting
activate
20 ΫϥΠΞϯτ 4FSWJDF8PSLFS BDUJWBUFঢ়ଶͰػͯ͠ɺ ࣮֬ʹ҆શͳ࣌ʢը໘͕͏Ұߋ৽͞Εͨ࣌ʣʹ DPOUSPMMFS ʹͳΔ DPOUSPMMFSʹͳͬͯॳΊͯωοτϫʔΫϦΫΤετΛίϯτϩʔ ϧ͢Δ͜ͱ͕Ͱ͖Δ register
installing waiting activate controller
21 ϨϏϡͰࠔͬͨ͜ͱ 1. IUUQT͔MPDBMIPTU্Ͱ͔͠ಈ͔ͳ͍ 2. ΊͬͪΌΩϟογϡ͞ΕΔ͠ɺ σόοΫͬͯͲ͏ͨ͠Β͍͍ΜͩΖ͏
22 1. ʹؔͯ͠ Vagrant ʹ port forwarding ͱ͍͏ͷ͕͋Γɺ localhost ʹΞΫηε͢ΔͱɺԾ
ڥʹΞΫηεͯ͘͠ΕΔͷͰɺ ϩʔΧϧ։ൃڥͰ PWA Λ֬ೝͰ͖ΔΑ͏ʹͨ͠
23 2. ʹؔͯ͠ Chrome DevTools ͷ৽͍͠ [Application] ύωϧΛ༻͠ ͯ Service
Worker ͷσόοά ΩϟογϡͷௐࠪΛߦ͍·͠ ͨ
24 ·ͱΊ
25 ࠓճͷ18"Խʹ͍ͭͯ طଘͷৼΔ͍Λकͬͨ··ߴԽ͢Δ 4FSWJDF8PSLFSͷ͍ํ
26 ࠓޙͷ18"ʹ͍ͭͯ 4FSWJDF8PSLFSͰ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧΛஷΊ͓͚ͯɾɾɾ ࠓޙɺϏδωε͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔͠Ε·ͤΜ