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

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

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