0

このトピックに関する過去数日間、SO の投稿と Github の問題を読んでいますが、まだ自分のセットアップに適した組み合わせが見つからないようです。誰かが私に特定の解決策を教えてくれることを願っています。これが何が起こっているかです。

で create-react-app v2 を使用していますsw-precache。ビルドは CircleCI を経由して新しいファイルを S3 にプッシュし、それが CloudFront から提供されます。ビルドの最後のステップは、以前の CloudFront ディストリビューションを無効にすることです。

私が直面している問題は、新しいビルドがデプロイされ、Service Worker が更新されたときに、Service Worker によって提供されるバンドル ファイルが存在しなくなったため、次のページの読み込みでエラーがスローされることです。繰り返しますが、サイトをロードできますがwww.example.com、新しいタブを開いてロードwww.example.com/testすると、Uncaught Syntax Error が発生します。

私のセットアップに関するいくつかのメモ。

  1. Minimum and Maximum TTLto に設定する動作を CloudFront で作成しましservice-worker.jsた0。

  2. 私sw-precache-config.jsの場合、ここに私のセットアップがあります：

module.exports = {
  staticFileGlobs: [
    'build/index.html',
    'build/static/css/**.css',
    'build/static/js/**.js'
  ],
  swFilePath: './build/service-worker.js',
  stripPrefix: 'build/',
  handleFetch: false,
  runtimeCaching: [...]
}
  1. ビルド後に最初のページを読み込むと、index.html に対して次の応答が表示されます。Status Code: 200 OK (from ServiceWorker)

私の仮定は、サービス ワーカーによって index.html ファイルがキャッシュされないようにすることです。しかし、そうすると、オフライン機能が失われませんか? index.html の runtimeCaching を設定して、networkFirstいつでも要求できるようにする必要がありますが、オフラインの場合はキャッシュにフォールバックする必要がありますか? もしそうなら、それは次のようになりますか？

runtimeCaching: [
    urlPattern: '/index.html',
    handler: 'networkFirst'
]

私が試したもののうまくいかなかったいくつかのことには、これが発生したときにユーザーにリロードするようにメッセージを表示することが含まれます (技術的には機能しますが、ユーザー エクスペリエンスは最適ではありません)。オプションも調べましたskipWaiting: falseが、新しいビルドでも同じエラーが表示され続けました。

4

1 に答える 1