使用工作箱和服务器端呈现的 SPA 缓存服务工作者

弗拉基米尔·费斯科夫

我有一个服务器端呈现的 React 应用程序,我想向它添加服务工作者缓存。

在应用程序中,用户可以登录并查看他们保存的设置。在初始加载时,服务器使用基于 auth cookie 预渲染的这些设置为应用程序提供服务。如果用户未登录,则服务器会预呈现登录表单。

如果我在主页 index.html 上使用默认缓存优先策略,那么当用户注销并刷新页面时,他们将看到他们仍然登录的缓存版本。

在 index.html 上使用网络优先策略部分解决了这个问题,但在这种情况下失败了:用户注销或更改他们的任何设置,脱机然后刷新页面 - 他们会看到缓存版本,好像他们没有任何操作曾经发生过,尽管他们只是在刷新之前看到了实际的最新版本。

我能想到的一种解决方案是每次发生非 GET 请求时更新 index.html 缓存 - 例如,注销必须是 DELETE 请求。这实际上可以解决所有问题,并且可能足够通用以包含在框架中。

无论如何,我想我可以弄清楚如何使用 workbox 侦听非 GET 请求,但是如何更新侦听器中的 index.html 缓存?

我将继续检查工作箱源代码,但我很想得到一个提示,提前致谢!

弗拉基米尔·费斯科夫

我设法通过一个额外的fetch监听器与 Workbox 预缓存一起工作:https : //github.com/vfeskov/cra-ssr/commit/d269f55e9f9c83cb6a67033499c51f5a778bdb4a

我还写了一篇关于它的详细帖子:https : //vfeskov.com/2017/12/29/Create-React-App-with-SSR-and-Service-Worker/

它正在这里处理我的宠物项目:https : //beer.vfeskov.com,尝试访问、做事、离线和刷新 - 它始终服务于网站的最后状态。

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

服务工作者缓存与 VuexPersistence

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

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

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

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

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

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

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

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

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

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

如何卸载服务工作者?

notificationclick事件服务工作者

服务工作者中的XMLHttpRequest

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

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

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

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

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

如何使用服务工作者预缓存名称在每次部署时都会更改的资产?

Netlify 表单和服务工作者

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

通常,服务工作者应预缓存哪些文件?

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

是否可以修改服务工作者缓存响应标头?

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

服务工作者缓存文件但不离线加载

服务工作者查询缓存算法是否允许表达式匹配URL路径?

使Web应用程序脱机-应用程序缓存或服务工作者哪个更好?