Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ServiceWorker が拓く
Mobile Web の新しいかたち
HTML5とか勉強会 02/25/2015
Kinuko Yasuda (@kinu)
kinuko@chromium.org
HTML5とか勉強会 02/25/2015...
自己紹介:
Kinuko Yasuda
@kinu / kinuko@chromium.org
Chrome エンジニア 5年目くらい
■ ストレージ、ネットワーク、Worker系など裏方っぽい API
をよくいじっています
■ File/Bl...
今日話す内容
ServiceWorker が “拓く”
Mobile Web の “新しいかたち”
■ なぜ ServiceWorker は Exciting なの?
■ つまり ServiceWorker とは何なの?
■ どうやって使うの?...
なぜ ServiceWorker が
Exciting なのか?
Web is Awesome!!
オープン仕様
リンクによる導線
常に最新のコンテンツ
インストール不要
Mashupの容易さ
プラットフォーム中立
…ただしネットワークに接続していれば。
■ Speed - ロード時間
■ Offline - オフライン時の UX
■ Re-engagement - Push通知などのユー
ザ再訪を促す方法がない
…そしてあらゆる場所に “Install App” のポップアップ
Mobile ...
Speed - ロード時間
@igrigorik
Delay User reaction
0 - 100 ms Instant
100 - 300 ms Slight perceptible delay
300 - 1000 ms
Task f...
Offline - オフライン時のUX
■ “When connectivity is gone,
UX is gone.”
■ AppCache?
■ 宣言的な記述
■ 細かい制御不可
■ ブラウザ実装次第
■ 凝ったことをしようと
するとは...
Re-engagement - Push通知の欠如
■ ユーザが Tab を閉じたら終わり
■ 再訪を促す手段がない
■ Speed - ロード時間
■ Offline - オフライン時の UX
■ Re-engagement - Push通知などのユー
ザ再訪を促す方法がない
→ どれも Web の動作モデル
  から来るもの
Web の強み ≒ Mobil...
Webの動作モデル自体を拡張できるよう
にする?
できればブラウザの実装スピードに
とらわれない形で。
→ ServiceWorker
ServiceWorkerとは
何なのか?
ServiceWorkerとは?
“AppCacheを置き換える
新しいオフラインAPI”
“ブラウザ内で動作する
JavaScriptネットワークプロキシ”
“ネイティブ・アプリと Web の
間のギャップを埋める”
改めて、ServiceWorkerとは
■ バックグラウンドで動作するJavaScript
実行環境
■ DOMにはさわれない
■ ユーザインタラクションもできない
じゃあこのJavaScript環境で
何ができるの?
→ ブラウザが内部でやっ...
改めて、ServiceWorkerとは
■ バックグラウンドで動作するJavaScript
実行環境
■ DOMにはさわれない
■ ユーザインタラクションもできない
■ フォアグラウンドのWebページと
対になって動作
■ ページのネットワーク...
Webのイメージ, Before ServiceWorker
Cache
♪
Webのイメージ, Before ServiceWorker
Cache
“Network connectivity is a single point of failure
when it comes to user-experience o...
Webのイメージ, After ServiceWorker
Cache
Service
Worker
Webページ(のセット)に対してブラウザ内に登録・インス
トールされ、バックグラウンドで動作
● インストールされた ServiceWorke...
Webのイメージ, After ServiceWorker
Cache
Service
Worker
一度インストールされた ServiceWorker はオフラインでも動
作する
● オフライン時やネットワークが遅い・不安定な場合の挙動
をき...
Webのイメージ, After ServiceWorker
Cache
Cache
API
♪
HTTPリクエストをキー、HTTPレスポンスを値としてスト
アするオフラインストレージ
● HTTPリクエストをしゃべれる
● CORSレスポンスを...
Webのイメージ, After ServiceWorker
Cache
Fetch
API
HTTPリクエストを発行してレスポンスを “Fetch” する
● CORSモード, Cache, Credentialsなどの細かい制御が可能
● X...
Worker としての ServiceWorker
■ SharedWorker と似ている
■ 複数 Web ページに紐付けられる
■ postMessage で Web ページと通信できる
■ SharedWorker と異なる点
■ ‘r...
オフラインAPIとしての ServiceWorker
■ AppCache と違い、オフラインキャッシュに
特化されたAPIではない
■ AppCache のようなオフライン機能を
作ることもできる低レイヤAPI群
■ 便利な高レイヤ API ...
ServiceWorker を
使ってみる
ServiceWorker を登録・インストールする
function register() {
// ‘sw.js’ スクリプトを ‘hello/’ 以下の
// URL に対して動作するよう登録する
navigator.serviceWor...
ServiceWorker のライフサイクル
install
イベント
activate
イベント
fetch
イベント
ServiceWorker のイベント
■ install
■ ServiceWorker が登録されるときに呼ばれる
■ 例:キャッシュデータの初期化など
■ activate
■ 新しい ServiceWorker がページをコントロール
...
登録された ServiceWorker を確認する
chrome://serviceworker-internals
DevTools
を開く
登録を
消す
SWの
コンソールロ
グ
Fetchハンドラによるリクエスト横取り
self.onfetch = function(event) {
// a.html のデータをその場で作って返す
if (event.request.url.indexOf('a.html') != ...
Cache API を使う
Cache
// 未実装のメソッドがあるのでポリフィルが必要
// https://github.com/coonsta/cache-polyfill
importScripts(‘cache-polyfill.js...
Cache の中身を確認する (M41から)
② DevTools
を開く
① serviceworker-
internals へ
③ Resources
タブ
④ Service
Worker Cache
キャッシュはオリジン毎に
管理され...
Cache と Fetch API を組み合わせる
Cache
importScripts(‘cache-polyfill.js’);
self.oninstall = function(ev) {
ev.waitUntil(
caches.o...
Fetch と Cache の組み合わせ例
■ キャッシュの中身をまず表示して後からネット
ワークから取ってきた内容で更新
■ ストレスの少ないブラウジング
■ 普通のアプリのような挙動
■ Background Sync と組み合わせればオン...
Fetch API が返す Response
■ basic filtered
■ 同一オリジンでリダイレクトでもない
■ Set-Cookie, Set-Cookie2 だけがフィルタされる
■ cors filtered
■ リクエストが ...
ServiceWorker の更新
■ コントロールされているページをロードすると
ブラウザが自動でチェック
■ Cache-control には従うので注意 (ただし24時間以上たってい
たら必ず見に行く)
■ コントロールされてるページがあ...
ServiceWorker の更新 - はまりどころ
■ コントロールされているページをほかに開いて
ると更新されない
■ スクリプトエラーがあると更新されない
■ “Opens the DevTools window for ServiceW...
■ https://kinu.github.
io/ServiceWorkerOfflineBasic
■ https://events.google.com/io2015/
■ https://horo-t.github.
io/tiff2b...
Push API (M42 から)
■ デモ: johnme-gcm.appspot.
com/chat
ServiceWorker
セキュリティはどうなの?
ServiceWorker のセキュリティ (1)
■ Secure origin のみ
■ http://example.com では動かない
■ https://example.com, http://localhost のみ
■ 同一オリ...
ServiceWorker のセキュリティ (2)
■ コントロールできるのはスクリプトの置か
れているパス以下のみ
■ https://example.com/foo/sw.js は
https://example.com/bar/ をコント...
ServiceWorker のセキュリティ (3)
■ ServiceWorker スクリプトは javascript
MIME type でサーブされる必要がある
■ text/plain などでサーブされてるスクリプトは
ServiceWo...
ServiceWorker
いつから試すべきか?
新しい API だし、
いつから試すべき…?
今です
ServiceWorker を今すぐ試すべき理由
既存サイトに Opt-in で対応可能
■ ロード時間の短縮
■ オフラインへの対応
■ Push通知対応
■ …
SW対応ブラウザ → UXの向上
SW非対応ブラウザ → そのまま
ServiceWorker を今すぐ試すべき理由
既存サイトに Opt-in で対応可能
■ ロード時間の短縮
■ オフラインへの対応
■ Push通知対応
■ …
ネイティブ・アプリでいい?
■ いいものもある、もちろん
■ インストールする...
ServiceWorker を今すぐ試すべき理由
既存サイトに Opt-in で対応可能
■ ロード時間の短縮
■ オフラインへの対応
■ Push通知対応
■ …
むしろ ServiceWorker 化
しない理由がない!
ブラウザの対応状況
Chrome で今すぐ使えます!
http://bit.ly/use-sw-today
ブラウザの対応状況
Firefox でも試せます!
http://bit.ly/ff-sw-builds
ブラウザの対応状況
Internet Explorer にも実装してもらおう!
http://bit.ly/vote-ie-sw
What’s coming next?
今後の予定
■ M41: (もうじき)
■ Cache API in DevTools, more methods
■ M42: (4月半ば)
■ Push API, Service-Worker-Allowed:,
Fetch API in ...
参考になるページなど
■ Chrome 40 で今すぐServiceWorker を試す
■ HTML5Rocks: ServiceWorkerの紹介
■ Google I/O 2014 - ServiceWorker でネイティ
ブアプリとの...
Prochain SlideShare
Chargement dans…5
×

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

18 951 vues

Publié le

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

Publié dans : Technologie

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

×