ServiceWorkerのキャッシュがストレージの容量食いだった

この記事は6ヶ月間下書きのまま眠っていたものを手直しして公開したものです
あまり鮮度が高くない記事ですがご了承ください。

Cドライブの空き容量がピンチ

皆さんは、ストレージの空き容量に困っていませんか? 自分のメインPCはこんなことになっていました。今回は、この真っ赤状態の解決するために容量食いを消しまわった中で、特にChromeのServiceWorkerのキャッシュが気になったので記事にしてみました。

容量食いをDiskInfoで探してみた

こちらは DiskInfo というアプリで、サイズ占有率の高かったChromeフォルダ内を表示したものです。ServiceWorkerフォルダだけで2.23GBも消費しています! このPCを使い続けて2年間弱ほどですが、色んなサイトを渡り歩くと各地で勝手にServiceWorkerがキャッシュしてしまうのでこんなにも大きくなってしまうみたいです。そういうことなら、どのサイトも同じぐらいのサイズで細かいのが積み重なってるんだと思ってたのですが、何やらやたらに大きいサイトもあることを発見したので、上位のいくつかのサイズが大きい原因を探ってみました。

どれがどこのServiceWorkerなのかを確認するには?

Chromeの仕様等確認せずに、ファイルから推測したものですが、各アルファベットフォルダ直下に存在するindex.txtにどのドメインのServiceWorkerであるかが載っています

Qiita(キャッシュサイズ 25MB)

キャッシュをまるごと削除してもこのサイズだったのでそもそもこれぐらいのようです。
特に巨大な画像やソースはありませんでした。恐らくすごいコードが書いてあるのでしょう(?)

Slack(キャッシュサイズ400MB)

これはキャッシュフォルダに入っていた2つの英数字フォルダ内で、1番サイズが大きいファイルをそれぞれ開いたものです。内容は同じようですが上部のファイル名が違います。webpackで自動でJSファイルにリビジョンを付けて配信するという記事を参照したところ、どうやら予期せず更新前のコードがキャッシュから読み出されることを防ぐための仕様のようです。アップデートの度に新バージョンのファイルがそれまでと別でキャッシュされるため、サイズが膨れるようです。

SEVEN'SCODE(キャッシュサイズ300MB)

同様にフォルダ内で1番サイズの大きいファイルをバイナリエディタで見ると、mp4ファイルのキャッシュのようでした。

実際ChromeのDevtoolでNetworkタブを見ながらサイトを開くと、systemページにある20MBほどの動画ファイル2つ、12MBの壁紙画像、1枚1MBのジャケット画像60枚等、かなりの画像ファイルがServiceWorkerから返ってきていました。解像度を変えて、メインターゲットであろうスマホから見ると、動画の代わりにスクリーンショットが表示されるため、ストレージはあまり食わないようです。PCでのみの問題ですが、公式サイトを少しだけ見に来たという人には迷惑かもしれないですね。

思ったこと

Slackのような大手サイトでも、前バージョンのファイルが残っているということは、意図的に過去の別名ファイルを消す方法がないのかもしれない。(それか単にその処理の実装にかかる手間を省略しているのか。)古いキャッシュを残したままだと、初期バージョンからずっと使っているユーザーはどんどんファイルが溜まってストレージを食いつぶしてしまうので、ちょっと気になるところ。あと、サイトの内容にもよるでしょうが、ServiceWorkerを利用する場合動画はキャッシュの例外に指定した方がよさそう。こうやって調べる人でもないと気づかないだろうけど、気づいた人には印象が悪くなってしまうかも。

ServiceWorkerのキャッシュを消すには

だからといって、設定→一時ファイルを削除しようとしてもServiceWorkerのキャッシュは消えずに残ったり、ServiceWorker自体を手動で解除しようにも(登録されてるServiceWorkerが多く)重すぎて一覧が出せなかったりで、直接フォルダまで行って消すしかなかった。これはどうにもめんどくさいので、なんとかなってほしいところ... (PWA流行って欲しいのでこういうトラブルが多いと残念)
公開に当たり見直したところ、ServiceWorkerの一覧ページはすぐに出るようになっていたり、"サイト設定→データを削除ボタンを押せば"、ServiceWorkerのキャッシュも含めて削除する仕様になっていた。ストレージの空き容量に困っている人はServiceWorkerのキャッシュも簡単に削除できます。

参考

Service Worker
ServiceWorkerはブラウザキャッシュと違って勝手には消えません

Chromeを使うなら、必ずServiceWorkersを無効化しよう
本当にストレージに余裕がない場合は、ServiceWorkerを無効にすることもできるようです

蛇足

• HDDも搭載してるPCだし、OSだけしか入れないSSDは小さくてもいいやーと思ってケチるとこうなる可能性があります。ChromeやLINE等、デフォルトでCドライブにインストールされてしまうアプリのことをよく考えてから買いましょう。

• シンボリックリンクを別のドライブと結べば殆どの場合解決するはずですが、動かなくなるアプリがたまにあります。ChromeはSSDで動かしたいのであえてシンボリックリンクを引いていませんでした。

• PC版LINEクライアントのキャッシュは、意図的に消さない限り消えない仕様です

• ちょっと前にTwitterで、トップページでフルHDの動画が自動再生されるサイトが転送量の無駄遣いではないかと話題になっていたのでSEVEN'S CODEも燃えそうに思った

• 結局SSDをクローンして、より容量の大きなSSDと差し替えました