Service Workerとその周辺API 駆け足紹介

Transcript of "Service Workerとその周辺API 駆け足紹介"

1. 1. ServiceWorker と それを取り巻くAPI 駆け足紹介 HTML5オールスターズ 06/13/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org
2. 2. 今日のお話 最近話題のServiceWorker を中心に 新しいAPIについて(偏った視点で) 駆け足で紹介します * 発表時点の確認バージョンは Chrome 43 (Canary 45), Opera 30, FireFox Nightly です * 個人的な意見を含みます。雇用者とは無関係
3. 3. 去年までのWeb Cache
4. 4. 今年のWeb Cache Service Worker ♪ Cache API Fetch API HTTPS HTTP/2 Push API ! Background Sync API Permission API Streams API
5. 5. ①ServiceWorker ページの裏側で動くイベント駆動型Yet another Javascript 環境 ￭ ページのセット (= scope) に対してインストー ルされ、バックグラウンドで動作 ￭ 対象ページからのロードリクエストを proxy の ように横取りして操作可能
6. 6. ①ServiceWorker ♪ Service Worker ♪ ‘fetch’ イベント register
7. 7. ①ServiceWorker navigator.serviceWorker.register( ‘sw.js’, {scope: ‘scope/’}) .then(function(registration) { /* 成功! */ }); self.onfetch = function(event) { event.respondWith( new Response(‘from SW!’)); };
8. 8. ￭ 最初のロードからServiceWorkerでコントロー ルしたい：Clients.claim() (M42から) ￭ スクリプトのあるディレクトリ外のページをコント ロールしたい： Service-Worker-Allowed ヘッダ (M42から) ￭ ServiceWorkerがコントロールしているページ の一覧が取りたい：Clients.matchAll() (M43でgetAllから変更) ServiceWorker細かい話
9. 9. ￭ HTTPS だけなのでテストが面倒： --unsafely-treat-insecure-origin-as-secure=http://url/ --user-data-dir=/tmp/dir (M44から) ￭ ServiceWorker からも Performance API 使 いたい：resource timing, user timing で workerStart が使えるように (M45から) ￭ ServiceWorker をスクリプトから更新したい： registration.update() (M45から…多分) ServiceWorker細かい話
10. 10. ②Cache API HTTPリクエスト・レスポンスのための オフラインストレージ ￭ Request オブジェクトをキーに、Response オ ブジェクトを値に取る Cache Cache API ♪
11. 11. // Cache に ‘foo.png’ のレスポンスを入れる caches.open(‘cache-name’).then( function(cache) { cache.add(‘foo.png’); }); // Cache から ‘foo.png’ のレスポンスを取り出す caches.match(‘foo.png’).then( function(res) { console.log(res); }); ②Cache API Chrome, Opera ではまだ一部に polyfill 必要 global scope の仕様はまだちょっと議論中
12. 12. self.oninstall = function(event) { event.waitUntil(caches.open(‘cache’) .then(function(cache) { return cache.addAll([‘index.html’,...]); })); }; self.onfetch = function(event) { event.respondWith( caches.match(event.request)); }; ②Cache API ServiceWorker でのサンプル
13. 13. ③Fetch API ネットワークからリソースを ‘fetch’ して Response オブジェクトを返す ￭ XHR より CORS, cache control などを きめ細かく制御可能 Fetch API ♪
14. 14. ③Fetch API fetch('foo.txt').then(function(response) { response.text().then(function(data) { console.log(data); }); }); 余談：cancel をどうするかなどで揉めてる
15. 15. ③Fetch API // Cache になかったものだけネットワークから取ってくる例 self.onfetch = function(ev) { ev.respondWith( caches.match(ev.request).then( function(response) { return response || fetch(ev.request); })); }; ServiceWorker でのサンプル
16. 16. ④ReadableStream まとめてじゃなくてデータを受け取るた びに処理したい ￭ 絶賛仕様策定中: Streams API ￭ バイナリ・ストリームをちゃんと扱える ￭ fetch と組み合わせて response.body を ストリームとして読み出せる * まだまだ仕様について議論中
17. 17. ④ReadableStream // レスポンスを少しずつ読み出す (あまり意味ない例) fetch(url).then(function(res) { var reader = res.body.getReader(); reader.read().then( function(r) { if (!r.done) { console.log(r.value); } }); });
18. 18. ⑤Push API ServiceWorker を使ってサーバから のプッシュ通知を受け取る ￭ GCM などを使う (実装依存) ￭ タブ閉じてても受けられる ￭ Chrome for Android では Chrome 起動してなくてもOK ! * まだ仕様少し変わったりしている
19. 19. ⑤Push API navigator.serviceWorker.ready.then( function(sw) { sw.pushManager.subscribe().then( function(sub) { // endpoint をサーバに登録 }); } ); self.onpush = function(event) { event.waitUntil( self.registration.showNotification(...)) };
20. 20. 今ネットにつながってなくても後で つながったときに通信して欲しい ￭ ツイートやメッセージをオフラインで書いて次に つながったとき送る ￭ 定期的にバックグラウンドで通信する ‘periodic sync’ の仕様も策定中 ＊ Chrome でも --enable-service-worker-sync --enable-experimental-web-platform-features フラグが必要 ⑥Background Sync
21. 21. ⑥Background Sync navigator.serviceWorker.ready.then( function(sw) { sw.sync.register({ tag: ‘send-later’ }) .then(function(reg) { // 登録成功！ }); } ); self.onsync = function(event) { if (event.registration.tag == ‘send-later’) event.waitUntil(sendEverythingNow()); };
22. 22. その他今後来そうなもの ￭ Geofencing API ￭ Storage API ￭ Web Bluetooth API ￭ . . .
23. 23. いろいろ出るのはいいけど使 うの大変 (怒) 詳しい人が作ってくれたライブラリとか 使いましょう ￭ platinum-sw: ServiceWorker in Polymer ￭ sw-precache: オフラインキャッシュのSWコー ドを生成してくれるNodeモジュール
24. 24. デモ的サイトなど ￭ www.locchat.com - ServiceWorker + Push API チャットサイト ￭ https://jakearchibald-gcm.appspot. com/chat/ - ServiceWorker + Push API + Background Sync ￭ ソース： https://github. com/jakearchibald/push-api-appengine-demo
25. 25. Resources ￭ ServiceWorker ￭ Cache API ￭ Fetch API ￭ Streams API ￭ Fetch + Streams API ￭ Push API ￭ Background Sync