![Cache と Fetch API を組み合わせる
Cache
importScripts(‘cache-polyfill.js’);
self.oninstall = function(ev) {
ev.waitUntil(
caches.open(‘v2’).then(function(cache) {
return cache.addAll([‘/’, ‘/cat.png’, ...]);
})); };
self.onactivate = function(ev) {
ev.waitUntil(caches.delete(‘v1’));
};
self.onfetch = function(ev) {
ev.respondWith(
caches.match(ev.request).then(function(res) {
return res || fetch(ev.request);
}); };
‘/’以下をキャッシュして
おき、キャッシュにない
データへのリクエストが
来たらfetch](https://image.slidesharecdn.com/serviceworkermobileweb1-150225013305-conversion-gate01/85/Service-worker-mobile-web-33-320.jpg)
![ServiceWorker の更新
￭ コントロールされているページをロードすると
ブラウザが自動でチェック
￭ Cache-control には従うので注意 (ただし24時間以上たってい
たら必ず見に行く)
￭ コントロールされてるページがある限り新しいものには置き換え
ない (Reload - Shift+Reload - Reload が有効)
self.oninstall = function(ev) {
ev.waitUntil(
caches.open(‘v2’).then(function(cache) {
return cache.addAll([‘...]);
}));
};
self.onactivate = function(ev) {
ev.waitUntil(caches.delete(‘v1’));
};
キャッシュの中身も
忘れずに更新する](https://image.slidesharecdn.com/serviceworkermobileweb1-150225013305-conversion-gate01/85/Service-worker-mobile-web-36-320.jpg)
Service worker が拓く mobile web の新しいかたち
- 1. ServiceWorker が拓く Mobile Web の新しいかたち HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) [email protected] HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) [email protected] ServiceWorker が拓く Mobile Web の新しいかたち
- 2. 自己紹介： Kinuko Yasuda @kinu / [email protected] Chrome エンジニア 5年目くらい ￭ ストレージ、ネットワーク、Worker系など裏方っぽい API をよくいじっています ￭ File/Blob, FileSystem, Quota, XHR, Web Workers, ServiceWorker などなど ￭ 2013年秋頃からは主に ServiceWorker
- 3. 今日話す内容 ServiceWorker が “拓く” Mobile Web の “新しいかたち” ￭ なぜ ServiceWorker は Exciting なの？ ￭ つまり ServiceWorker とは何なの？ ￭ どうやって使うの？ ￭ セキュリティはどうなってるの？ ￭ いつから試してみるべき？ Disclaimer: ここで話す内容は私の個人的な意見に基づくもので あり、私の雇用者とは関係ありません
- 4. なぜ ServiceWorker が Exciting なのか?
- 7. ￭ Speed - ロード時間 ￭ Offline - オフライン時の UX ￭ Re-engagement - Push通知などのユー ザ再訪を促す方法がない …そしてあらゆる場所に “Install App” のポップアップ Mobile 時代の Web の ”弱み”
- 8. Speed - ロード時間 @igrigorik Delay User reaction 0 - 100 ms Instant 100 - 300 ms Slight perceptible delay 300 - 1000 ms Task focus, perceptible delay 1 s+ Mental context switch 10 s+ I'll come back later... ユーザが待てる のは1秒まで、 しかし…
- 9. Offline - オフライン時のUX ￭ “When connectivity is gone, UX is gone.” ￭ AppCache? ￭ 宣言的な記述 ￭ 細かい制御不可 ￭ ブラウザ実装次第 ￭ 凝ったことをしようと するとはまる
- 10. Re-engagement - Push通知の欠如 ￭ ユーザが Tab を閉じたら終わり ￭ 再訪を促す手段がない
- 11. ￭ Speed - ロード時間 ￭ Offline - オフライン時の UX ￭ Re-engagement - Push通知などのユー ザ再訪を促す方法がない → どれも Web の動作モデル から来るもの Web の強み ≒ Mobile Web の ”弱み”
- 15. 改めて、ServiceWorkerとは ￭ バックグラウンドで動作するJavaScript 実行環境 ￭ DOMにはさわれない ￭ ユーザインタラクションもできない じゃあこのJavaScript環境で 何ができるの？ → ブラウザが内部でやっていたような ことを JS でいじれるようになる
- 16. 改めて、ServiceWorkerとは ￭ バックグラウンドで動作するJavaScript 実行環境 ￭ DOMにはさわれない ￭ ユーザインタラクションもできない ￭ フォアグラウンドのWebページと 対になって動作 ￭ ページのネットワークリクエストを横取りできる ￭ ページを開いたりメッセージ通信したりできる ￭ Push通知を受け取れる ￭ Fetch, Cache などの低レイヤAPIが使える (*) (*) Fetch, Cache は普通のページからも使えるようになることが予定されています
- 18. Webのイメージ, Before ServiceWorker Cache “Network connectivity is a single point of failure when it comes to user-experience on the web.” ー Jake Archibald, 2014
- 19. Webのイメージ, After ServiceWorker Cache Service Worker Webページ(のセット)に対してブラウザ内に登録・インス トールされ、バックグラウンドで動作 ● インストールされた ServiceWorker はページからの HTTPリクエストを横取りできる ♪
- 20. Webのイメージ, After ServiceWorker Cache Service Worker 一度インストールされた ServiceWorker はオフラインでも動 作する ● オフライン時やネットワークが遅い・不安定な場合の挙動 をきめ細かくスクリプトで制御できる ♪
- 21. Webのイメージ, After ServiceWorker Cache Cache API ♪ HTTPリクエストをキー、HTTPレスポンスを値としてスト アするオフラインストレージ ● HTTPリクエストをしゃべれる ● CORSレスポンスを扱える ● アトミックに複数エントリを更新できる
- 22. Webのイメージ, After ServiceWorker Cache Fetch API HTTPリクエストを発行してレスポンスを “Fetch” する ● CORSモード, Cache, Credentialsなどの細かい制御が可能 ● XHRのより低レイヤな置き換え、あるいはブラウザが実際に やっている “fetch” の挙動の再定義とも言える
- 23. Worker としての ServiceWorker ￭ SharedWorker と似ている ￭ 複数 Web ページに紐付けられる ￭ postMessage で Web ページと通信できる ￭ SharedWorker と異なる点 ￭ ‘register’ API によってブラウザに登録される ￭ 登録はページを閉じても保持される ￭ 対応する Web ページを ‘コントロール’ する
- 24. オフラインAPIとしての ServiceWorker ￭ AppCache と違い、オフラインキャッシュに 特化されたAPIではない ￭ AppCache のようなオフライン機能を 作ることもできる低レイヤAPI群 ￭ 便利な高レイヤ API はその上に構築できればよい ￭ ブラウザは必要なプリミティブを用意するので あとはWeb開発者のみなさんがよろしくやってね ￭ Extensible Web
- 26. ServiceWorker を登録・インストールする function register() { // ‘sw.js’ スクリプトを ‘hello/’ 以下の // URL に対して動作するよう登録する navigator.serviceWorker.register( 'sw.js', {scope: 'hello/'}) .then(function(r) { console.log('登録成功: ', r); }) .catch(function(err) { console.error('エラー... ', err); }); } self.oninstall = function(ev) { // インストール時に呼ばれる // イベント。必要ならここで // キャッシュの初期化や更新を行う ... } sw.js
- 28. ServiceWorker のイベント ￭ install ￭ ServiceWorker が登録されるときに呼ばれる ￭ 例：キャッシュデータの初期化など ￭ activate ￭ 新しい ServiceWorker がページをコントロール しはじめるときに呼ばれる ￭ 例：古いキャッシュデータを消すなど ￭ fetch ￭ ページがHTTPリクエストを発行したときに 呼ばれる (ページ遷移もしくはロード) ￭ 例：キャッシュデータを代わりに返すなど
- 30. Fetchハンドラによるリクエスト横取り self.onfetch = function(event) { // a.html のデータをその場で作って返す if (event.request.url.indexOf('a.html') != -1) { event.respondWith(new Response('<h1>Hi!</h1>')); } } Hi! hello/a.html Shift-Reload で強制的に読み込んだ場合 は ServiceWorker をバイパスします
- 31. Cache API を使う Cache // 未実装のメソッドがあるのでポリフィルが必要 // https://github.com/coonsta/cache-polyfill importScripts(‘cache-polyfill.js’); self.oninstall = function(ev) { ev.waitUntil( caches.open(‘v1’).then(function(cache) { return cache.add(‘/cat.png’); })); }; self.onfetch = function(ev) { if (ev.request.url.indexOf(‘png’) != -1) ev.respondWith(caches.match(‘/cat.png’)); }; scope 内のページ内の 画像をすべてネコの画像 に置き換える
- 32. Cache の中身を確認する (M41から) ② DevTools を開く ① serviceworker- internals へ ③ Resources タブ ④ Service Worker Cache キャッシュはオリジン毎に 管理されます。
- 33. Cache と Fetch API を組み合わせる Cache importScripts(‘cache-polyfill.js’); self.oninstall = function(ev) { ev.waitUntil( caches.open(‘v2’).then(function(cache) { return cache.addAll([‘/’, ‘/cat.png’, ...]); })); }; self.onactivate = function(ev) { ev.waitUntil(caches.delete(‘v1’)); }; self.onfetch = function(ev) { ev.respondWith( caches.match(ev.request).then(function(res) { return res || fetch(ev.request); }); }; ‘/’以下をキャッシュして おき、キャッシュにない データへのリクエストが 来たらfetch
- 34. Fetch と Cache の組み合わせ例 ￭ キャッシュの中身をまず表示して後からネット ワークから取ってきた内容で更新 ￭ ストレスの少ないブラウジング ￭ 普通のアプリのような挙動 ￭ Background Sync と組み合わせればオンラインのときにキャッ シュを更新できるように ￭ テンプレートをキャッシュしておいて内容だけ ネットワークから取得 ￭ ロード時間の短縮 ネットワーク状況にかかわらずきめ細かいUXの 設計ができるようになる
- 35. Fetch API が返す Response ￭ basic filtered ￭ 同一オリジンでリダイレクトでもない ￭ Set-Cookie, Set-Cookie2 だけがフィルタされる ￭ cors filtered ￭ リクエストが cors もしくは cors-with-preflight で同一 オリジンではない ￭ Cache-Control, Content-Type など一部を除きすべ てのヘッダがフィルタされる ￭ opaque filtered ￭ リクエストが no-cors で同一オリジンではない ￭ すべてのヘッダ, status, body がフィルタされる
- 36. ServiceWorker の更新 ￭ コントロールされているページをロードすると ブラウザが自動でチェック ￭ Cache-control には従うので注意 (ただし24時間以上たってい たら必ず見に行く) ￭ コントロールされてるページがある限り新しいものには置き換え ない (Reload - Shift+Reload - Reload が有効) self.oninstall = function(ev) { ev.waitUntil( caches.open(‘v2’).then(function(cache) { return cache.addAll([‘...]); })); }; self.onactivate = function(ev) { ev.waitUntil(caches.delete(‘v1’)); }; キャッシュの中身も 忘れずに更新する
- 37. ServiceWorker の更新 - はまりどころ ￭ コントロールされているページをほかに開いて ると更新されない ￭ スクリプトエラーがあると更新されない ￭ “Opens the DevTools window for ServiceWorker on start for debugging” でデバッグできる ￭ chrome://serviceworker-internals/ は友だち ￭ どうしてもはまったらとりあえず登録を全部消 してやりなおす…
- 38. ￭ https://kinu.github. io/ServiceWorkerOfflineBasic ￭ https://events.google.com/io2015/ ￭ https://horo-t.github. io/tiff2bmpsw/tiff2bmpsw.html デモ的なもの
- 39. Push API (M42 から) ￭ デモ: johnme-gcm.appspot. com/chat
- 41. ServiceWorker のセキュリティ (1) ￭ Secure origin のみ ￭ http://example.com では動かない ￭ https://example.com, http://localhost のみ ￭ 同一オリジンルールに従う ￭ https://example.com の ServiceWorker は https://example.com/ のみをコントロール
- 42. ServiceWorker のセキュリティ (2) ￭ コントロールできるのはスクリプトの置か れているパス以下のみ ￭ https://example.com/foo/sw.js は https://example.com/bar/ をコントロールできない ￭ ただし、Service-Worker-Allowed: ヘッダ でサーバ側で変更できる (M42から) ￭ Service-Worker-Allowed: ‘/allowed- path’
- 43. ServiceWorker のセキュリティ (3) ￭ ServiceWorker スクリプトは javascript MIME type でサーブされる必要がある ￭ text/plain などでサーブされてるスクリプトは ServiceWorker として登録できない ￭ ServiceWorker のリクエストには Service- Worker: script ヘッダがつく ￭ サイト側で簡単に disable できる ￭ 最初は whitelist されたものだけ許可するのオススメ
- 46. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ￭ ロード時間の短縮 ￭ オフラインへの対応 ￭ Push通知対応 ￭ … SW対応ブラウザ → UXの向上 SW非対応ブラウザ → そのまま
- 47. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ￭ ロード時間の短縮 ￭ オフラインへの対応 ￭ Push通知対応 ￭ … ネイティブ・アプリでいい? ￭ いいものもある、もちろん ￭ インストールするメリットがあるサイトですか? ￭ 誰に、いつまで “Install App” 出し続けますか?
- 48. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ￭ ロード時間の短縮 ￭ オフラインへの対応 ￭ Push通知対応 ￭ … むしろ ServiceWorker 化 しない理由がない！
- 53. 今後の予定 ￭ M41: (もうじき) ￭ Cache API in DevTools, more methods ￭ M42: (4月半ば) ￭ Push API, Service-Worker-Allowed:, Fetch API in global scope ￭ Firefox: 3月末に Nightly を目標
- 54. 参考になるページなど ￭ Chrome 40 で今すぐServiceWorker を試す ￭ HTML5Rocks: ServiceWorkerの紹介 ￭ Google I/O 2014 - ServiceWorker でネイティ ブアプリとの差を縮めよう ￭ Jake Archibald’s blog: The offline cookbook