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
Cache APIに触れる #pwanight
Search
tiwu
April 17, 2019
Technology
1
1.6k
Cache APIに触れる #pwanight
PWA Night vol.3 ~PWAのミライや活用方法をみんなで考えよう~
で登壇した資料です
tiwu
April 17, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
670
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.3k
App Shortcuts
tiwu_dev
0
880
Web Vitals
tiwu_dev
0
71
Web Share API
tiwu_dev
0
1.3k
Badge in Background
tiwu_dev
0
68
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.4k
Other Decks in Technology
See All in Technology
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
750
Kiroから考える AIコーディングツールの潮流
s4yuba
4
670
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
350
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
12k
Lambda management with ecspresso and Terraform
ijin
2
150
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
590
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
690
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
190
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
170
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cult of Friendly URLs
andyhume
79
6.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Building Adaptive Systems
keathley
43
2.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
Cache APIに触れる Wataru Taguchi
アジェンダ • 自己紹介 • PWAとService Worker • Cache API •
まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWA, Web Components - パフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
• 段階的 • レスポンシブ • ネットワーク接続に依存しない • アプリ感覚 • 常に最新
• 安全 • 発見しやすい • 再エンゲージメント可能 • インストール可能 • リンク可能 PWAの特徴 https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
• 段階的 • レスポンシブ • ネットワーク接続に依存しない • アプリ感覚 • 常に最新
• 安全 • 発見しやすい • 再エンゲージメント可能 • インストール可能 • リンク可能 PWAの特徴
「ネットワークに依存しない」とは service workerがリクエストを傍受して キャッシュしたデータを返す
Service Worker ブラウザのバックグラウンドで実行されるスクリプト • プッシュ通知 • バックグラウンド同期 • オフライン対応
オフライン対応
Service Worker ネットワークへのリクエストにイベントを張る
Service Worker respondWith()でレスポンスを返す caches.open()でCacheオブジェクトを取得する
Service Worker cache.match()でキャッシュが存在するか判定 存在したらreturn responseでレスポンスを返す
Service Worker 存在しない場合はfetch()でネットワークから取得 cache.put()でキャッシュに保存し、返す
つまり ネットワークへのリクエストを全てキャッシュし返す ※HTML,CSS,JS,IMG... ※サードパーティのリソースも全てキャッシュ ※本番で書かないでね!
Service Worker? 皆さん気づきましたか?
Service Worker? Service Workerがキャッシュの仕組みを 持っていたりするわけではない
Service Worker? Service Workerはあくまでリクエストに イベントを張ることができるだけ
キャッシュの仕組み Cache API
Cache API • Window,Workerスコープで利用できる ◦ LocalStorageと同じ感覚 • Service Workerに結びつけて使う必要はない •
有効期限などは持てない • StorageEstimate APIでキャッシュ使用状況がわかる • グローバルにcachesという変数がある
None
Cache APIの始め方 openを使うことで複数のキャッシュを持つことができる
メソッド(追加系) • put (request, response) ◦ request ▪ StringでURL、Requestオブジェクト ◦
response ▪ Responseオブジェクト ◦ key / value でキャッシュに追加する
メソッド(追加系) • add (request) ◦ request ▪ StringでURL、Requestオブジェクト ◦ ネットワークから取得しキャッシュに格納する
◦ fetch + putと同じ挙動
メソッド(追加系) • addAll (requests) ◦ requests ▪ 配列 ◦ 配列の中身をaddする
キャッシュに追加
メソッド(取得系) • match (request, options) ◦ request ▪ StringでURL、Requestオブジェクト ◦
options [option] ▪ ignoreSearch: クエリーを無視する(value=bar) ▪ ignoreMethod: メソッドを無視する(GET, HEAD)
• matchAll (request, options) ◦ 引数はmatchと同じ ◦ matchは単数、matchAllは複数返す メソッド(取得系)
• delete (request, options) ◦ 引数はmatchと同じ ◦ キャッシュを削除する メソッド(削除系)
指定したキャッシュの削除
• keys (request, options) ◦ request [option] ▪ リクエストを指定できる ◦
options [option] ▪ matchと同じ ◦ keyの配列を取得する メソッド(その他)
キャッシュの全削除
• 一覧で詳細で必要な静的リソースを読み込む • 古いバージョンを消して新しいキャッシュを作る プロダクトでの使い方
一覧で詳細で必要な静的リソースを読み込む
古いバージョンを消して新しいキャッシュを作る
• SWではなくCache APIによってキャッシュされる • Cache APIはSW依存ではなく独立したAPI • add, match, deleteなどLSとかと使い方は似ている
• 使いこなすとかなり強力 ◦ ネットワークにアクセスしたら負け まとめ