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
1k
ゼロから始めるっぽい 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.6k
React + Apollo Client (GraphQL) により変化するアプリケーション設計
vwxyutarooo
6
3.1k
The challenge of Mercari Web Re-Architecture Project
vwxyutarooo
1
170
Other Decks in Programming
See All in Programming
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.6k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
10
2.6k
階層化自動テストで開発に機動力を
ickx
1
450
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
4
540
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
900
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
120
Go製CLIツールをnpmで配布するには
syumai
2
1k
Featured
See All Featured
KATA
mclloyd
31
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
It's Worth the Effort
3n
185
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Scaling GitHub
holman
461
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Become a Pro
speakerdeck
PRO
29
5.5k
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
ありがとうございました ありがとうございました