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
ゼロから始めるっぽい Service Worker
Search
Yutaro Miyazaki
November 18, 2017
Programming
5
930
ゼロから始めるっぽい Service Worker
Yutaro Miyazaki
November 18, 2017
Tweet
Share
More Decks by Yutaro Miyazaki
See All by Yutaro Miyazaki
Server Side Rendering Tuning with Next.js
vwxyutarooo
2
1.5k
React + Apollo Client (GraphQL) により変化するアプリケーション設計
vwxyutarooo
6
3k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
150
Other Decks in Programming
See All in Programming
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
130
Ruby on cygwin 2025-02
fd0
0
100
月刊 競技プログラミングをお仕事に役立てるには
terryu16
2
1.3k
Spring gRPC について / About Spring gRPC
mackey0225
0
180
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
1
200
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.3k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
140
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
ファインディの テックブログ爆誕までの軌跡
starfish719
1
840
Scaling your build logic
antalmonori
1
150
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Your Own Lightsaber
phodgson
104
6.2k
KATA
mclloyd
29
14k
Unsuck your backbone
ammeep
669
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
380
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
Navigating Team Friction
lara
183
15k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
For a Future-Friendly Web
brad_frost
176
9.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
秋の JavaScript 祭 in mixi 2017 ゼロから始めるっぽい Service Worker ゼロから始めるっぽい
Service Worker
Service Worker 人気ない
None
None
None
None
来るべく日に備えて基礎的な部分と 運用を想定したあれこれを確認しよう
Yutaro Miyazaki (@vwxyutarooo) Yutaro Miyazaki (@vwxyutarooo) ニート ↓ フリーの Web
屋 ↓ アプリ屋のフロントエンド ❤ Vue.js, TypeScript
None
None
Service Worker とは Service Worker とは イベントドリブンワーカー DOM とは切り離されている ブラウザのバックグラウンドで動作
SW
主要な Event 主要な Event Fetch Push Sync
対応ブラウザ 対応ブラウザ
活用例 活用例 クライアントキャッシュ Web Push オフライン処理
Register Register 同一オリジンにあるスクリプト Content‑Type が JavaScript であること Secure Context https://
, localhost , files:// 改変された SW が登録されてしまうケースを防ぐ
コード if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); }
None
第2引数でスコープ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js', { scope: '/user/'
}); }
SW がコントロールできるのは スコープ (ディレクトリ) の範囲内 SW のスコープは自身の ディレクトリ範囲内
navigator.serviceWorker.register('/hoge/service-worker.js', { scope: '/' });
ライフサイクル ライフサイクル
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
1. Register 1. Register
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ①
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ②
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ③
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
ここで止まる SW はもう一度アクセスされた時有効に
demo
初回アクセスからコントロールしたい
clients.claim() // service-worker.js self.addEventListener('activate', (event) => { event.waitUntil(clients.claim()); });
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
demo
なるべく使わないほうがお行儀がいい
2. Update 2. Update
トリガー トリガー スコープ内ページへのナビゲーション時 push や sync などのイベント発生時 not 24時間以内にアップデートチェック .register()
の呼び出し時 Service Worker URL が変更された場合のみ
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑤
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑥
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑦
ここで止まる
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑦
demo
複数のタブ バックグラウンド処理が走っているケース データの整合性
いいからすぐに適用したい
skipWaiting()
demo
なるべく使わないほうがお行儀がいい
SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update
Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
✅
実用例 実用例
1. Cache 1. Cache Pre cache と Runtime cache がある
Pre Cache SW インストール時にキャッシュ JS や CSS 等アプリケーションに必須なリソース Runtime Cache
Fetch イベント時にキャッシュさせる HTML とか画像アセット
何方もキャッシュさせるためのコードを 自分で書くのは単調でダルい
GoogleChrome/workbox GoogleChoremLabs/sw‑precache
None
Webpack だったら workbox‑webpack‑plugin goldhand/sw‑precache‑webpack‑plugin
で自動生成させる
✅
2. Web Push 2. Web Push
Push の仕組み Push の仕組み
None
None
None
None
None
ユーザ毎に固有のトークン・エンドポイント・鍵 ユーザとトークンを管理しながら Push を送るための サーバとアプリケーションが要る ユーザ情報とエンドポイントと鍵を 関連付けて管理する必要
厳しい
SaaS とか Push サービスを使うのが一般的 などなど Amazon Simple Notification Service (Amazon
SNS) CORE PUSH PushWoosh
None
3. オフライン処理 3. オフライン処理
None
None
まとめ まとめ Lifecycle をよく知る よりアプリケーション的な考え方、特に Update まずはキャッシュから
Links Links Demo: vwxyutarooo/service‑worker‑demo | GitHub GoogleChrome/samples/service‑worker | GitHub delapuente/service‑workers‑101
| GitHub ServiceWorker | MDN The Service Worker Lifecycle | Google Developers Live Data in the Service Worker | Google Developers
ありがとうございました ありがとうございました