PWA（Progressive Web Apps）の中で最もつまずきやすいポイントが、キャッシュ戦略です。 Service Worker を導入すると、ページの表示は速くなりますが、同時に「更新されない問題」や「古いデータが残る問題」も発生します。
この記事では、PWAで使われる代表的な 3つのキャッシュ戦略 ・Cache First ・Network First ・Stale-While-Revalidate を初心者でも理解できるように丁寧に解説します。
キャッシュ戦略とは何か？
キャッシュ戦略とは、 「ユーザーがページを開いたとき、どの順番でデータを取りにいくか？」 を決めるルールのことです。
Webは基本的にネット経由でデータを取りますが、PWAではローカルのキャッシュを利用できます。 このキャッシュが強力なため、表示が速くなる反面、更新が届きにくくなるという弱点もあります。
① Cache First（キャッシュ優先）
最速の表示を実現する代わりに、更新されにくい。
仕組み
- まずキャッシュを確認する
- あればそれを表示（超高速）
- なければネットから取得してキャッシュに保存
メリット
- 2回目以降の表示が爆速
- オフライン対応がしやすい
デメリット
- 更新しても古いデータが残りやすい
- 開発者がキャッシュクリアを制御しないとトラブルの原因になる
ブログや頻繁に更新するサービスには向いていない戦略です。
② Network First（ネット優先）
最新データがほしいサイトに最適。
仕組み
- まずネットから最新データを取りにいく
- ネットが遅い or オフラインならキャッシュのデータを使う
メリット
- 常に新しい内容が表示される
- ニュース・ブログ・SNS向け
デメリット
- 初回表示がやや遅いことがある
- オフライン時はキャッシュ頼み
更新頻度の高いサイトやSEO重視のサイトは、基本的にこの戦略が安全です。
③ Stale-While-Revalidate（古いものを即表示し、裏で更新）
表示の速さと更新の両立を目指した最もバランスの良い戦略。
仕組み
- キャッシュがあれば即表示（高速）
- 裏でネットから最新データを取得
- キャッシュを更新して次回から新しい内容が見える
メリット
- 高速表示＋裏で更新のハイブリッド
- アプリ体験に近いUXが作れる
デメリット
- 更新が“次回アクセス時”になる
- 仕組みがやや複雑で理解しづらい
Twitter など多くのWebサービスが採用してきた戦略です。
それぞれの戦略はどう使い分ける？
| 戦略 | 向いているサイト |
|---|---|
| Cache First | 画像ギャラリー・ツール系・オフライン前提 |
| Network First | ブログ・ニュース・更新頻度が高いページ |
| Stale-While-Revalidate | 表示速度も更新も重視したいサービス全般 |
よくある失敗：「Cache Firstにしたら更新されない！」
初心者がもっともハマるのはこれです👇
Cache First は“更新されない”のが正常挙動である。
キャッシュを優先する以上、 古いファイルが残るのは当たり前。 PWAが「壊れた」のではなく、「そういう戦略」なのです。
実は PWA の“更新されない問題”の多くは戦略ミス
例えばこんなケースが起きがちです：
- ブログなのに Cache First を使っている
- ツールなのに Network First を使って遅い
- 更新タイミングを確保していない
- skipWaiting を誤用している
つまり、PWAは戦略を間違えると致命的なUXの低下につながります。
まとめ：キャッシュ戦略を理解すればPWAは怖くない
- Cache First → 超高速だが更新されにくい
- Network First → 最新表示が必要なサイト向け
- Stale-While-Revalidate → 高速＋更新のバランス型
PWAの強みは、このキャッシュ戦略を自由に選べる点です。 正しい戦略を選べば、アプリと同じレベルの快適さを実現できます。
今後は OJapp Tips でも、より実践的なキャッシュコード例や SW の書き方も解説していきます！
