概要
serviceWorkerが効いてる時の挙動
やったこと
おまけ
- serviceWorkerとは
- 手動で削除する場合の対応方法
  - Chromeの場合
まとめ

概要

ブログをgatsby.jsからはてなブログに戻しましたが、一度Gatsby.jsバージョンを開いていると、キャッシュが残ってしまい、新しいバージョンの表示にならない事に気が付きました。（私のサブPCも思いっきり引っかかっていました、、、

www.moyashidaisuke.com

技術的には、gatsby.jsではserviceWorkerがインストールされるようになっており、インストールされているものなのでサーバ側が変更されても以前のキャッシュされたデータを表示してしまいます。

手動で削除もできるのですが、なかなか敷居が高い方法しかなかったので、頑張って自動で削除するようにしました。

serviceWorkerが効いてる時の挙動

トップページ -> gatsby.jsバージョン
古い記事（gatsby.jsの時から存在してた）->gatsby.jsバージョン
新しい記事 -> はてなブログ

が表示されます。

やったこと

はてなブログのfooterに、以下のscriptを仕込みました。

<script type="text/javascript">
$(function(){
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
        // 登録されているworkerを全て削除する
        for(let registration of registrations) {
            registration.unregister();
        }
    });
});
</script>

こちらを参考にさせていただきました。

qiita.com

念の為、本当に削除する前にconsole.logを仕込んでデバッグしましたが、閲覧しているサイト（www.moyashidaisuke.com）のものしか対象にならないようです。また、ドメインで判定されているようで、はてなブログを表示している場合でも想定通りに取得されていたので、副作用は無いはずです、、、