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
97
自社サイトをPWA化した話
KeitaroOkamura
September 20, 2018
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
240
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
260
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
160
サクッと簡単!お手軽 Scaffold
keitarookamura
1
250
CSS Animations vs WAAPI
keitarookamura
0
450
マイクロインタラクションから考えるアニメーション
keitarookamura
1
240
Vue.js+AtomicDesign
keitarookamura
2
2.6k
Other Decks in Technology
See All in Technology
Azure AI ことはじめ
tsubakimoto_s
0
130
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
AOAI Dev Day - Opening Session
yoshidashingo
2
470
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Practical Orchestrator
shlominoach
185
10k
Rails Girls Zürich Keynote
gr2m
93
13k
Ruby is Unlike a Banana
tanoku
96
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Thoughts on Productivity
jonyablonski
64
4.1k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
KATA
mclloyd
20
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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Ͱ͔͠࠶ݱͰ͖ͳ͍ػೳͳͲɺ ༷ʑͳ͍ํ͕͋Γ·͢ ࠓͷ͏ͪʹܦݧΛஷΊ͓͚ͯɾɾɾ ࠓޙɺϏδωε͚αʔϏεʹར༻͢Δ͜ͱ͕ Ͱ͖Δ͔͠Ε·ͤΜ