Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cache APIに触れる #pwanight

tiwu
April 17, 2019

Cache APIに触れる #pwanight

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

tiwu

April 17, 2019
Tweet

More Decks by tiwu

Other Decks in Technology

Transcript

  1. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer -

    PWA, Web Components - パフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
  2. • 段階的 • レスポンシブ • ネットワーク接続に依存しない • アプリ感覚 • 常に最新

    • 安全 • 発見しやすい • 再エンゲージメント可能 • インストール可能 • リンク可能 PWAの特徴 https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
  3. • 段階的 • レスポンシブ • ネットワーク接続に依存しない • アプリ感覚 • 常に最新

    • 安全 • 発見しやすい • 再エンゲージメント可能 • インストール可能 • リンク可能 PWAの特徴
  4. Cache API • Window,Workerスコープで利用できる ◦ LocalStorageと同じ感覚 • Service Workerに結びつけて使う必要はない •

    有効期限などは持てない • StorageEstimate APIでキャッシュ使用状況がわかる • グローバルにcachesという変数がある
  5. メソッド(追加系) • put (request, response) ◦ request ▪ StringでURL、Requestオブジェクト ◦

    response ▪ Responseオブジェクト ◦ key / value でキャッシュに追加する
  6. メソッド(取得系) • match (request, options) ◦ request ▪ StringでURL、Requestオブジェクト ◦

    options [option] ▪ ignoreSearch: クエリーを無視する(value=bar) ▪ ignoreMethod: メソッドを無視する(GET, HEAD)
  7. • keys (request, options) ◦ request [option] ▪ リクエストを指定できる ◦

    options [option] ▪ matchと同じ ◦ keyの配列を取得する メソッド(その他)