服务工作者在反应中缓存的路由

Question

我们正在为我工作的公司建立一个新网站，该网站是使用 CRA 用 React 编写的。 浏览器推送通知和 PWA 都是必需的，因此 service worker 是必不可少的，但是我相信 service worker 负责一些相当重要的缓存问题。

该网站尚未投入生产，但是我昨天添加了一个新页面（之前已经发生过几次），并且一旦部署到我们的开发环境中，办公室中的任何人都无法访问它 - 他们只是被重定向到主页（如如果路由不存在），直到他们清除缓存，然后路由加载没有问题。

我已经阅读了一些关于语义版本控制的文章，但是这些文章似乎都使用 NPM 而不是纱线，并且使用 npm 版本补丁等在本地进行版本控制（这对于一个 8 人的团队来说并不是很好的项目）。

我们使用 MS Azure 作为构建和发布管道，如果需要，我认为这将是设置版本的最佳位置。

我的问题是避免这个问题的步骤是什么，我是否认为版本控制会缓解？

Answer 1

在这种情况下，语义版本控制没有任何意义，您很可能一直在阅读有关发布到 NPM 供全世界使用的包（库、框架）的信息。 在 CRA 项目和大多数其他 web 项目中，应用程序的版本控制由构建工具进行，因为它们根据文件内容命名文件。 文件名包括内容的 hash 并在内容更改时自动进行版本控制，例如。 app.iue9234980s.js 变成 app.92384oujiuoisdf.js 等等。

--

如果您使用 CRA 提供的默认Service Worker 设置，那么您应该查看 src/serviceWorker.js。 在该文件的评论中它说

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.

这里发生的是 SW 和构建过程使用配置为使用预缓存策略的 Workbox SW 库。 在此策略中，即使有新版本可用，用户也会从浏览器的缓存中获取先前缓存的最后一个版本，然后在后台 SW 更新缓存，并在另一次访问时用户获取较新的版本。 这当然意味着用户可能总是“迟到”一个版本。

如果这种行为不是您想要的，那么您需要更改 src/serviceWorker.js 并可能在 CRA 文件中的某处进行一些配置。 例如，您应该在 Google 上搜索“带有 cra 的自定义服务人员”之类的内容。

为了更好地掌握正在发生的事情——尤其是在不同配置的情况下什么是正确和预期的行为——我真的建议（每个人）阅读谷歌关于 SW 的入门，这里： https://developers.google.com/web/fundamentals/ Primers /service-workers了解 SW 的基本原理后，检查 Workbox 库https://developers.google.com/web/tools/workbox以了解它可以为您的应用程序提供什么可能很有用。

阅读和理解 SW 的不同方面是这里的关键——用 SW 打自己的脚非常容易:)