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

Question

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

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

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

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

我的问题是，有哪些步骤可以避免这个问题，我是否认为版本控制会减轻问题？

Answer 1

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

--

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

// 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 很容易将自己射中自己的脚 :)