0

过去几天我一直在阅读关于这个主题的 SO 帖子和 Github 问题，但我似乎仍然找不到适合我的设置的组合。希望有人可以指出我的具体解决方案。这是正在发生的事情。

我正在使用 create-react-app v2 和sw-precache. 构建通过 CircleCI 将新文件推送到 S3，而 S3 又从 CloudFront 提供服务。构建的最后一步是使之前的 CloudFront 分配无效。

我遇到的问题是，当部署新构建并更新服务工作者时，下一页加载会引发错误，因为服务工作者提供的捆绑文件不再存在。再说一遍，我可以加载站点，www.example.com但如果我打开一个新选项卡并加载，www.example.com/test我会收到未捕获的语法错误。

关于我的设置的一些注意事项。

  1. 我在 CloudFront 中创建了一个设置Minimum and Maximum TTL为service-worker.jsto的行为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)

我的假设是我希望 service worker 不缓存 index.html 文件。但如果我这样做，我会不会失去我的离线功能？我是否应该为 index.html 设置一个 runtimeCachingnetworkFirst以便我可以随时请求它但在离线时回退到缓存？如果是这样，那会是这样吗：

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

我尝试过但对我不起作用的一些事情包括在发生这种情况时向用户显示一条消息以重新加载（技术上可行，但用户体验不是最佳的）。还查看了skipWaiting: false选项，但在新版本中一直看到相同的错误。

4

1 回答 1

1

您的问题可能与在用户浏览器中缓存 service-worker.js 有关，因此当您部署新版本时，旧的 service-worker 仍会缓存在用户浏览器中。

Service Worker 文件的最小和最大 TTL 不应为 0。您应始终将其缓存在 Cloudfront 边缘，因为您可以在新部署后运行失效请求以清除 Cloudfront 边缘缓存。

该问题可能与用户浏览器中的缓存有关。将文件上传到存储桶时，您可以尝试删除 service-worker.js 文件的缓存标头。您可能希望了解 CloudFront 边缘缓存与用户浏览器缓存之间的区别。

我写了一篇文章讨论如何部署单页应用程序和解决缓存问题。请看一下：https ://lucasfsantos.com/posts/deploy-react-angular-cloudfront/

我还在文章中讨论了单页应用程序上的 sw-precaching：

Service Worker JavaScript 更新频率（每 24 小时？），https://github.com/GoogleChromeLabs/sw-precache/issues/332

于 2019-05-12T21:10:25.010 回答