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.9k
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
620
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.1k
App Shortcuts
tiwu_dev
0
810
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1.1k
Badge in Background
tiwu_dev
0
51
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.2k
Service Worker Life Cycle “Install” #pwanight
tiwu_dev
0
600
Other Decks in Technology
See All in Technology
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
320
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
110
12 Days of OpenAIから読み解く、生成AI 2025年のトレンド
shunsukeono_am
0
150
Server-Side Engineer of LINE Sukimani
lycorp_recruit_jp
0
360
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
27
23k
OCI技術資料 : ファイル・ストレージ 概要
ocise
3
11k
pg_bigmをRustで実装する(第50回PostgreSQLアンカンファレンス@オンライン 発表資料)
shinyakato_
0
110
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
320
怖くない!ゼロから始めるPHPソースコードコンパイル入門
colopl
0
160
3年でバックエンドエンジニアが5倍に増えても破綻しなかったアーキテクチャ そして、これから / Software architecture that scales even with a 5x increase in backend engineers in 3 years
euglena1215
9
3.6k
[Oracle TechNight#85] Oracle Autonomous Databaseを使ったAI活用入門
oracle4engineer
PRO
1
120
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
280
Featured
See All Featured
Building Applications with DynamoDB
mza
91
6.1k
A better future with KSS
kneath
238
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
182
16k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Site-Speed That Sticks
csswizardry
2
190
The Cult of Friendly URLs
andyhume
78
6.1k
YesSQL, Process and Tooling at Scale
rocio
170
14k
4 Signs Your Business is Dying
shpigford
182
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
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 の利点
ご清聴ありがとうございました