ゼロから始めるっぽい Service Worker

1. 秋の JavaScript 祭 in mixi 2017 ゼロから始めるっぽい Service Worker ゼロから始めるっぽい Service Worker
2. Service Worker 人気ない
7. 来るべく日に備えて基礎的な部分と 運用を想定したあれこれを確認しよう
8. Yutaro Miyazaki (@vwxyutarooo) Yutaro Miyazaki (@vwxyutarooo) ニート ↓ フリーの Web 屋 ↓ アプリ屋のフロントエンド ❤ Vue.js, TypeScript
11. Service Worker とは Service Worker とは イベントドリブンワーカー DOM とは切り離されている ブラウザのバックグラウンドで動作
12. SW
13. 主要な Event 主要な Event Fetch Push Sync
14. 対応ブラウザ 対応ブラウザ
15. 活用例 活用例 クライアントキャッシュ Web Push オフライン処理
16. Register Register 同一オリジンにあるスクリプト Content‑Type が JavaScript であること Secure Context https:// , localhost , files:// 改変された SW が登録されてしまうケースを防ぐ
17. コード if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js'); }
19. 第2引数でスコープ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js', { scope: '/user/' }); }
20. SW がコントロールできるのは スコープ (ディレクトリ) の範囲内 SW のスコープは自身の ディレクトリ範囲内
21. navigator.serviceWorker.register('/hoge/service-worker.js', { scope: '/' });
22. ライフサイクル ライフサイクル
23. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
24. 1. Register 1. Register
25. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ①
26. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ②
27. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ③
28. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
29. ここで止まる SW はもう一度アクセスされた時有効に
30. demo
31. 初回アクセスからコントロールしたい
32. clients.claim() // service-worker.js self.addEventListener('activate', (event) => { event.waitUntil(clients.claim()); });
33. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
34. demo
35. なるべく使わないほうがお行儀がいい
36. 2. Update 2. Update
37. トリガー トリガー スコープ内ページへのナビゲーション時 push や sync などのイベント発生時 not 24時間以内にアップデートチェック .register() の呼び出し時 Service Worker URL が変更された場合のみ
38. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑤
39. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑥
40. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑦
41. ここで止まる
42. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting() ⑦
43. demo
44. 複数のタブ バックグラウンド処理が走っているケース データの整合性
45. いいからすぐに適用したい
46. skipWaiting()
47. demo
48. なるべく使わないほうがお行儀がいい
49. SW Register (oninstall) Installed Waiting Redundant (onactivate) Activated Controller Update Installing Activating 2nd Access clients.claim() Close apps skipWaiting()
50. ✅
51. 実用例 実用例
52. 1. Cache 1. Cache Pre cache と Runtime cache がある
53. Pre Cache SW インストール時にキャッシュ JS や CSS 等アプリケーションに必須なリソース Runtime Cache Fetch イベント時にキャッシュさせる HTML とか画像アセット
54. 何方もキャッシュさせるためのコードを 自分で書くのは単調でダルい
55. GoogleChrome/workbox GoogleChoremLabs/sw‑precache
57. Webpack だったら workbox‑webpack‑plugin goldhand/sw‑precache‑webpack‑plugin
58. で自動生成させる
59. ✅
60. 2. Web Push 2. Web Push
61. Push の仕組み Push の仕組み
67. ユーザ毎に固有のトークン・エンドポイント・鍵 ユーザとトークンを管理しながら Push を送るための サーバとアプリケーションが要る ユーザ情報とエンドポイントと鍵を 関連付けて管理する必要
68. 厳しい
69. SaaS とか Push サービスを使うのが一般的 などなど Amazon Simple Notification Service (Amazon SNS) CORE PUSH PushWoosh
71. 3. オフライン処理 3. オフライン処理
74. まとめ まとめ Lifecycle をよく知る よりアプリケーション的な考え方、特に Update まずはキャッシュから
75. 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
76. ありがとうございました ありがとうございました