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.8k
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
600
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1k
App Shortcuts
tiwu_dev
0
790
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1k
Badge in Background
tiwu_dev
0
48
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.1k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
590
Other Decks in Technology
See All in Technology
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
0
1k
XPを始める新人に伝えたい近道の鍵
nakasho
1
180
CDK Pipelinesをざっくり理解する
smt7174
2
290
クロージング / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
280
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
0
170
マルチAWSアカウント間のストリーミングによるデータ同期/AWS SaaS Builders Forum 2024
visional_engineering_and_design
1
110
My Generation 年配者がこの先生きのこるには/My Generation How elder engineers can survive
kwappa
3
4.8k
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
290
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
230
All your memory are belong to… whom?
ennael
PRO
0
360
What is Nostr?
kojira
0
110
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.3k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Why Our Code Smells
bkeepers
PRO
334
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
550
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
503
140k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Six Lessons from altMBA
skipperchong
26
3.4k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Git: the NoSQL Database
bkeepers
PRO
425
64k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
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 の利点
ご清聴ありがとうございました