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
54
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.8k
RESTful Firebase with Vue.js
gyarasu
1
440
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
2.9k
PWA基礎_1
gyarasu
0
300
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
220
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
590
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
0
170
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
1.1k
本が全く読めなかった過去の自分へ
genshun9
0
710
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
0
380
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.6k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
340
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
455
42k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fireside Chat
paigeccino
37
3.5k
Building Applications with DynamoDB
mza
95
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