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

问题描述 投票:1回答:2

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

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

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

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

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

无论如何,我想我可以弄清楚如何使用工作箱监听非GET请求,但是如何在监听器中更新index.html缓存?

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

reactjs single-page-application service-worker ssr workbox
2个回答
2
投票

我设法使用额外的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,尝试访问,做东西,离线和刷新 - 它将始终服务于网站所处的最后状态。


1
投票

当用户注销时,您可以将Cache Storage API直接用于remove缓存数据。我建议使用一种方法,在Workbox策略中使用命名缓存,并为与登录用户关联的所有数据指定一个特定名称(如'user-data')。然后你可以删除它

// This code can run in the context of your web page:
if ('caches' in window) {
  window.caches.delete('user-data');
}

这种方法的好处在于,如果对不是特定于给定用户的数据(例如,图像或CSS文件的缓存)使用不同的缓存名称,则在用户注销时不必删除这些缓存的条目。

© www.soinside.com 2019 - 2024. All rights reserved.