Soumettre la recherche
Mettre en ligne
Service worker が拓く mobile web の新しいかたち
•
85 j'aime
•
20,689 vues
K
Kinuko Yasuda
Suivre
Service worker が拓く mobile web の新しいかたち
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 54
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Doxygen 사용법
Doxygen 사용법
YoungSu Son
Nginx Unitを試してみた話
Nginx Unitを試してみた話
Takehiro Torigaki
わたくし、やっぱりCDKを使いたいですわ〜CDK import編〜.pdf
わたくし、やっぱりCDKを使いたいですわ〜CDK import編〜.pdf
ssuser868e2d
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
Shuji Kikuchi
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
안정적인 서비스 운영 2014.03
안정적인 서비스 운영 2014.03
Changyol BAEK
Kubernetesのワーカーノードを自動修復するために必要だったこと
Kubernetesのワーカーノードを自動修復するために必要だったこと
h-otter
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
Masahito Zembutsu
Recommandé
Doxygen 사용법
Doxygen 사용법
YoungSu Son
Nginx Unitを試してみた話
Nginx Unitを試してみた話
Takehiro Torigaki
わたくし、やっぱりCDKを使いたいですわ〜CDK import編〜.pdf
わたくし、やっぱりCDKを使いたいですわ〜CDK import編〜.pdf
ssuser868e2d
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
Shuji Kikuchi
Github codespaces すごく良い。もうこれで 十分なんじゃという話
Github codespaces すごく良い。もうこれで 十分なんじゃという話
xiidec
안정적인 서비스 운영 2014.03
안정적인 서비스 운영 2014.03
Changyol BAEK
Kubernetesのワーカーノードを自動修復するために必要だったこと
Kubernetesのワーカーノードを自動修復するために必要だったこと
h-otter
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
Rancher/Kubernetes入門ハンズオン資料~第2回さくらとコンテナの夕べ #さくらの夕べ 番外編
Masahito Zembutsu
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
Opennaru, inc.
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
Yocto Project ハンズオン プレゼン用資料
Yocto Project ハンズオン プレゼン用資料
Nobuhiro Iwamatsu
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
hnisiji
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
Haruto Otake
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)
J-Stream Inc.
そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?
Atsushi Mitsu
Dockerのディスクについて ~ファイルシステム・マウント方法など~
Dockerのディスクについて ~ファイルシステム・マウント方法など~
HommasSlide
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
Amazon Web Services Japan
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
삵 (sarc.io)
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
KotaSato3
Amazon ElastiCacheのはじめ方
Amazon ElastiCacheのはじめ方
Amazon Web Services Japan
C API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
Y Watanabe
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
Windowsコンテナ入門
Windowsコンテナ入門
Kyohei Mizumoto
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
DevOps with Database on AWS
DevOps with Database on AWS
Amazon Web Services Japan
20080524
20080524
小野 修司
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
Contenu connexe
Tendances
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
Opennaru, inc.
Aframe詰め合わせ
Aframe詰め合わせ
Youichi Sugii
Yocto Project ハンズオン プレゼン用資料
Yocto Project ハンズオン プレゼン用資料
Nobuhiro Iwamatsu
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
hnisiji
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
Haruto Otake
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)
J-Stream Inc.
そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?
Atsushi Mitsu
Dockerのディスクについて ~ファイルシステム・マウント方法など~
Dockerのディスクについて ~ファイルシステム・マウント方法など~
HommasSlide
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
Amazon Web Services Japan
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
삵 (sarc.io)
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
KotaSato3
Amazon ElastiCacheのはじめ方
Amazon ElastiCacheのはじめ方
Amazon Web Services Japan
C API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
Y Watanabe
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
Windowsコンテナ入門
Windowsコンテナ入門
Kyohei Mizumoto
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
DevOps with Database on AWS
DevOps with Database on AWS
Amazon Web Services Japan
Tendances
(20)
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
200.마이크로서비스에 적합한 오픈소스 WAS는 무엇?
Aframe詰め合わせ
Aframe詰め合わせ
Yocto Project ハンズオン プレゼン用資料
Yocto Project ハンズオン プレゼン用資料
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
DeNAのサーバー"コード"レスアーキテクチャ
DeNAのサーバー"コード"レスアーキテクチャ
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CDNの仕組み(JANOG36)
CDNの仕組み(JANOG36)
そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?
Dockerのディスクについて ~ファイルシステム・マウント方法など~
Dockerのディスクについて ~ファイルシステム・マウント方法など~
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
Amazon Game Tech Night #20 ゲームバックエンド開発関連セッションのre:cap
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
LUA를 이용한 스마트한 웹서버 만들기 (Ray. Lee)
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
IBM Cloudのアカウント管理を学ぶ。リソースグループってなに?
Amazon ElastiCacheのはじめ方
Amazon ElastiCacheのはじめ方
C API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
Javaでやってみる The Twelve Factor App JJUG-CCC 2014 Fall 講演資料
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Windowsコンテナ入門
Windowsコンテナ入門
TLS, HTTP/2演習
TLS, HTTP/2演習
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
DevOps with Database on AWS
DevOps with Database on AWS
Similaire à 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
Similaire à 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総まくり
Dernier
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Dernier
(9)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
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
Télécharger maintenant