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

瑞安

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

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

我已经阅读了一些关于语义版本控制的文章,但是这些文章似乎都使用 NPM 而不是 yarn 并且使用 npm 版本补丁等在本地进行版本控制(这对于一个由 8 人组成的团队在这个项目上工作并不是很好)。

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

我的问题是避免这个问题的步骤是什么,我是否认为版本控制会减轻?

头颅

在这种情况下,语义版本控制没有任何意义,您很可能一直在阅读有关发布到 NPM 供全世界使用的包(库、框架)的信息。在 CRA 项目和大多数其他 Web 项目中,您的应用程序的版本控制由构建工具在它们根据内容命名文件时发生。文件名包括内容的哈希值,并在内容更改时自动进行版本控制,例如。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.

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

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

为了更好地了解正在发生的事情——尤其是在不同配置的情况下什么是正确的和预期的行为——我真的建议(每个人)阅读谷歌关于软件本身的入门,这里:https : //developers.google.com/web/fundamentals/入门/服务工作者了解软件的基本原则后,检查 Workbox 库https://developers.google.com/web/tools/workbox以了解它可以为您的应用程序提供什么可能会很有用

阅读和理解 SW 的不同方面是这里的关键——用 SWs 用脚射击自己是极其容易的 :)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected]om 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何卸载服务工作者?

Javascript服务工作者:从缓存中获取资源,但也进行更新

如何列出服务工作者已经存储在浏览器缓存中的博客帖子?

服务工作者和客户端请求“缓存控制”:“无缓存”

WebView:以编程方式清除服务工作者缓存

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

服务工作者不会从缓存中返回文件

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

notificationclick事件服务工作者

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

服务工作者列出缓存中的所有URL并传递给另一个函数

从create-react-app中的服务工作者缓存中排除index.html

如何根据服务工作者中的某些标志缓存响应

如何在服务工作者中刷新图片

在服务工作者中服务之前,可以编辑缓存的index.html吗?

PWA-服务工作者(反应)如何工作?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

服务工作者中的XMLHttpRequest

检查服务工作者缓存中是否存在URL

在服务工作者中添加图像和CSS文件以及HTML文件以进行离线缓存

嵌套获取服务工作者中的响应

服务工作者从磁盘缓存中缓存资源

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?

服务工作者缓存破坏谷歌地图 api