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
23
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
1.8k
RESTful Firebase with Vue.js
gyarasu
1
360
Next.jsではじめるPWA
gyarasu
2
1.4k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.4k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_1
gyarasu
0
260
PWA基礎_3
gyarasu
0
140
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.4k
Other Decks in Technology
See All in Technology
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
JSON攻略法.pdf
miyakemito
8
5.1k
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
360
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
データベース02: データベースの概念
trycycle
0
160
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
100
JAWS-UG Bedrock Claude Night
yamahiro
3
610
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
330
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Product Roadmaps are Hard
iamctodd
44
9.7k
A designer walks into a library…
pauljervisheath
200
23k
The Language of Interfaces
destraynor
151
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Happy Clients
brianwarren
92
6.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Agile that works and the tools we love
rasmusluckow
325
20k
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