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
180
PWA基礎_2
Service Workerについてかんたんにまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
59
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.9k
RESTful Firebase with Vue.js
gyarasu
1
440
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_1
gyarasu
0
300
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
1
120
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
120
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
380
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
140
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.2k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Gamification - CAS2011
davidbonilla
81
5.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
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