PWAのキャッシュを削除する方法

PWAには強力なキャッシュ機能があり、この機能が高速表示を可能にしています。

しかし、PWAの特徴をご存じない方が「強力なキャッシュによる実際のサイト表示と違う表示」を見てしまうと、不具合ではないかと思ってしまう人も多いと思います。

今回の記事では、PWAのキャッシュが原因で「カスタマイズしたにも関わらずサイト上に表示が反映しない」というご質問が多いため、PWAのキャッシュを削除する方法を解説いたします。

（今回の記事ではChrome使用時の事例で解説しています）

PWAのキャッシュを削除する方法

一度PWAを有効にしていまうとPWAをOFFにしてもキャッシュは残ってしまいます。通常のキャッシュ削除方法では削除できません。手動でキャッシュをクリアする必要があります。手順は以下のようになります。

デベロッパーツールを開く。

Windowsの場合、Chromeで自分のサイトの任意のページを表示した状態でF12キーを押すと、デベロッパーツールが表示されます。（Macの場合は「Command＋Option＋I」キーを押してください。）

application→clearstrageの順に進む。

application→clearstrageの順に進みます。選択項目にすべてチェックがついているか確認し、ついていなかったらチェックをつけます。最後に「clear site deta」を押してください。