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 が拓く mobile web の新しいかたち

18,467 views

Published on

Service worker が拓く mobile web の新しいかたち

Published in: Technology

Service worker が拓く mobile web の新しいかたち

  1. 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. 2. 自己紹介: Kinuko Yasuda @kinu / kinuko@chromium.org Chrome エンジニア 5年目くらい ■ ストレージ、ネットワーク、Worker系など裏方っぽい API をよくいじっています ■ File/Blob, FileSystem, Quota, XHR, Web Workers, ServiceWorker などなど ■ 2013年秋頃からは主に ServiceWorker
  3. 3. 今日話す内容 ServiceWorker が “拓く” Mobile Web の “新しいかたち” ■ なぜ ServiceWorker は Exciting なの? ■ つまり ServiceWorker とは何なの? ■ どうやって使うの? ■ セキュリティはどうなってるの? ■ いつから試してみるべき? Disclaimer: ここで話す内容は私の個人的な意見に基づくもので あり、私の雇用者とは関係ありません
  4. 4. なぜ ServiceWorker が Exciting なのか?
  5. 5. Web is Awesome!! オープン仕様 リンクによる導線 常に最新のコンテンツ インストール不要 Mashupの容易さ プラットフォーム中立
  6. 6. …ただしネットワークに接続していれば。
  7. 7. ■ Speed - ロード時間 ■ Offline - オフライン時の UX ■ Re-engagement - Push通知などのユー ザ再訪を促す方法がない …そしてあらゆる場所に “Install App” のポップアップ Mobile 時代の Web の ”弱み”
  8. 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. 9. Offline - オフライン時のUX ■ “When connectivity is gone, UX is gone.” ■ AppCache? ■ 宣言的な記述 ■ 細かい制御不可 ■ ブラウザ実装次第 ■ 凝ったことをしようと するとはまる
  10. 10. Re-engagement - Push通知の欠如 ■ ユーザが Tab を閉じたら終わり ■ 再訪を促す手段がない
  11. 11. ■ Speed - ロード時間 ■ Offline - オフライン時の UX ■ Re-engagement - Push通知などのユー ザ再訪を促す方法がない → どれも Web の動作モデル   から来るもの Web の強み ≒ Mobile Web の ”弱み”
  12. 12. Webの動作モデル自体を拡張できるよう にする? できればブラウザの実装スピードに とらわれない形で。 → ServiceWorker
  13. 13. ServiceWorkerとは 何なのか?
  14. 14. ServiceWorkerとは? “AppCacheを置き換える 新しいオフラインAPI” “ブラウザ内で動作する JavaScriptネットワークプロキシ” “ネイティブ・アプリと Web の 間のギャップを埋める”
  15. 15. 改めて、ServiceWorkerとは ■ バックグラウンドで動作するJavaScript 実行環境 ■ DOMにはさわれない ■ ユーザインタラクションもできない じゃあこのJavaScript環境で 何ができるの? → ブラウザが内部でやっていたような    ことを JS でいじれるようになる
  16. 16. 改めて、ServiceWorkerとは ■ バックグラウンドで動作するJavaScript 実行環境 ■ DOMにはさわれない ■ ユーザインタラクションもできない ■ フォアグラウンドのWebページと 対になって動作 ■ ページのネットワークリクエストを横取りできる ■ ページを開いたりメッセージ通信したりできる ■ Push通知を受け取れる ■ Fetch, Cache などの低レイヤAPIが使える (*) (*) Fetch, Cache は普通のページからも使えるようになることが予定されています
  17. 17. Webのイメージ, Before ServiceWorker Cache ♪
  18. 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. 19. Webのイメージ, After ServiceWorker Cache Service Worker Webページ(のセット)に対してブラウザ内に登録・インス トールされ、バックグラウンドで動作 ● インストールされた ServiceWorker はページからの HTTPリクエストを横取りできる ♪
  20. 20. Webのイメージ, After ServiceWorker Cache Service Worker 一度インストールされた ServiceWorker はオフラインでも動 作する ● オフライン時やネットワークが遅い・不安定な場合の挙動 をきめ細かくスクリプトで制御できる ♪
  21. 21. Webのイメージ, After ServiceWorker Cache Cache API ♪ HTTPリクエストをキー、HTTPレスポンスを値としてスト アするオフラインストレージ ● HTTPリクエストをしゃべれる ● CORSレスポンスを扱える ● アトミックに複数エントリを更新できる
  22. 22. Webのイメージ, After ServiceWorker Cache Fetch API HTTPリクエストを発行してレスポンスを “Fetch” する ● CORSモード, Cache, Credentialsなどの細かい制御が可能 ● XHRのより低レイヤな置き換え、あるいはブラウザが実際に やっている “fetch” の挙動の再定義とも言える
  23. 23. Worker としての ServiceWorker ■ SharedWorker と似ている ■ 複数 Web ページに紐付けられる ■ postMessage で Web ページと通信できる ■ SharedWorker と異なる点 ■ ‘register’ API によってブラウザに登録される ■ 登録はページを閉じても保持される ■ 対応する Web ページを ‘コントロール’ する
  24. 24. オフラインAPIとしての ServiceWorker ■ AppCache と違い、オフラインキャッシュに 特化されたAPIではない ■ AppCache のようなオフライン機能を 作ることもできる低レイヤAPI群 ■ 便利な高レイヤ API はその上に構築できればよい ■ ブラウザは必要なプリミティブを用意するので あとはWeb開発者のみなさんがよろしくやってね ■ Extensible Web
  25. 25. ServiceWorker を 使ってみる
  26. 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
  27. 27. ServiceWorker のライフサイクル install イベント activate イベント fetch イベント
  28. 28. ServiceWorker のイベント ■ install ■ ServiceWorker が登録されるときに呼ばれる ■ 例:キャッシュデータの初期化など ■ activate ■ 新しい ServiceWorker がページをコントロール しはじめるときに呼ばれる ■ 例:古いキャッシュデータを消すなど ■ fetch ■ ページがHTTPリクエストを発行したときに 呼ばれる (ページ遷移もしくはロード) ■ 例:キャッシュデータを代わりに返すなど
  29. 29. 登録された ServiceWorker を確認する chrome://serviceworker-internals DevTools を開く 登録を 消す SWの コンソールロ グ
  30. 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. 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. 32. Cache の中身を確認する (M41から) ② DevTools を開く ① serviceworker- internals へ ③ Resources タブ ④ Service Worker Cache キャッシュはオリジン毎に 管理されます。
  33. 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. 34. Fetch と Cache の組み合わせ例 ■ キャッシュの中身をまず表示して後からネット ワークから取ってきた内容で更新 ■ ストレスの少ないブラウジング ■ 普通のアプリのような挙動 ■ Background Sync と組み合わせればオンラインのときにキャッ シュを更新できるように ■ テンプレートをキャッシュしておいて内容だけ ネットワークから取得 ■ ロード時間の短縮 ネットワーク状況にかかわらずきめ細かいUXの 設計ができるようになる
  35. 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. 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. 37. ServiceWorker の更新 - はまりどころ ■ コントロールされているページをほかに開いて ると更新されない ■ スクリプトエラーがあると更新されない ■ “Opens the DevTools window for ServiceWorker on start for debugging” でデバッグできる ■ chrome://serviceworker-internals/ は友だち ■ どうしてもはまったらとりあえず登録を全部消 してやりなおす…
  38. 38. ■ https://kinu.github. io/ServiceWorkerOfflineBasic ■ https://events.google.com/io2015/ ■ https://horo-t.github. io/tiff2bmpsw/tiff2bmpsw.html デモ的なもの
  39. 39. Push API (M42 から) ■ デモ: johnme-gcm.appspot. com/chat
  40. 40. ServiceWorker セキュリティはどうなの?
  41. 41. ServiceWorker のセキュリティ (1) ■ Secure origin のみ ■ http://example.com では動かない ■ https://example.com, http://localhost のみ ■ 同一オリジンルールに従う ■ https://example.com の ServiceWorker は https://example.com/ のみをコントロール
  42. 42. ServiceWorker のセキュリティ (2) ■ コントロールできるのはスクリプトの置か れているパス以下のみ ■ https://example.com/foo/sw.js は https://example.com/bar/ をコントロールできない ■ ただし、Service-Worker-Allowed: ヘッダ でサーバ側で変更できる (M42から) ■ Service-Worker-Allowed: ‘/allowed- path’
  43. 43. ServiceWorker のセキュリティ (3) ■ ServiceWorker スクリプトは javascript MIME type でサーブされる必要がある ■ text/plain などでサーブされてるスクリプトは ServiceWorker として登録できない ■ ServiceWorker のリクエストには Service- Worker: script ヘッダがつく ■ サイト側で簡単に disable できる ■ 最初は whitelist されたものだけ許可するのオススメ
  44. 44. ServiceWorker いつから試すべきか?
  45. 45. 新しい API だし、 いつから試すべき…? 今です
  46. 46. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … SW対応ブラウザ → UXの向上 SW非対応ブラウザ → そのまま
  47. 47. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … ネイティブ・アプリでいい? ■ いいものもある、もちろん ■ インストールするメリットがあるサイトですか? ■ 誰に、いつまで “Install App” 出し続けますか?
  48. 48. ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … むしろ ServiceWorker 化 しない理由がない!
  49. 49. ブラウザの対応状況 Chrome で今すぐ使えます! http://bit.ly/use-sw-today
  50. 50. ブラウザの対応状況 Firefox でも試せます! http://bit.ly/ff-sw-builds
  51. 51. ブラウザの対応状況 Internet Explorer にも実装してもらおう! http://bit.ly/vote-ie-sw
  52. 52. What’s coming next?
  53. 53. 今後の予定 ■ M41: (もうじき) ■ Cache API in DevTools, more methods ■ M42: (4月半ば) ■ Push API, Service-Worker-Allowed:, Fetch API in global scope ■ Firefox: 3月末に Nightly を目標
  54. 54. 参考になるページなど ■ Chrome 40 で今すぐServiceWorker を試す ■ HTML5Rocks: ServiceWorkerの紹介 ■ Google I/O 2014 - ServiceWorker でネイティ ブアプリとの差を縮めよう ■ Jake Archibald’s blog: The offline cookbook

×