使用工作箱和服务器端呈现的 SPA 进行服务工作者缓存
Service worker caching with workbox and server-side rendered SPA
我有一个服务器端呈现的 React 应用程序，我想向它添加服务工作者缓存。
在应用程序中，用户可以登录并查看他们保存的设置。在初始加载时，服务器使用基于身份验证 cookie 预呈现的这些设置为应用程序提供服务。如果用户未登录，则服务器会预呈现登录表单。
如果我在主页上使用默认的缓存优先策略 index.html ，那么当用户注销并刷新页面时，他们将看到他们仍处于登录状态的缓存版本。
在 index.html 上使用网络优先策略部分解决了这个问题，但在这种情况下它失败了：用户注销或更改他们的任何设置，离线然后刷新页面 - 他们会看到缓存版本好像 none 他们的行为曾经发生过，尽管他们只是在刷新之前看到了实际的最新版本。
我能想到的一个解决方案是每次发生非 GET 请求时更新 index.html 缓存 - 例如，注销必须是 DELETE 请求。这实际上可以解决所有问题，并且可能足够通用，可以包含在框架中。
无论如何，我想我可以弄清楚如何使用 workbox 侦听非 GET 请求，但我如何更新侦听器中的 index.html 缓存？
我会继续检查工作箱源代码，但我很想得到提示，在此先感谢！
您可以使用缓存存储 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 文件），您不必当用户注销时删除那些缓存的条目。
我设法通过一个额外的 fetch 侦听器与 Workbox 预缓存一起工作来做到这一点：https://github.com/vfeskov/cra-ssr/commit/d269f55e9f9c83cb6a67033499c51f5a778bdb4a
我也写了一个详细的post关于它：https://vfeskov.com/2017/12/29/Create-React-App-with-SSR-and-Service-Worker/
它正在处理我的宠物项目：https://beer.vfeskov.com，尝试访问、做事、离线和刷新 - 它总是服务于网站的最后状态。
我有一个服务器端呈现的 React 应用程序，我想向它添加服务工作者缓存。
在应用程序中，用户可以登录并查看他们保存的设置。在初始加载时，服务器使用基于身份验证 cookie 预呈现的这些设置为应用程序提供服务。如果用户未登录，则服务器会预呈现登录表单。
如果我在主页上使用默认的缓存优先策略 index.html ，那么当用户注销并刷新页面时，他们将看到他们仍处于登录状态的缓存版本。
在 index.html 上使用网络优先策略部分解决了这个问题，但在这种情况下它失败了：用户注销或更改他们的任何设置，离线然后刷新页面 - 他们会看到缓存版本好像 none 他们的行为曾经发生过，尽管他们只是在刷新之前看到了实际的最新版本。
我能想到的一个解决方案是每次发生非 GET 请求时更新 index.html 缓存 - 例如，注销必须是 DELETE 请求。这实际上可以解决所有问题，并且可能足够通用，可以包含在框架中。
无论如何，我想我可以弄清楚如何使用 workbox 侦听非 GET 请求，但我如何更新侦听器中的 index.html 缓存？
我会继续检查工作箱源代码，但我很想得到提示，在此先感谢！
您可以使用缓存存储 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 文件），您不必当用户注销时删除那些缓存的条目。
我设法通过一个额外的 fetch 侦听器与 Workbox 预缓存一起工作来做到这一点：https://github.com/vfeskov/cra-ssr/commit/d269f55e9f9c83cb6a67033499c51f5a778bdb4a
我也写了一个详细的post关于它：https://vfeskov.com/2017/12/29/Create-React-App-with-SSR-and-Service-Worker/
它正在处理我的宠物项目：https://beer.vfeskov.com，尝试访问、做事、离线和刷新 - 它总是服务于网站的最后状态。