みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

Service Worker のキャッシュに悩まされた

Service Worker を有効にした状態でウェブサイトを開発していたところ,以下のエラーが発生して,CSS が読み込まれない現象に遭遇しました.

Refused to apply style from "..../xx.css" because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

エラーメッセージを見ると content type が text/css でなければならないのに,text/html になっているから読み込めないよと言っているので,この CSS ファイルのレスポンスヘッダを確認したところ, text/css になっていました.

動作を確認すると,初回の読み込み時は問題ないのですが,2回目以降の読み込みで上記の問題が発生することが分かりました.したがって,サーバーの配信は正常で,ブラウザーのキャッシュに問題があると考えられました.そこでブラウザーのキャッシュを削除しましたが効果なく,Service Worker を unregister してから再読み込みをしても効果がありませんでした.

調べたところ,Service Worker 関連のキャッシュを含めて全てを削除するボタンが別に存在することが分かりました*1

"Clear site data" ボタンをクリックしたところ,問題は解決しました.