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
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
690
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
2
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
VS Code Update for GitHub Copilot
74th
2
660
型で語るカタ
irof
0
200
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.9k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Automating Front-end Workflow
addyosmani
1370
200k
Gamification - CAS2011
davidbonilla
81
5.4k
BBQ
matthewcrist
89
9.7k
Scaling GitHub
holman
460
140k
Building an army of robots
kneath
306
45k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Fireside Chat
paigeccino
37
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Agile that works and the tools we love
rasmusluckow
329
21k
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
ありがとうございました ありがとうございました