Slide 1
Slide 1 text
Cache APIに触れる
Wataru Taguchi
Slide 2
Slide 2 text
アジェンダ
● 自己紹介
● PWAとService Worker
● Cache API
● まとめ
Slide 3
Slide 3 text
自己紹介
# Wataru Taguchi
- GameWith Front End Engineer
- PWA, Web Components
- パフォーマンスチューニングが好き
- @tiwu_official
- FF14, Beer, Kyoto Animation
Slide 4
Slide 4 text
● 段階的
● レスポンシブ
● ネットワーク接続に依存しない
● アプリ感覚
● 常に最新
● 安全
● 発見しやすい
● 再エンゲージメント可能
● インストール可能
● リンク可能
PWAの特徴
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
Slide 5
Slide 5 text
● 段階的
● レスポンシブ
● ネットワーク接続に依存しない
● アプリ感覚
● 常に最新
● 安全
● 発見しやすい
● 再エンゲージメント可能
● インストール可能
● リンク可能
PWAの特徴
Slide 6
Slide 6 text
「ネットワークに依存しない」とは
service workerがリクエストを傍受して
キャッシュしたデータを返す
Slide 7
Slide 7 text
Service Worker
ブラウザのバックグラウンドで実行されるスクリプト
● プッシュ通知
● バックグラウンド同期
● オフライン対応
Slide 8
Slide 8 text
オフライン対応
Slide 9
Slide 9 text
Service Worker
ネットワークへのリクエストにイベントを張る
Slide 10
Slide 10 text
Service Worker
respondWith()でレスポンスを返す
caches.open()でCacheオブジェクトを取得する
Slide 11
Slide 11 text
Service Worker
cache.match()でキャッシュが存在するか判定
存在したらreturn responseでレスポンスを返す
Slide 12
Slide 12 text
Service Worker
存在しない場合はfetch()でネットワークから取得
cache.put()でキャッシュに保存し、返す
Slide 13
Slide 13 text
つまり
ネットワークへのリクエストを全てキャッシュし返す
※HTML,CSS,JS,IMG...
※サードパーティのリソースも全てキャッシュ
※本番で書かないでね！
Slide 14
Slide 14 text
Service Worker?
皆さん気づきましたか？
Slide 15
Slide 15 text
Service Worker?
Service Workerがキャッシュの仕組みを
持っていたりするわけではない
Slide 16
Slide 16 text
Service Worker?
Service Workerはあくまでリクエストに
イベントを張ることができるだけ
Slide 17
Slide 17 text
キャッシュの仕組み
Cache API
Slide 18
Slide 18 text
Cache API
● Window,Workerスコープで利用できる
○ LocalStorageと同じ感覚
● Service Workerに結びつけて使う必要はない
● 有効期限などは持てない
● StorageEstimate APIでキャッシュ使用状況がわかる
● グローバルにcachesという変数がある
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Cache APIの始め方
openを使うことで複数のキャッシュを持つことができる
Slide 21
Slide 21 text
メソッド（追加系）
● put (request, response)
○ request
■ StringでURL、Requestオブジェクト
○ response
■ Responseオブジェクト
○ key / value でキャッシュに追加する
Slide 22
Slide 22 text
メソッド（追加系）
● add (request)
○ request
■ StringでURL、Requestオブジェクト
○ ネットワークから取得しキャッシュに格納する
○ fetch + putと同じ挙動
Slide 23
Slide 23 text
メソッド（追加系）
● addAll (requests)
○ requests
■ 配列
○ 配列の中身をaddする
Slide 24
Slide 24 text
キャッシュに追加
Slide 25
Slide 25 text
メソッド（取得系）
● match (request, options)
○ request
■ StringでURL、Requestオブジェクト
○ options [option]
■ ignoreSearch: クエリーを無視する(value=bar)
■ ignoreMethod: メソッドを無視する(GET, HEAD)
Slide 26
Slide 26 text
● matchAll (request, options)
○ 引数はmatchと同じ
○ matchは単数、matchAllは複数返す
メソッド（取得系）
Slide 27
Slide 27 text
● delete (request, options)
○ 引数はmatchと同じ
○ キャッシュを削除する
メソッド（削除系）
Slide 28
Slide 28 text
指定したキャッシュの削除
Slide 29
Slide 29 text
● keys (request, options)
○ request [option]
■ リクエストを指定できる
○ options [option]
■ matchと同じ
○ keyの配列を取得する
メソッド（その他）
Slide 30
Slide 30 text
キャッシュの全削除
Slide 31
Slide 31 text
● 一覧で詳細で必要な静的リソースを読み込む
● 古いバージョンを消して新しいキャッシュを作る
プロダクトでの使い方
Slide 32
Slide 32 text
一覧で詳細で必要な静的リソースを読み込む
Slide 33
Slide 33 text
古いバージョンを消して新しいキャッシュを作る
Slide 34
Slide 34 text
● SWではなくCache APIによってキャッシュされる
● Cache APIはSW依存ではなく独立したAPI
● add, match, deleteなどLSとかと使い方は似ている
● 使いこなすとかなり強力
○ ネットワークにアクセスしたら負け
まとめ