Javascript 服务工作人员回退接管React SSR

在联机模式下，服务工作者api回退将接管服务器端呈现的页面。例如，当我第一次加载

/about

页面时，查看源代码时，我会呈现主页（因为我在

sw precache

选项中将

/

定义为

navigateFallback

）：

只有在脱机模式下运行时，我才需要此行为

以下是我使用的选项：

{
cacheId:pkg.name，
不匹配：/。/，
动态依赖性：{
“/”：[resolve（_dirname，'../server/views/index.ejs'）]
},
导航返回：“/”，
静态文件全局：[
`${publicDir}/{bundle，vendor}...{js，css，gz}`，
`${publicDir}/manifest.json`
],
stripPrefix:publicDir，
运行时缓存：[{
urlPattern:/api/，
处理程序：“网络优先”
}]
}

在

sw precache

中

navigateFallback

的预期用例是提供一个静态HTML文档，该文档可以使用缓存优先策略立即提供，而不必违反网络。这确保了对站点上任何URL的请求几乎可以立即通过某种方式实现，而不必等待网络的响应，等待的时间是不确定的。这假定您有一个通用HTML页面（称为应用程序外壳），可以用来满足任何导航请求，并且知道如何实现客户端逻辑来检查当前URL并动态插入适当的内容。如果您已经有了支持单页应用程序样式导航的代码，那么这通常就足够了

您可以，而且还有一种基于React的PWA，它使用SSR进行初始导航（或不支持服务工作者的客户端），然后在安装软件工作后升级到

NavigateCallback

行为

---

如果您不希望使用此模型，而是希望每个页面的SSR版本始终与网络对抗，并且仅在网络请求失败时使用缓存页面，那么

navigateCallback

选项不是正确的选择。您可以在web上找到一些脱机备用方法。

我将为

sw precache

文档增加一些清晰度：