Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

15,066 views

Published on

2015/06/13 HTML5オールスターズ用
① Service Worker (とその細かいUpdates)
② Cache API
③ Fetch API
④ Streams API (ReadableStream)
⑤ Push API
⑥ Background Sync API

Published in: Technology

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

×