Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWAとCache API #frontkansai
Search
tiwu
November 02, 2019
Technology
5
1.7k
PWAとCache API #frontkansai
FRONTEND CONFERENCE 2019
https://2019.kfug.jp/
で登壇した資料です
tiwu
November 02, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
580
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
940
App Shortcuts
tiwu_dev
0
760
Web Vitals
tiwu_dev
0
58
Web Share API
tiwu_dev
0
950
Badge in Background
tiwu_dev
0
44
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.1k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
580
Other Decks in Technology
See All in Technology
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
MySQLのロックの種類とその競合
yoku0825
6
1.6k
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
エンジニア向け会社紹介資料
caddi_eng
14
220k
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
620
Featured
See All Featured
Building an army of robots
kneath
301
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Navigating Team Friction
lara
181
13k
Automating Front-end Workflow
addyosmani
1362
200k
Clear Off the Table
cherdarchuk
89
320k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
How STYLIGHT went responsive
nonsquared
93
5k
Building Adaptive Systems
keathley
34
2k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Transcript
PWAとCache API Wataru Taguchi
• 自己紹介 • PWA • Service Worker • Cache API
• まとめ アジェンダ
# Wataru Taguchi - GameWith Engineer - PWA, Web Components,
AMP - パフォーマンスチューニングが好き - @tiwu_official - FF14, ストファイ5, Beer, Kyoto Animation 自己紹介
None
Progressive Web App PWA
• 高速&高信頼性 • インストール可能 • モバイル&デスクトップ PWAの特徴 https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
• 高速 = インタラクティブな体験を提供するまで5秒以内 • 高速さは確実である必要がある ◦ ユーザーはインストールすることで高速な起動を期待する ◦ アプリのようにインストール後は必ず高速に起動すること
高速&高信頼性
• PWA はブラウザでも見れるが、インストールもできる • ブラウザのブックマークとは異なり、ネイティブアプリと同様にホーム画面に追加さ れる • スプラッシュスクリーン、アイコンなどでカスタマイズ可能 • アドレスバーなどのブラウザUIのない独立したアプリとして起動する
• PWA をインストールするユーザーはネットワーク接続がどのような状態でも起動す ることを期待する • DEMO https://twitter.com/i/status/1100018179479224321 インストール可能
• レスポンシブデザインによりモバイル&デスクトップで動作する • コードはプラットフォームによらずHTML、CSS、JavaScript モバイル&デスクトップ
PWAにおける速度とは
• 高速 = インタラクティブな体験を提供するまで5秒以内 • 高速さは確実である必要がある ◦ アプリのようにインストール後は必ず高速に起動すること ◦ ユーザーはインストールすることで高速な起動を期待する
高速&高信頼性
• PWA はブラウザでも見れるが、インストールもできる • ブラウザのブックマークとは異なり、ネイティブアプリと同様にホーム画面に追加さ れる • スプラッシュスクリーン、アイコンなどでカスタマイズ可能 • アドレスバーなどのブラウザUIのない独立したアプリとして起動する
• PWA をインストールするユーザーはネットワーク接続がどのような状態でも起動す ることを期待する • DEMO https://twitter.com/i/status/1100018179479224321 インストール可能
どのようなネットワークの状態でも 安定して高速であること PWAにおける速度とは
• Wi-Fi • 4G,3G • 速度制限 • オフライン • etc...
ネットワークの状態
安定した速度を出すために ネットワークからリソースを取得をしない
安定した速度を出すために Service Worker を利用し キャッシュされたデータを利用する
ブラウザのバックグラウンドで実行されるスクリプト • プッシュ通知 • バックグラウンド同期 • オフライン対応 Service Worker
• Worker の1つ ◦ DOM に直接アクセスできない • プログラム可能なネットワークプロキシ • App
Cache の弱点を避けるように設計されている Service Worker
ネットワークから取得する全てをキャッシュし キャッシュがあればキャッシュから返す ※HTML, CSS, JavaScript, IMG … ※オリジン、サードパーティ含めて全て Service Worker
サンプルコード
Service Worker サンプルコード
Service Worker サンプルコード ネットワークへのリクエストにイベントを張る
Service Worker サンプルコード 引数をレスポンスとして返す
Service Worker サンプルコード キャッシュに存在するか判定
Service Worker サンプルコード あれば返す
Service Worker サンプルコード なければ fetch でネットワークから取得
Service Worker サンプルコード キャッシュに保存
Service Worker サンプルコード データを返す
キャッシュがないとき 1 2 3 4 5 6
キャッシュがあるとき 1 2 3
• fetch にイベントを貼る • caches からキャッシュを取得 or 貯める ◦ 無いときはfetch
で取得 • responeseWith でレスポンスを返す Service Worker がしていること
皆さん気づきましたか?
• fetch にイベントを貼る • caches からキャッシュを取得 or 貯める • responeseWith
でレスポンスを返す Service Worker がしていること caches? Local Storage…? Session Storage…? indexedDB…? こいつは何者だ・・・?
Service Workerはキャッシュの仕組みを 持っているわけではない Service Worker
Cache API キャッシュの仕組み
• Window やWorker で使える • Cache API 単体で使える ◦ Service
Worker と結びつけて使う必要はない • 有効期限は設定できない • Chrome 開発者ツールから中身が見れる • caches というグローバル変数が存在する Cache API
None
• CacheStorage Interface • match, has, open, delete, keys メソッドを持つ
caches グローバル変数
CacheStorage Interface • open (cacheName) ◦ cacheName ▪ String ◦
Cache オブジェクトを取得する
引数の文字列を変更することで複数持つことができる Sample
CacheStorage Interface • keys () ◦ Cache オブジェクトの cacheName を配列で取得する
さっきの例であれば、CACHE_NAME と CACHE_NAME_2 を 取得する Sample
CacheStorage Interface • has (cacheName) ◦ 引数の名前のCache オブジェクトが存在するか判定する ◦ boolean
で受け取る
Sample
CacheStorage Interface • delete (cacheName) ◦ 引数の名前のCache オブジェクトを削除する ◦ boolean
で受け取る
Sample
• Cache Interface • caches.open により取得できるオブジェクト • match, matchAll, add,
addAll, put, delte, keys メソッドを 持つ Cache Object
Cache Interface 追加系 • put (request, response) ◦ request ▪
StringでURL、Requestオブジェクト ◦ response ▪ Responseオブジェクト ◦ key / value でキャッシュに追加する
• 同じリクエストの場合は上書きする • レスポンスが200 以外でも追加ができる Put の補足
• add (request) ◦ request ▪ StringでURL、Requestオブジェクト ◦ ネットワークから取得しキャッシュに格納する ◦
fetch + put と同じ挙動 Cache Interface 追加系
• addAll (requests) ◦ requests ▪ 配列 ◦ 配列の中身をadd する
Cache Interface 追加系
• 同じリクエストの場合は上書きする • レスポンスが200 以外の場合追加ができない Add, AddAll の補足
Sample
• match (request, options) ◦ request ▪ StringでURL、Requestオブジェクト ◦ options
[optional] ◦ マッチしたResponse Object を返す ◦ マッチしないときはundefined を返す Cache Interface 取得系
• ignoreSearch : boolean ◦ クエリーを無視する(v=1) • ignoreMethod : boolean
◦ メソッドを無視する(GET, HEAD) • ignoreVary : boolean ◦ Vary header を無視する options
• matchAll (request, options) ◦ 引数はmatchと同じ ◦ Response Object の配列を返す
Cache Interface 取得系
Sample
• delete (request, options) ◦ 引数はmatchと同じ ◦ キャッシュを削除する ◦ 成功したらtrue,
失敗したらfalse を返す Cache Interface 削除系
Sample
• keys (request, options) ◦ request [option] ▪ リクエストを指定できる ◦
options [option] ▪ matchと同じ ◦ keyの配列を取得する Cache Interface その他
Sample キャッシュを全て削除する
• 一覧で詳細で必要な静的リソースを読み込む • 古いバージョンを消して新しいキャッシュを作る • 期限付きキャッシュを作る ユースケース
一覧で詳細で必要な静的リソースを読み込む
一覧で詳細で必要な静的リソースを読み込む addAll で詳細に必要なリソースを キャッシュに追加
一覧で詳細で必要な静的リソースを読み込む fetch にイベントを貼って キャッシュにあればキャッシュから返す
一覧で詳細で必要な静的リソースを読み込む キャッシュないものは通常通り ネットワークから取得する ※想定外のリソースをキャッシュさせない
古いバージョンを消して新しいキャッシュを作る
古いバージョンを消して新しいキャッシュを作る 新しいバージョンがキャッシュにあるか判定
古いバージョンを消して新しいキャッシュを作る ignoreSearch を使うことで /app.js?v=old といったバージョン違いのキャッシュを削除できる
古いバージョンを消して新しいキャッシュを作る 古いバージョンを削除後、新しいバージョンを追加
期限付きキャッシュを作る
期限付きキャッシュを作る キャッシュにあるか判定
期限付きキャッシュを作る ない場合はキャッシュに追加し LS に現在時刻をurl をキーにして追加
期限付きキャッシュを作る ある場合は、現在時刻から1日経っているか 判定
期限付きキャッシュを作る 1日過ぎている場合は、新たにキャッシュを追 加、 LS の日付を更新する
• キャッシュの上限や使用量がわかる • quota ◦ 上限 • usage ◦ 現在の使用量
※ただし取得できる値はバイトではなく概念値 StorageEstimate
Sample 現在のキャッシュの使用割合を表示する
まとめ • PWA における速度は安定して高速であること • 安定した速度はネットワークに依存をしないこと • SW ではなくCache API
によってキャッシュされる • Cache API はSW 依存ではなく独立したAPI • add, match, delete などLS などと使い方は似ている
• Cache-Control ヘッダでも似たようなことはできる • 利点はプログラミング可能なキャッシュ機能 • 例:Intersection Observer と組み合わせて画面内のリンク をキャッシュ追加,
削除 Cache API + Service Worker の利点
ご清聴ありがとうございました