9

Hugoを実行している Web サイトhttps://www.igluonline.comを実行しており、最近、Google のsw-precacheに従って Service Worker をインストールしました。

これは構成ファイルです。

module.exports = {
  staticFileGlobs: [
    'dist/css/**.css',
    'dist/**/*.html',
    'dist/images/**.*',
    'dist/js/**.js'
  ],
  skipWaiting: true,
  stripPrefix: 'dist',
  runtimeCaching: [{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]
};

考慮事項:

自動生成されたコードでエラーが発生することもありますが、Service Worker は適切に動作し、Web とモバイルの両方でオフライン エクスペリエンスを提供します。

また、新しいコードをプッシュcache-controlするmax-age=0と、更新が行われます。

問題:

を設定し、runtimeCaching handlerGooglenetworkFirstsw-toolbox API (をsw-precache使用するときに存在するruntimeCaching) に従って、できれば http 呼び出しからページを取得し、接続がない場合はキャッシュにフォールバックする必要があります。

しかし、コードを更新して新しいウィンドウを開いてテストすると (更新前に Web サイトを実行しているすべてのタブとウィンドウを閉じていることに注意してください)、キャッシュされたページが表示されます。新しい Service Worker が自然にダウンロードされ、2 回目のリロードでページが更新されますが、訪問者が新しいコンテンツを取得するたびにホームページを 2 回更新することは期待できません。

runtimeCaching少なくとも自分のホームページをネットワークから直接ロードできるようにするために、コードを次のように変更しようとしましたが、うまくいきませんでした:

runtimeCaching: [{
    urlPattern: /\//,
    handler: 'networkOnly'
  },{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]

望ましい PWA エクスペリエンスがそのようなものなのか (つまり、更新されたコードを表示するには、ユーザーが 2 回リロードするか、少なくとも 2 つのページにアクセスする必要があるのか​​)、それとも私が何か間違いを犯しているのかはわかりません。検討していただければ幸いです。

4

1 に答える 1