More Related Content
What's hot
What's hot (20)
Similar to Service worker が拓く mobile web の新しいかたち
Similar to Service worker が拓く mobile web の新しいかたち (20)
Recently uploaded
Recently uploaded (15)
Service worker が拓く mobile web の新しいかたち
- 1. ServiceWorker が拓く Mobile Web の新しいかたち HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org ServiceWorker が拓く Mobile Web の新しいかたち
- 2. 自己紹介： Kinuko Yasuda @kinu / kinuko@chromium.org 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