WordPress

Chrome でキャッシュが超強力に残る時は PWA の設定が残っているせいかもしれない!

やっと忙しさから解放されて、こちらにも戻ってこれました。

クマ
また、ちょこちょこアップしていきます!

このところ、ずっと困っていることがあったのですが、やっと解決できたので、早速その件を記事にしてみようと思います。

Chrome でキャッシュが超強力に残ってしまう…!

ぽん
どうしてもサイトのキャッシュが消えないんだよ…!

もの凄く不可解な状況でした。

現象は、WordPressのWEBサイトで起こりました。利用しているテーマは「 THE・THOR(ザ・トール) 」。使っているブラウザは Chrome。

記事をアップすると、トップページに最新の投稿が表示されるはずなのですが、されない。

ここまではよくある話で、ブラウザをリロードすれば最新の投稿が普通に表示されます。

Chromeのリロード手順

Chromeの画面上で右クリック > 検証 > 「DevTools」が開く > 「DevTools」が開いた状態で、左上の更新ボタンを右クリック > 「キャッシュの消去とハード再読み込み」を選択

詳しくは下のサイトさんで確認してみて!

Chromeには3種類のリロードがあって、上で紹介した方法は一番強いヤツである。これで再読み込みできなかったことはない!もちろん、今回の件も上のリロード方法を行うことで、最新の投稿が表示されました。

クマ
が、しかし!!

最新の投稿が表示された状態で、普通のリロード(「F5」を押すなど)をしたとする。すると、なぜか、再び最新の投稿が消えて以前の状態に戻ってしまうのだ。

そこで再び、超強力なリロードをすると、やっぱり最新の投稿は表示されます。でも普通のリロードをした時点で、以前の状態に戻ってしまう。その繰り返し。

ぽん
何なのコレ。意味わかんないよ。超強力なリロードをした時のキャッシュは何故残ってくれないの??

ネットで調べてみると、「エックスサーバーのキャッシュ機能(Xアクセラレータ等)を使っていると、キャッシュがしつこい」など書かれているので、サーバーのキャッシュ機能はすべてオフに。もちろん、.htaccess の内容を見直し、WordPressテーマのキャッシュ機能もオフにした。キャッシュ系のプラグインも入れていない。

Chrome のキャッシュ削除機能(キャッシュされた画像とファイル)も何度も試した。

なのに、ちっとも超強力キャッシュは解除できないのである。

スポンサードリンク

中途半端に実装しようとした PWA の設定の残骸が原因

この可笑しなキャッシュは、なぜか自分の使っている chromeだけに残っているようでした。他の人に影響ないなら、まあいいや。そのうち直るっしょ。と半ば投げ出して3週間。ふと、天の声が聞こえた…!

神「もしかして、PWA じゃないかの?」

PWAを実装すると、サイトの読み込み速度がアップし、オフラインでも閲覧可能となります。つまり、キャッシュをバリバリ使った機能。

利用しているテーマ「The Thor(ザ・トール)」には、PWA を簡単に実装できる機能が付いています。一度はオンにしましたが、結局うまくいかなくて現在はオフに。そういえば、Chromeで実装状況を確認したんだった。

今はオフにしていても、PWAの設定が Chromeに残ったままだったりして…?

クマ
調べてみたらビンゴ!

Chromeのデベロッパーツールで「Application」を調べてみたところ、PWAはオフにも関わらず、Manifest や Service Workers の設定はそのまま残っていました。

PWA の設定を Chromeから削除

PWAのこと、実はあまりしっかり理解できていないので「設定を削除」という言葉が適当か分かりませんが、下の手順で解決することができました。

削除手順

Chromeの画面上で右クリック > 検証をクリック > 「DevTools」が開く > 「DevTools」の「Application」をクリック > 「Service Workers」をクリック > 「Unregister」をクリック

PWA 登録解除
ぽん
はぁ~、スッキリした!!

中途半端に PWA を実装しようとして途中で止めたのが敗因だった模様。ただ、実際に実装した場合はどうなるんだろう??自分にはよく分かりません…!

-WordPress
-

© 2024 ラボだもんで