moyashidaisuke's diary

フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

インストールされてしまったServiceWorkerを自動で削除する(前バージョンのブログトップページが表示されてしまう場合の対策)

概要

ブログを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)のものしか対象にならないようです。 また、ドメインで判定されているようで、はてなブログを表示している場合でも想定通りに取得されていたので、副作用は無いはずです、、、

おまけ

serviceWorkerとは

ブラウザがオフラインの時でもいい感じに動いてくれるようにしたり、裏で高速化のために動いてくれるやつです。

qiita.com

が、、、今回はオフラインの時でも表示できるための対応がずっと効いてしまっており、普通では制御できない状態でした、、、、 苦しい、、、

手動で削除する場合の対応方法

Chromeの場合

URLに「chrome://serviceworker-internals/」を入力します。

英語の画面が出てくるのですが、その中の「moyashidaisuke.com」と記載されているものを探します。

見つけたら、Unregisterボタンを押します。

f:id:moyashidaisuke:20190912013246p:plain

まとめ

自動でとはいいましたが、新しいページを参照してくれないと発火しないのが辛いです。(このページを見てくれた人は大丈夫)

serviceWorker怖い、、、

もし、旧バージョンが引き続き表示されてしまう方がいらっしゃれば教えて下さい。デバッグに伺います。(一度削除するとインストールする方法が無いから、私の環境ではもう再現できない)