Cache APIに触れる #pwanight

PWA Night vol.3 ～PWAのミライや活用方法をみんなで考えよう～
で登壇した資料です

Transcript

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