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
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
830
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
JetBrainsのAI機能の紹介 #jjug
yusuke
0
210
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.8k
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
The State of Fluid (2025)
s2b
0
180
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
130
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
420
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
440
Flutterと Vibe Coding で個人開発!
hyshu
1
260
TanStack DB ~状態管理の新しい考え方~
bmthd
2
250
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
4 Signs Your Business is Dying
shpigford
184
22k
The Language of Interfaces
destraynor
160
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Fireside Chat
paigeccino
39
3.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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
ありがとうございました ありがとうございました