GatsbyのServiceWorkerを削除する

このサイトはReactとGatsbyを使って作成しています。 GatsbyStarterでよさそうなものを選んで初めたのですが、サイトの更新がすぐに反映されないことに困っていました。

ズバリ、ServiceWorkerが動いているため、ブラウザのキャッシュを使ってサイトを表示していることが原因でした。ServiceWorkerがあれば、オフラインでもサイトを閲覧できるという良い点もあるのですが、サイトのトップが更新されず、新着の記事が表示されていません。

F5などで更新すれば表示されるのですが、ブログとして望ましい形ではないので修正しました。

ServiceWorkerを削除して見たので、その時の手順をメモしています。以降はサイトの更新がすぐに反映されると思います。

概要

• 手順
• 消えたことを確認

手順

ざっくりとは以下の手順になります。

1. 「gatsby-plugin-offline」を取り除く。
2. 「gatsby-plugin-remove-serviceworker 」を追加する。

gatsby-plugin-offline

こちらのプラグインがあるため、ServiceWorkerがブラウザで有効になっています。 ですのでこれを取り除きます。

ただしこれを取り除いただけでは、すでにブラウザにキャッシュされているServiceWorkerが無効になりません。以下のプラグインを同時に取り入れます。

gatsby-plugin-remove-serviceworker

gatsby-plugin-remove-serviceworker

こちらのプラグインはすでに動作しているServiceWorkerを削除するものです。npmでインストールしたあとにgatsby-config.jsに追加します。

gatsby-config.jsのgatsby-plugin-offlineを削除してgatsby-plugin-remove-serviceworkerを追加します。記載する順序によって旨く動作しない場合があるという情報がありましたが、削除して追加するという方法は意図通りになりました。

消えたことを確認

GoogleChromeの検証から、Applicationのタブを開きます。そこに「ServiceWorker」の項目があります。ここでブログドメインのものが「deleted」になっていれば、削除完了です。

おわりに

どうでしょうか、新しい記事の更新がちゃんと反映されていないでしょうか。ServiceWorkerという仕組みは便利ですが、普通のブログとかであればそれほど必要ではないように思います。

Googleの評価等にも影響ありそうですが、Gatsbyはもともと静的なHTMLを作成して配信していますので十分早いです。 これからも他にできることがあればいろいろと直していこうと思います。