先日意気揚々と導入したService Workerですが、設定を盛大に間違っていました。

前の記事で書いた通り、背景画像・アバター画像・ファビコンのみをキャッシュの対象にしました。…したはずでした…。

私は記事を公開後に修正することが多々あるのですが[1]、今回も例のごとく後日修正を行いました。修正してサーバにpushしても、更新されてないんですね。調べるまでもなくService Workerが原因なのはわかったのですが、背景画像・アバター画像・ファビコンのみをキャッシュの対象にしたのに…なんで??

Chromeのディベロッパーツールで確認すると、指定していないリソースがService Workerで取得されてるんですよ。…なんで??

PreCacheとRuntimeCache


Service WorkerにはPreCacheとRuntimeCacheというものがあります。PreCacheはService Workerインストール時に行われるキャッシュでRuntimeCacheはネットワークリクエストが発生したときに作成されるキャッシュです。たぶん。

以前の記事には設定を記述しているのですが、背景画像・アバター画像・ファビコンはPreCacheで指定しており、それ以外の外部のリクエスト(AdSenseやCDNやWebフォント)の一部をRuntimeCacheで指定していました。

実際にこのサイトをChromeのディベロッパーツールで確認して頂くとわかります。「Application」のCache Storageのsw-precache-v3...というのがPreCacheです。これは何回も書いている通り、背景画像・アバター画像・ファビコンのみです。

問題だったのはRuntimeCacheです。RuntimeCacheはネットワーク優先で見に行くか、キャッシュ優先で見に行くかなどの選択ができます。私はここに外部のCDN等のみ設定していたつもりだったのですが、誤ってこのサイトの全コンテンツをキャッシュ優先で見に行くようになってました[2]。ほんますみません…。

※下記の画像は設定ミスしてた時にキャッシュされててたもので、既になおってます。このサイトを今現在はディベロッパーツールで確認するとCDNやWebフォントだけRuntimeCacheされているのが解ると思います。

↑ 私のサイトでは「Application」のCache Storageのtoolbox-cache...というのがRuntimeCacheに該当します

なんでこうなったのか


Service Worker投入前に予定していなかったキャッシュ設定が入っていたのは認識しており、その設定は消したつもりだったのですが消えてませんでした。確認ミスというか確認ミスというか確認ミスです。こういうの泥酔しながらやったらダメですね…

問題点


このRuntimeCacheの方ですが、ユーザが再度Service Workerを踏むまでは更新されないようになっていた[3]ので設定がミスってた期間に訪問してくださった方には再訪問して頂かない限りMaxで5MB[2:1]がキャッシュされたままになってしまいました。非常に申し訳ないのですが、手が打ちようがないというか…

こういうのは安易にやるべきじゃないなぁという教訓になりました。


  1. なので公開数日以内くらいは結構変な文が残ってたりします ↩︎

  2. 全コンテンツキャッシュといってもMax5MBの設定だったのでそれ以上はキャッシュされていませんでしたが… ↩︎ ↩︎

  3. 期限設定できるのですが、無期限で設定してました ↩︎