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基礎_2
Search
gyarasu
November 13, 2018
Technology
0
160
PWA基礎_2
Service Workerについてかんたんにまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
27
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.1k
RESTful Firebase with Vue.js
gyarasu
1
370
Next.jsではじめるPWA
gyarasu
2
1.4k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.5k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_1
gyarasu
0
280
PWA基礎_3
gyarasu
0
150
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.5k
Other Decks in Technology
See All in Technology
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
In The Pink: A Labor of Love
frogandcode
139
22k
Code Review Best Practice
trishagee
58
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
For a Future-Friendly Web
brad_frost
173
9.2k
A Philosophy of Restraint
colly
200
16k
Six Lessons from altMBA
skipperchong
24
3.2k
Why Our Code Smells
bkeepers
PRO
332
56k
Practical Orchestrator
shlominoach
185
10k
Producing Creativity
orderedlist
PRO
340
39k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Happy Clients
brianwarren
94
6.5k
Transcript
PWAೖߨ࠲ Part2 ʔ PWAͷجૅᶄ ʔ
࣍ ▹ Service Workerͱʁ ▹ Service WorkerͷಛɾͰ͖Δ͜ͱ ▹ ·ͱΊ 2
Service Workerͱʁ
“ WebϖʔδͷཪଆͰϓϩΩγ αʔόͱͯ͠ಈ͘εΫϦϓτ 4
Service Workerͱʁ ▹ Web WorkerͷҰछ ▹ WebϖʔδͱผεϨουʢ=όοΫάϥ ϯυʣͰεΫϦϓτॲཧΛಈ࡞ͤ͞Δ Έ ▹
ϓϩΩγαʔόͱͯ͠ͷಈ࡞ ▹ Webϖʔδ͔ΒͷϦΫΤετΛίϯτϩʔ ϧͯ͠ɺΦϑϥΠϯମݧΛఏڙ 5
6 Service Worker֓೦ਤ Local Internet Page Service Worker Cache IndexedDB
Internet Server Catch Request Background Sync Listen Push Event
Service Worker ಛɾͰ͖Δ͜ͱ
ಈ࡞ڥ ▹ Chrome46Ҏ߱ ▹ Safari11.1ʢiOS11.3ʣҎ߱ ▹ ཁHTTPS ▹ ઃஔͨ͠֊ҎԼͷfetchΠϕϯτΛड͚औ Δ͜ͱ͕Ͱ͖Δ
8
Ͱ͖Δ͜ͱ ▹ Ωϟογϡ ▹ Cache API ▹ ϓογϡ௨ ▹ PushEvent
▹ όοΫάϥϯυಉظ ▹ SyncEvent 9
10 ϥΠϑαΠΫϧ Installing Waiting Active https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers • Service Workerͷొ •
ಛఆϦιʔεͷΩϟογϡ • ηοτΞοϓ͕ྃͨ͠ঢ়ଶ • ݱࡏΞΫςΟϒͳService Worker ͷऴྃͪ • fetchɺsyncɺpushΠϕϯτΛϋ ϯυϦϯάͰ͖Δঢ়ଶ
ར༻ՄೳͳΠϕϯτ ▹ install ▹ activate ▹ message ▹ fetch ▹
sync ▹ push 11
੍ɾҙ ▹ DOMʹΞΫηεͰ͖ͳ͍ ▹ fetch()ͷσϑΥϧτͰΫϨσϯγϟϧ͕ૹΒΕ ͳ͍ͷͰɺcookieΛؚΊ͍ͨ߹credentials Λ’include’ͱ͢Δ ▹ ඇCORSͳϦΫΤετσϑΥϧτͰࣦഊ͢Δ ▹
Service Workerඞཁͳͱ͖ͷΈىಈ͢ΔͷͰɺ ϥΠϑαΠΫϧؒͰσʔλΛڞ༗͍ͨ͠߹ IndexedDBΛ༻͢Δ 12
·ͱΊ ▹ PWAʹ͓͚ΔΦϑϥΠϯΩϟογϡɺϓο γϡ௨ɺόοΫάϥϯυಉظͷػೳ Service WorkerʹΑͬͯఏڙ͞ΕΔ ▹ Installing, Waiting, Activeͷঢ়ଶΛίϯτϩ
ʔϧͯ͠ɺదʹػೳΛ࣮͢Δ ▹ Service WorkerWebϖʔδͱผεϨο υͰಈ࡞͢ΔͨΊɺDOMʹΞΫηεͰ ͖ͳ͍ 13
END