Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Yutaro Miyazaki

November 18, 2017
Tweet

More Decks by Yutaro Miyazaki

Other Decks in Programming

Transcript

  1. 秋の JavaScript 祭 in mixi 2017 ゼロから始めるっぽい Service Worker ゼロから始めるっぽい

    Service Worker
  2. Service Worker 人気ない

  3. None
  4. None
  5. None
  6. None
  7. 来るべく日に備えて基礎的な部分と 運用を想定したあれこれを確認しよう

  8. Yutaro Miyazaki (@vwxyutarooo) Yutaro Miyazaki (@vwxyutarooo) ニート ↓ フリーの Web

    屋 ↓ アプリ屋のフロントエンド ❤ Vue.js, TypeScript
  9. None
  10. None
  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'); }

  18. None
  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. 1. Cache 1. Cache Pre cache と Runtime cache がある

  52. Pre Cache SW インストール時にキャッシュ JS や CSS 等アプリケーションに必須なリソース Runtime Cache

    Fetch イベント時にキャッシュさせる HTML とか画像アセット
  53. 何方もキャッシュさせるためのコードを 自分で書くのは単調でダルい

  54. GoogleChrome/workbox GoogleChoremLabs/sw‑precache

  55. None
  56. Webpack だったら workbox‑webpack‑plugin goldhand/sw‑precache‑webpack‑plugin

  57. で自動生成させる

  58. 2. Web Push 2. Web Push

  59. Push の仕組み Push の仕組み

  60. None
  61. None
  62. None
  63. None
  64. None
  65. ユーザ毎に固有のトークン・エンドポイント・鍵 ユーザとトークンを管理しながら Push を送るための サーバとアプリケーションが要る ユーザ情報とエンドポイントと鍵を 関連付けて管理する必要

  66. 厳しい

  67. SaaS とか Push サービスを使うのが一般的 などなど Amazon Simple Notification Service (Amazon

    SNS) CORE PUSH PushWoosh
  68. None
  69. 3. オフライン処理 3. オフライン処理

  70. None
  71. None
  72. まとめ まとめ Lifecycle をよく知る よりアプリケーション的な考え方、特に Update まずはキャッシュから

  73. 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
  74. ありがとうございました ありがとうございました