そろそろはじめる Service Worker @ SpeeeKaigi #3

Transcript

1. そろそろはじめる Service Worker 2017-08-25 SpeeeKaigi#3 株式会社Speee エンジニア組織推進室 / 服部 雄輝

2. 自己紹介 服部 雄輝 (@yhatt) エンジニア組織推進室 マイブーム: Minecraft で鉄道服部線を引く 携わるプロダクト エンジニア採用支援全般

   (システム開発/デザイン) Speee Library システム開発 etc... 2

3. Agenda Service Worker? Worker について Service Worker で できること/使い方 デモ

   1. オフラインキャッシュ 2. ローカルプロクシ 3. プッシュ通知 まとめ 3

4. Service Worker? 4

5. Worker について (おさらい) 5

6. Worker ブラウザで JS をマルチスレッドで動かす仕組み HTML の表示処理をブロックしない 重い JS をバックグラウンドで動かせる Web

   Worker (2010 年頃〜) 別プロセスで、指定した JS を実行できる メインスレッドとは postMessage() でやり取り const myWorker = new Worker("worker.js"); そろそろはじめる Service Worker 6

7. Worker family Web Worker 単一のページから呼び出される Worker 古くからある割に、あまりユースケースを見たことが無い Shared Worker 複数ページ間で共有される

   Worker (ブラウザサポートがあまり進まず) Service Worker ページの外で動く Worker ブラウザにインストールされ、バックグラウンドで動作 そろそろはじめる Service Worker 7

8. Service Worker でできること オフラインキャッシュ (Cache API) プッシュ通知 (Web Push API)

   リソースの先読み バックグラウンド同期 クライアントサイドトランスパイル ジオフェンシング (Geolocation API) and more... そろそろはじめる Service Worker 8

9. Service Worker 対応ブラウザ Chrome (含 Android), Firefox, Opera が対応済み Edge

   は開発中、Safari も 今月3日に開発を表明 -- from Can I use... “ “ そろそろはじめる Service Worker 9

10. Service Worker の使い方 動作するのは HTTPS か localhost のみ // https://example.com/main.js

    navigator.serviceWorker.register( '/worker.js', { scope: '/hoge/'} ) /worker.js を Worker としてブラウザに登録 Worker のコントロール対象は Worker の場所以下 ( https://example.com/ ) scope : 対象を明示 ( https://example.com/hoge/ ) そろそろはじめる Service Worker 10

11. デモ そろそろはじめる Service Worker 11

12. yhatt/service-worker-playground https://github.com/yhatt/service-worker-playground そろそろはじめる Service Worker 12

13. Demo 1 オフラインキャッシュ http://127.0.0.1:8080/of ine_cache/ そろそろはじめる Service Worker 13

14. -- from The of ine cookbook - JakeArchibald.com “ “

    そろそろはじめる Service Worker 14

15. import RoboHash from './robohash' self.addEventListener('install', (e) => { e.waitUntil( caches.open('v1').then((cache)

    => { cache.addAll(RoboHash.urls) // キャッシュ対象を追加 }) ) }) // ネットワー クリクエスト時に呼び出される self.addEventListener('fetch', (e) => { e.respondWith( caches.match(e.request).then(response => // キャッシュがあれば返却、 無ければ従来通りリクエスト response ? response : fetch(e.request) }) ) そろそろはじめる Service Worker 15

16. ポイント Fetch API ネットワークリクエストを表現する API Request/Response インターフェース クロスオリジンの情報も保持される ドメインを超えたキャッシュも可能 Cache

    API キャッシュをコントロールするための API ブラウザが適切に管理 & Cache Versioning そろそろはじめる Service Worker 16

17. Demo 2 応用編：ローカルプロクシ http://127.0.0.1:8080/pie_chart_image_proxy/ そろそろはじめる Service Worker 17

18. self.addEventListener('fetch', (e) => { const requestUrl = url.parse(e.request.url) // 特定の画像ファイルがリクエストされたら...

    if (requestUrl.hostname === 'localhost' && requestUrl.pathname === '/chart.gif') { // クエリの情報をグラフ生成クラスに渡す const chart = new PieChart(requestUrl.query) // レスポンスとして返すSVG 画像を生成 e.respondWith( new Response( chart.renderAsSVG(), { headers: { 'Content-Type': 'image/svg+xml' } } ) ) } }) そろそろはじめる Service Worker 18

19. そろそろはじめる Service Worker 19

20. さらなる応用例 画像の A/B テスト 一部のユーザーのみ、画像の Request 先を xxx@b.png に変更 A/B

    テストの導入をクライアントサイドで完結できる ファイル形式の変換 未対応の画像形式を変換して表示する例 例: TIFF BMP (with Emscripten) https://horo-t.github.io/tiff2bmpsw/tiff2bmpsw.html Client-side templating / transpiling そろそろはじめる Service Worker 20

21. Demo 3 プッシュ通知 (Web Push API) http://127.0.0.1:8080/push_noti cation/ そろそろはじめる Service

    Worker 21

22. self.addEventListener('push', (e) => { e.waitUntil( self.registration.showNotification( 'Service worker notification', {

    body: e.data.text() }, ) ) }) self.addEventListener('notificationclick', (e) => { e.notification.close() e.waitUntil( clients.openWindow('http://localhost:8080/notify/') ) }) そろそろはじめる Service Worker 22

23. プッシュ通知の Service Worker Worker は通知の表示部分を請け負う 通知を管理するのは Web Push API の仕事

    Worker の push イベントが通知に反応 Service Worker がバックグラウンドで動く事を利用する Web Push API "VAPID" という仕様で、購読・通知処理の通信を行う 結構大変なので、ライブラリの使用がお勧め https://www.npmjs.com/package/web-push そろそろはじめる Service Worker 23

24. [再掲] Service Worker でできること オフラインキャッシュ (Cache API) プッシュ通知 (Web Push

    API) リソースの先読み バックグラウンド同期 クライアントサイドトランスパイル ジオフェンシング (Geolocation API) and more... そろそろはじめる Service Worker 24

25. Service Worker の可能性 ＝ ∞ そろそろはじめる Service Worker 25

26. まとめ Service Worker は実装はシンプルだが、 活用の幅がとにかく広い キャッシュ目的以外にも... クライアントサイド処理 (Proxy etc...) バックグラウンド処理

    (Push / Sync etc...) Web アプリのリッチ化に、様々な側面から貢献する可能性 もちろん関連 API の習得は必要 例：データの永続化 IndexedDB サーバー or クライアントは良く吟味すべし! そろそろはじめる Service Worker 26

27. ありがとうございました @yhatt そろそろはじめる Service Worker 27