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
280
ヤギでもわかるソフトウェアテスト
keitarookamura
0
120
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
290
ヤギでもわかる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
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
370
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
110
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
380
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
AIコードアシスタントとiOS開発
jollyjoester
1
230
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
180
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
100
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
150
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
280
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Agile that works and the tools we love
rasmusluckow
329
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
For a Future-Friendly Web
brad_frost
179
9.8k
A designer walks into a library…
pauljervisheath
207
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
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Ͱ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧΛஷΊ͓͚ͯɾɾɾ ࠓޙɺϏδωε͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔͠Ε·ͤΜ