Embed Size (px)
Citation preview
今日のお話
最近話題の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
