ServiceWorkerが原因で最新のデプロイが反映されなかった話

こんにちは！kossyです！

さて、今回はServiceWorkerが原因で最新のデプロイがすぐに反映されなかった話をブログに残してみたいと思います。

今まで何回かキャッシュ関連のエントリを書いていました。
kossy-web-engineer.hatenablog.com

kossy-web-engineer.hatenablog.com

今回の動作環境は、APIに専念するRailsとVue.jsという技術スタックで、コンパイルしたVue.jsのコードは
GCSに置いて配信していました。

HTMLを返すRailsであれば、ResponseのHeaderを上書きするやり方は効果アリだったかもしれません。
でも今回のRailsはjsonを返すものなので、意味がなかったです、、、

GCSにコンテンツをアップロードするときにcacheの設定をするのは、正しい打ち手だと思います。

ただ、問題の元凶であるServiceWorkerがローカルのcacheを返してしまい、
デプロイ直後に最新の変更が反映されない状態となっていました、、、

ServiceWorkerはPWAにするために動作環境の中に組み込まれていたようなのですが、
今回の要件にPWAは必須ではなかったので、ServiceWorkerを仕込むコードを削除し、

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistrations().then(function (registrations) {
        for (const registration of registrations) {
          // unregister service worker
          console.log('serviceWorker unregistered');
          registration.unregister();
        }
      });
};

上記のコードをコンソールで実行するか、

chrome://serviceworker-internals/

上記のページでServiceWorkerをunregistしたところ、デプロイ直後に最新の変更が反映されるようになりました。

大変勉強になりました。