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
190
PWA基礎_2
Service Workerについてかんたんにまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
65
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
3.2k
RESTful Firebase with Vue.js
gyarasu
1
450
Next.jsではじめるPWA
gyarasu
2
1.7k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.8k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_1
gyarasu
0
310
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
abemii
0
140
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
320
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
rocketmartue
1
310
Context Engineeringの取り組み
nutslove
0
370
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
370
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
~Everything as Codeを諦めない~ 後からCDK
mu7889yoon
3
460
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
210
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
okdt
PRO
3
830
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
120
Greatest Disaster Hits in Web Performance
guaca
0
280
Featured
See All Featured
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
380
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Building Flexible Design Systems
yeseniaperezcruz
330
40k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Deep Space Network (abreviated)
tonyrice
0
64
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Believing is Seeing
oripsolob
1
57
Embracing the Ebb and Flow
colly
88
5k
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
0
140
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