Enviar búsqueda
Cargar
Service worker が拓く mobile web の新しいかたち
•
85 recomendaciones
•
20,694 vistas
K
Kinuko Yasuda
Seguir
Service worker が拓く mobile web の新しいかたち
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 54
Descargar ahora
Descargar para leer sin conexión
Recomendados
DNS移転失敗体験談
DNS移転失敗体験談
oheso tori
AWS CAF & Well-Architected Framework
AWS CAF & Well-Architected Framework
真吾 吉田
「おうちクラウド」が今熱い!
「おうちクラウド」が今熱い!
Hirotaka Sato
C# における Redis 徹底活用
C# における Redis 徹底活用
Takaaki Suzuki
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
[Gaming on AWS] AWS에서 실시간 멀티플레이 게임 구현하기 - 넥슨
[Gaming on AWS] AWS에서 실시간 멀티플레이 게임 구현하기 - 넥슨
Amazon Web Services Korea
レベルを上げて物理で殴れ、Fuzzing入門 #pyfes
レベルを上げて物理で殴れ、Fuzzing入門 #pyfes
Tokoroten Nakayama
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
Recomendados
DNS移転失敗体験談
DNS移転失敗体験談
oheso tori
AWS CAF & Well-Architected Framework
AWS CAF & Well-Architected Framework
真吾 吉田
「おうちクラウド」が今熱い!
「おうちクラウド」が今熱い!
Hirotaka Sato
C# における Redis 徹底活用
C# における Redis 徹底活用
Takaaki Suzuki
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
[Gaming on AWS] AWS에서 실시간 멀티플레이 게임 구현하기 - 넥슨
[Gaming on AWS] AWS에서 실시간 멀티플레이 게임 구현하기 - 넥슨
Amazon Web Services Korea
レベルを上げて物理で殴れ、Fuzzing入門 #pyfes
レベルを上げて物理で殴れ、Fuzzing入門 #pyfes
Tokoroten Nakayama
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
障害に備えたアーキテクチャを考える
障害に備えたアーキテクチャを考える
Yoshii Ryo
Proxy War
Proxy War
zaki4649
ストレージ層で行うランサムウェア対策_20210401
ストレージ層で行うランサムウェア対策_20210401
Kan Itani
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
dcubeio
PostgreSQL のイケてるテクニック7選
PostgreSQL のイケてるテクニック7選
Tomoya Kawanishi
nginx入門
nginx入門
Takashi Takizawa
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
yoku0825
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
Yahoo!デベロッパーネットワーク
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
DeNA
GPU仮想化最前線 - KVMGTとvirtio-gpu -
GPU仮想化最前線 - KVMGTとvirtio-gpu -
zgock
OpenSSHの認証に証明書を使う
OpenSSHの認証に証明書を使う
Hironobu Saitoh
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
AkiraMasago
現場で使えるDynamoDBと冪等デザインパターン
現場で使えるDynamoDBと冪等デザインパターン
cmaraiyusuke
Linux on Power と x86 Linux との技術的な相違点
Linux on Power と x86 Linux との技術的な相違点
Shinichiro Arai
自宅サーバラックの勧め 〜ファシリティ編〜
自宅サーバラックの勧め 〜ファシリティ編〜
h-otter
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
hideakikabuto
ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装
infinite_loop
#ljstudy KVM勉強会
#ljstudy KVM勉強会
Etsuji Nakai
クラウド時代にこそ求められるIt部門の役割
クラウド時代にこそ求められるIt部門の役割
Yusuke Oi
20080524
20080524
小野 修司
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
Más contenido relacionado
La actualidad más candente
障害に備えたアーキテクチャを考える
障害に備えたアーキテクチャを考える
Yoshii Ryo
Proxy War
Proxy War
zaki4649
ストレージ層で行うランサムウェア対策_20210401
ストレージ層で行うランサムウェア対策_20210401
Kan Itani
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
dcubeio
PostgreSQL のイケてるテクニック7選
PostgreSQL のイケてるテクニック7選
Tomoya Kawanishi
nginx入門
nginx入門
Takashi Takizawa
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
kwatch
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
yoku0825
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
Yahoo!デベロッパーネットワーク
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
DeNA
GPU仮想化最前線 - KVMGTとvirtio-gpu -
GPU仮想化最前線 - KVMGTとvirtio-gpu -
zgock
OpenSSHの認証に証明書を使う
OpenSSHの認証に証明書を使う
Hironobu Saitoh
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
AkiraMasago
現場で使えるDynamoDBと冪等デザインパターン
現場で使えるDynamoDBと冪等デザインパターン
cmaraiyusuke
Linux on Power と x86 Linux との技術的な相違点
Linux on Power と x86 Linux との技術的な相違点
Shinichiro Arai
自宅サーバラックの勧め 〜ファシリティ編〜
自宅サーバラックの勧め 〜ファシリティ編〜
h-otter
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
hideakikabuto
ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装
infinite_loop
#ljstudy KVM勉強会
#ljstudy KVM勉強会
Etsuji Nakai
クラウド時代にこそ求められるIt部門の役割
クラウド時代にこそ求められるIt部門の役割
Yusuke Oi
La actualidad más candente
(20)
障害に備えたアーキテクチャを考える
障害に備えたアーキテクチャを考える
Proxy War
Proxy War
ストレージ層で行うランサムウェア対策_20210401
ストレージ層で行うランサムウェア対策_20210401
Kinesis Firehoseを使ってみた
Kinesis Firehoseを使ってみた
PostgreSQL のイケてるテクニック7選
PostgreSQL のイケてるテクニック7選
nginx入門
nginx入門
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
【SQLインジェクション対策】徳丸先生に怒られない、動的SQLの安全な組み立て方
Where狙いのキー、order by狙いのキー
Where狙いのキー、order by狙いのキー
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
Apache Kafkaによるログ転送とパフォーマンスチューニング - Bonfire Backend #2 -
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
SHOWROOMとDeNAで取り組んだライブ配信基盤刷新・超低遅延ライブ配信の裏側【DeNA TechCon 2020 ライブ配信】
GPU仮想化最前線 - KVMGTとvirtio-gpu -
GPU仮想化最前線 - KVMGTとvirtio-gpu -
OpenSSHの認証に証明書を使う
OpenSSHの認証に証明書を使う
(本当に)一般的なご自宅向けのNutanix CE
(本当に)一般的なご自宅向けのNutanix CE
現場で使えるDynamoDBと冪等デザインパターン
現場で使えるDynamoDBと冪等デザインパターン
Linux on Power と x86 Linux との技術的な相違点
Linux on Power と x86 Linux との技術的な相違点
自宅サーバラックの勧め 〜ファシリティ編〜
自宅サーバラックの勧め 〜ファシリティ編〜
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装
#ljstudy KVM勉強会
#ljstudy KVM勉強会
クラウド時代にこそ求められるIt部門の役割
クラウド時代にこそ求められるIt部門の役割
Similar a Service worker が拓く mobile web の新しいかたち
20080524
20080524
小野 修司
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Hiromasa Oka
20090328
20090328
小野 修司
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
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
Similar a Service worker が拓く mobile web の新しいかたち
(20)
20080524
20080524
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Azure 高速サイトソリューション
Azure 高速サイトソリューション
20090328
20090328
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
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総まくり
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
Descargar ahora