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
100
自社サイトをPWA化した話
KeitaroOkamura
September 20, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
250
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
270
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
170
サクッと簡単!お手軽 Scaffold
keitarookamura
1
260
CSS Animations vs WAAPI
keitarookamura
0
460
マイクロインタラクションから考えるアニメーション
keitarookamura
1
240
Vue.js+AtomicDesign
keitarookamura
2
2.6k
Other Decks in Technology
See All in Technology
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
110
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
360
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
650
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Testing 201, or: Great Expectations
jmmastey
38
7k
Being A Developer After 40
akosma
86
590k
Designing for Performance
lara
604
68k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Gamification - CAS2011
davidbonilla
80
5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
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Ͱ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧΛஷΊ͓͚ͯɾɾɾ ࠓޙɺϏδωε͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔͠Ε·ͤΜ