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
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
770
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
900
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.3k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
410
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
550
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
320
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
1
880
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
240
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
340
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing for humans not robots
tammielis
253
25k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Designing Experiences People Love
moore
142
24k
Visualization
eitanlees
146
16k
Gamification - CAS2011
davidbonilla
81
5.4k
A Tale of Four Properties
chriscoyier
160
23k
Mobile First: as difficult as doing things right
swwweet
223
9.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
301
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
ありがとうございました ありがとうございました