Submit Search
Upload
Service worker が拓く mobile web の新しいかたち
•
85 likes
•
20,689 views
K
Kinuko Yasuda
Follow
Service worker が拓く mobile web の新しいかたち
Read less
Read more
Technology
Report
Share
Report
Share
1 of 54
Download now
Download to read offline
Recommended
あの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoR
shinnosuke kugimiya
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
CRF を使った Web 本文抽出
CRF を使った Web 本文抽出
Shuyo Nakatani
Appium 2.0 ではじめるモバイルアプリテスト
Appium 2.0 ではじめるモバイルアプリテスト
Masayuki Wakizaka
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
iOSアプリ UIテスト自動化入門
iOSアプリ UIテスト自動化入門
Shingo Tamaki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Cache-Oblivious データ構造入門 @DSIRNLP#5
Cache-Oblivious データ構造入門 @DSIRNLP#5
Takuya Akiba
Recommended
あの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoR
shinnosuke kugimiya
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
CRF を使った Web 本文抽出
CRF を使った Web 本文抽出
Shuyo Nakatani
Appium 2.0 ではじめるモバイルアプリテスト
Appium 2.0 ではじめるモバイルアプリテスト
Masayuki Wakizaka
テストコードの DRY と DAMP
テストコードの DRY と DAMP
Yusuke Kagata
iOSアプリ UIテスト自動化入門
iOSアプリ UIテスト自動化入門
Shingo Tamaki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Cache-Oblivious データ構造入門 @DSIRNLP#5
Cache-Oblivious データ構造入門 @DSIRNLP#5
Takuya Akiba
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
paiza
自動運転技術を活用した運転技能教習システムのご紹介
自動運転技術を活用した運転技能教習システムのご紹介
Tier_IV
DevOps와 자동화
DevOps와 자동화
DONGSU KIM
OSS についてあれこれ
OSS についてあれこれ
Takuto Wada
イマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターン
seiichi arai
MySQL日本語利用徹底入門
MySQL日本語利用徹底入門
Mikiya Okuno
Xcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhios
Tomohiro Kumagai
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
Yahoo!デベロッパーネットワーク
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
Amazon Web Services Japan
Spring native について
Spring native について
Takamasa Mitsuji
PythonによるOPC-UAの利用
PythonによるOPC-UAの利用
Kioto Hirahara
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Hpo를 위한 sweep 소개
Hpo를 위한 sweep 소개
kiminPark2
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
PROIDEA
トピックブランチとは
トピックブランチとは
nakajima_yuji
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
Yu Tanaka
脆弱性検査ツールってどうよ
脆弱性検査ツールってどうよ
Masakazu Ikeda
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
akio19937
20080524
20080524
小野 修司
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
More Related Content
What's hot
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
paiza
自動運転技術を活用した運転技能教習システムのご紹介
自動運転技術を活用した運転技能教習システムのご紹介
Tier_IV
DevOps와 자동화
DevOps와 자동화
DONGSU KIM
OSS についてあれこれ
OSS についてあれこれ
Takuto Wada
イマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターン
seiichi arai
MySQL日本語利用徹底入門
MySQL日本語利用徹底入門
Mikiya Okuno
Xcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhios
Tomohiro Kumagai
Vue.js で XSS
Vue.js で XSS
tobaru_yuta
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
Yahoo!デベロッパーネットワーク
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
Amazon Web Services Japan
Spring native について
Spring native について
Takamasa Mitsuji
PythonによるOPC-UAの利用
PythonによるOPC-UAの利用
Kioto Hirahara
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
Hpo를 위한 sweep 소개
Hpo를 위한 sweep 소개
kiminPark2
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
PROIDEA
トピックブランチとは
トピックブランチとは
nakajima_yuji
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
Yu Tanaka
脆弱性検査ツールってどうよ
脆弱性検査ツールってどうよ
Masakazu Ikeda
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
akio19937
What's hot
(20)
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
paizaのオンラインジャッジを支えるDockerとその周辺
paizaのオンラインジャッジを支えるDockerとその周辺
自動運転技術を活用した運転技能教習システムのご紹介
自動運転技術を活用した運転技能教習システムのご紹介
DevOps와 자동화
DevOps와 자동화
OSS についてあれこれ
OSS についてあれこれ
イマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターン
MySQL日本語利用徹底入門
MySQL日本語利用徹底入門
Xcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhios
Vue.js で XSS
Vue.js で XSS
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
ヤフーの広告レポートシステムをSpring Cloud Stream化するまで #jjug_ccc #ccc_a4
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
Spring native について
Spring native について
PythonによるOPC-UAの利用
PythonによるOPC-UAの利用
脱RESTful API設計の提案
脱RESTful API設計の提案
Hpo를 위한 sweep 소개
Hpo를 위한 sweep 소개
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
Sprytniejsze testowanie kodu java ze spock framework (zaawansowane techniki) ...
トピックブランチとは
トピックブランチとは
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
脆弱性検査ツールってどうよ
脆弱性検査ツールってどうよ
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
第1回ROS勉強会発表資料 ROS+Gazeboではじめるロボットシミュレーション
Similar to Service worker が拓く mobile web の新しいかたち
20080524
20080524
小野 修司
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Hiromasa Oka
20090328
20090328
小野 修司
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
Clrh 20121215
Clrh 20121215
Tomoyuki Obi
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
Amazon Web Services Japan
20120609
20120609
小野 修司
vSphere 7 へのアップグレードについて
vSphere 7 へのアップグレードについて
富士通クラウドテクノロジーズ株式会社
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
miso- soup3
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
takezoe
Eight meets AWS
Eight meets AWS
Tetsuya Mase
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
Shingo Fukuyama
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
Webサーバの基礎知識【編集済み】
Webサーバの基礎知識【編集済み】
Kikunaga Taishi
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
Aws glacier
Aws glacier
Yukihiko SAWANOBORI
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
Similar to Service worker が拓く mobile web の新しいかたち
(20)
20080524
20080524
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Azure 高速サイトソリューション
Azure 高速サイトソリューション
20090328
20090328
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
Clrh 20121215
Clrh 20121215
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
AWS Black Belt Tech シリーズ 2015 - AWS OpsWorks
20120609
20120609
vSphere 7 へのアップグレードについて
vSphere 7 へのアップグレードについて
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
ビズリーチの新サービスをScalaで作ってみた 〜マイクロサービスの裏側 #jissenscala
Eight meets AWS
Eight meets AWS
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Webサーバの基礎知識【編集済み】
Webサーバの基礎知識【編集済み】
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Aws glacier
Aws glacier
HTML5&API総まくり
HTML5&API総まくり
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
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
なのか?
5.
Web is Awesome!! オープン仕様 リンクによる導線 常に最新のコンテンツ インストール不要 Mashupの容易さ プラットフォーム中立
6.
…ただしネットワークに接続していれば。
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 の ”弱み”
12.
Webの動作モデル自体を拡張できるよう にする? できればブラウザの実装スピードに とらわれない形で。 → ServiceWorker
13.
ServiceWorkerとは 何なのか?
14.
ServiceWorkerとは? “AppCacheを置き換える 新しいオフラインAPI” “ブラウザ内で動作する JavaScriptネットワークプロキシ” “ネイティブ・アプリと Web の 間のギャップを埋める”
15.
改めて、ServiceWorkerとは ■ バックグラウンドで動作するJavaScript 実行環境 ■ DOMにはさわれない ■
ユーザインタラクションもできない じゃあこのJavaScript環境で 何ができるの? → ブラウザが内部でやっていたような ことを JS でいじれるようになる
16.
改めて、ServiceWorkerとは ■ バックグラウンドで動作するJavaScript 実行環境 ■ DOMにはさわれない ■
ユーザインタラクションもできない ■ フォアグラウンドのWebページと 対になって動作 ■ ページのネットワークリクエストを横取りできる ■ ページを開いたりメッセージ通信したりできる ■ Push通知を受け取れる ■ Fetch, Cache などの低レイヤAPIが使える (*) (*) Fetch, Cache は普通のページからも使えるようになることが予定されています
17.
Webのイメージ, Before ServiceWorker 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
25.
ServiceWorker を 使ってみる
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.
ServiceWorker のライフサイクル install イベント activate イベント fetch イベント
28.
ServiceWorker のイベント ■ install ■
ServiceWorker が登録されるときに呼ばれる ■ 例:キャッシュデータの初期化など ■ activate ■ 新しい ServiceWorker がページをコントロール しはじめるときに呼ばれる ■ 例:古いキャッシュデータを消すなど ■ fetch ■ ページがHTTPリクエストを発行したときに 呼ばれる (ページ遷移もしくはロード) ■ 例:キャッシュデータを代わりに返すなど
29.
登録された ServiceWorker を確認する chrome://serviceworker-internals DevTools を開く 登録を 消す SWの コンソールロ グ
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
40.
ServiceWorker セキュリティはどうなの?
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 されたものだけ許可するのオススメ
44.
ServiceWorker いつから試すべきか?
45.
新しい API だし、 いつから試すべき…? 今です
46.
ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in
で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … SW対応ブラウザ → UXの向上 SW非対応ブラウザ → そのまま
47.
ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in
で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … ネイティブ・アプリでいい? ■ いいものもある、もちろん ■ インストールするメリットがあるサイトですか? ■ 誰に、いつまで “Install App” 出し続けますか?
48.
ServiceWorker を今すぐ試すべき理由 既存サイトに Opt-in
で対応可能 ■ ロード時間の短縮 ■ オフラインへの対応 ■ Push通知対応 ■ … むしろ ServiceWorker 化 しない理由がない!
49.
ブラウザの対応状況 Chrome で今すぐ使えます! http://bit.ly/use-sw-today
50.
ブラウザの対応状況 Firefox でも試せます! http://bit.ly/ff-sw-builds
51.
ブラウザの対応状況 Internet Explorer にも実装してもらおう! http://bit.ly/vote-ie-sw
52.
What’s coming next?
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
Download now