service workerとその周辺api 駆け足紹介
TRANSCRIPT
ServiceWorker とそれを取り巻くAPI駆け足紹介
HTML5オールスターズ 06/13/2015Kinuko Yasuda (@kinu)[email protected]
今日のお話
最近話題のServiceWorker を中心に
新しいAPIについて(偏った視点で)駆け足で紹介します
* 発表時点の確認バージョンは Chrome 43 (Canary 45), Opera 30, FireFox Nightly です
* 個人的な意見を含みます。雇用者とは無関係
去年までのWeb
Cache
今年のWeb
Cache
ServiceWorker
♪
CacheAPI
FetchAPI
HTTPSHTTP/2
PushAPI
!
Background Sync API
PermissionAPI
StreamsAPI
①ServiceWorker
ページの裏側で動くイベント駆動型Yet another Javascript 環境
■ ページのセット (= scope) に対してインストー
ルされ、バックグラウンドで動作
■ 対象ページからのロードリクエストを proxy のように横取りして操作可能
①ServiceWorker
♪ServiceWorker
♪
‘fetch’イベント
register
①ServiceWorkernavigator.serviceWorker.register(
‘sw.js’, {scope: ‘scope/’})
.then(function(registration) {
/* 成功! */
});
self.onfetch = function(event) {
event.respondWith(
new Response(‘from SW!’));
};
■ 最初のロードからServiceWorkerでコントロールしたい:Clients.claim() (M42から)
■ スクリプトのあるディレクトリ外のページをコントロールしたい:Service-Worker-Allowed ヘッダ (M42から)
■ ServiceWorkerがコントロールしているページの一覧が取りたい:Clients.matchAll()(M43でgetAllから変更)
ServiceWorker細かい話
■ 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細かい話
②Cache APIHTTPリクエスト・レスポンスのための
オフラインストレージ
■ Request オブジェクトをキーに、Response オブジェクトを値に取る
Cache
CacheAPI
♪
// 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 の仕様はまだちょっと議論中
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 でのサンプル
③Fetch APIネットワークからリソースを ‘fetch’ して Response オブジェクトを返す
■ XHR より CORS, cache control などを
きめ細かく制御可能
FetchAPI
♪
③Fetch API
fetch('foo.txt').then(function(response) {
response.text().then(function(data) {
console.log(data);
});
});
余談:cancel をどうするかなどで揉めてる
③Fetch API
// Cache になかったものだけネットワークから取ってくる例
self.onfetch = function(ev) {
ev.respondWith(
caches.match(ev.request).then(
function(response) {
return response || fetch(ev.request);
}));
};
ServiceWorker でのサンプル
④ReadableStreamまとめてじゃなくてデータを受け取るた
びに処理したい
■ 絶賛仕様策定中: Streams API■ バイナリ・ストリームをちゃんと扱える
■ fetch と組み合わせて response.body をストリームとして読み出せる
* まだまだ仕様について議論中
④ReadableStream
// レスポンスを少しずつ読み出す (あまり意味ない例)fetch(url).then(function(res) {
var reader = res.body.getReader();
reader.read().then(
function(r) {
if (!r.done) { console.log(r.value); }
});
});
⑤Push APIServiceWorker を使ってサーバから
のプッシュ通知を受け取る
■ GCM などを使う (実装依存)■ タブ閉じてても受けられる
■ Chrome for Android では
Chrome 起動してなくてもOK
!
* まだ仕様少し変わったりしている
⑤Push APInavigator.serviceWorker.ready.then(
function(sw) {
sw.pushManager.subscribe().then(
function(sub) {
// endpoint をサーバに登録 });
}
);
self.onpush = function(event) {
event.waitUntil(
self.registration.showNotification(...))
};
今ネットにつながってなくても後で
つながったときに通信して欲しい
■ ツイートやメッセージをオフラインで書いて次に
つながったとき送る
■ 定期的にバックグラウンドで通信する ‘periodic sync’ の仕様も策定中
* Chrome でも --enable-service-worker-sync --enable-experimental-web-platform-features フラグが必要
⑥Background Sync
⑥Background Syncnavigator.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());
};
その他今後来そうなもの
■ Geofencing API■ Storage API■ Web Bluetooth API■ . . .
いろいろ出るのはいいけど使
うの大変 (怒)詳しい人が作ってくれたライブラリとか
使いましょう
■ platinum-sw: ServiceWorker in Polymer■ sw-precache: オフラインキャッシュのSWコー
ドを生成してくれるNodeモジュール
デモ的サイトなど
■ 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
Resources■ ServiceWorker■ Cache API■ Fetch API■ Streams API■ Fetch + Streams API■ Push API■ Background Sync