Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2020年4月18日に更新

gatsby-plugin-offline で本番ページが更新されないとき

当サイトは静的サイトジェネレータ(SSR)の一つである Gatsby で生成しています。

gatsby のプラグインの一つであるgatsby-plugin-offiline を導入するとオフライン中にはキャッシュしたデータからページを表示できるなど、非常に便利な機能を簡単に追加することができるのですが、

ページの内容を更新したのに、ブラウザ上でページを表示しても内容が更新されなかったことがあったので、 事象と解消についてまとめておきます。

事象

Gatsby でブログを更新してアップロードしたときに、一部の端末から古い記事の内容が表示されてしまう。更新した内容が反映されていない。

下の方法で解決したので、内容を備忘に残します。誰からのお役に立てれば幸いです。

Gatsby の環境周り

  • node.js のバージョンは 12.9
  • gatsby のバージョンは 2.19.45
  • gatsby に gatsby-plugin-manifest、gatsby-plugin-offline を組込み

以下はご参考までに gatsby の設定ファイルからの抜粋です。上記の 2 つのプラグインが設定されていますね。

 
gatsby-config.js(抜粋)
{
  // PWA 対応時のテーマ、設定
  resolve: 'gatsby-plugin-manifest',  options: {
    name: config.title,
    short_name: config.shortName,
    description: config.description,
    start_url: config.pathPrefix,
    background_color: config.backgroundColor, // アプリ起動時の背景色
    theme_color: config.themeColor, // ブラウザツールバーの色
    display: 'standalone',
    icon: config.favicon
  }
},
// ServiceWorker をセット
'gatsby-plugin-offline'

まずやってみたこと

  • Gatsby でブログを更新したときに、Android スマホの Chrome から確認したときに何故か本番環境の記事が更新されない。Android スマホの Web ページを更新してもダメ。
  • 試しに PC から対象のWebページを開いて Ctrl+F5でキャッシュを使わないページ再読み込みをしたら、ちゃんとページが更新される。

原因

ページ内から参照している外部 JS を ServiceWorker である sw.js が読み取ろうとした時にエラーを起こしていたのが原因みたいでした。

具体的に、自分の場合は ReactHelmet で設定していた Google Adsense を参照する javascript がエラーでした。

このとき Service Worker のエラーはブラウザの開発者コンソールに出ていませんでした。 以下の方法でエラーを確認しました。

Service Worker のエラー

  1. Google Chrome の開発者コンソールでApplicationのタブを選択
  2. Service Workers を選択
  3. Source の「sw.js」でエラーが発生しているか。エラーがあれば(×) の右に件数あり。

解消

エラーを起こしている外部 JavaScript への参照をページ内部から外して再度アップロードしたら正常に動作しました。

Google Chrome の開発者モード上でもちゃんとエラーが解消されており、問題なく Android 端末からも最新の記事が表示されるようになります。

その他のページキャッシュ削除

これでもページが行進されない場合、ウェブページのキャッシュが読み込まれている可能性があります。

Web Storage や Cache Storage からデータを削除してから、キャッシュを使わないリロードをすることで解消します。

キャッシュ ストレージ類を削除して再表示を行う手順は以下の通りです。

  1. 開発者コンソールのApplicationのタブを選択します。
  2. Applicationカテゴリの中からClear Storageを選択します。
  3. Clear Site dataボタンを選択します。

キャッシュのStorage

  1. 対象のページに戻ったら、ブラウザから対象ページを開きCtrl+F5 でコンテンツキャッシュを使わないリロードを行う。

変更履歴

  • 2020/04/18 初版公開
  • 2020/07/17 概要追記
 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
gatsby-plugin-offline で本番ページが更新されないとき
gatsby-plugin-offline で本番ページが更新されないとき
事象
事象
Gatsby の環境周り
Gatsby の環境周り
まずやってみたこと
まずやってみたこと
原因
原因
解消
解消
その他のページキャッシュ削除
その他のページキャッシュ削除
変更履歴
変更履歴
Nodachisoft © 2020