やっと忙しさから解放されて、こちらにも戻ってこれました。
このところ、ずっと困っていることがあったのですが、やっと解決できたので、早速その件を記事にしてみようと思います。
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 を実装しようとして途中で止めたのが敗因だった模様。ただ、実際に実装した場合はどうなるんだろう??自分にはよく分かりません…!