gatsby-plugin-offlineのService Workerを削除する

2024.03.16

このブログはGatsbyで作ってGatsby Cloudにデプロイしていたが、Gatsby Cloudが停止してしまったため、以前から試してみたかったAstroで作り直した。

Netlifyにデプロイしてリリース、DNSをGatsby CloudからNetlifyに向けるが、一部のページだけ古いソースを読み込んでいる。スーパーリロードで新しいコンテンツに切り替わっても、リンクを踏むともとにもどってしまう。

当初はGatsby Cloudのキャッシュかと思ったが、検索で見つけたNetlifyのサポートフォーラムでgatsby-plugin-offlineのキャッシュへの言及があったので、試しに普段使っていないブラウザの開発ツールでsw.jsの登録を解除すると新しいコンテンツだけが表示されるようになった。

• https://answers.netlify.com/t/webhook-is-not-clearing-cache/99380/2

(サポートの内容は別件であまり関係ない)

一般ユーザー向けにsw.jsを無効化する方法を探したところ、以下のリポジトリを見つけた。

• https://github.com/NekR/self-destroying-sw

self.addEventListener("install", function (e) {
  self.skipWaiting();
});

self.addEventListener("activate", function (e) {
  self.registration
    .unregister()
    .then(function () {
      return self.clients.matchAll();
    })
    .then(function (clients) {
      clients.forEach((client) => client.navigate(client.url));
    });
});

単にsw.jsのコードを置き換えるだけでいいとある。

Create a file with the same name as your previous ServiceWorker and put it in the same place where your previous ServiceWorker was

Gatsbyの開発環境があれば、gatsby-plugin-remove-serviceworkerプラグインを使えばいいと思われるが、1年半ほどメンテナンスを怠っていてビルドもできない状態で、Astro環境でなんとかするしかなかった。

上記の内容を記述したsw.jsをpublicフォルダに置いてデプロイすると、期待通りgatsby-plugin-offlineが提供していたsw.jsのサービスワーカーは削除された。

gatsby-plugin-offlineのようなサービスワーカーを利用した機能を使うときは、あとのことも考えておくほうがよさそうだ。