服务工作者后备接管React SSR

Question

在线模式下，服务工作者api后备接管服务器端呈现页面。例如，当我第一次加载/about页面时，查看源代码我呈现了主页（因为我在/选项中将navigateFallback定义为sw-precache：

只有当我在离线模式下运行时，我才会想要这种行为。

以下是我使用的选项：

{
  cacheId: pkg.name,
  dontCacheBustUrlsMatching: /./,
  dynamicUrlToDependencies: {
    '/': [ resolve(__dirname, '../server/views/index.ejs') ]
  },
  navigateFallback: '/',
  staticFileGlobs: [
    `${publicDir}/{bundle,vendor}.*.{js,css,gz}`,
    `${publicDir}/manifest.json`
  ],
  stripPrefix: publicDir,
  runtimeCaching: [{
    urlPattern: /api/,
    handler: 'networkFirst'
  }]
}

Answer 1

navigateFallback中sw-precache的预期用例是提供一个静态HTML文档，可以立即使用缓存优先策略，而不必违反网络。这可以确保您网站上任何网址的请求几乎可以立即完成，而不必等待不确定的时间来从网络获得响应。这预示着您有一个通用HTML页面（称为App Shell），可用于实现任何导航请求，并且知道如何实现客户端逻辑以检查当前URL并动态插入适当的内容。如果您已经拥有支持单页应用程序样式导航的代码，那么通常就足够了。

您可read more about this architectural pattern，还有full example基于React的PWA，它使用SSR进行初始导航（或者不支持服务工作者的客户） ）一旦安装了SW工作，然后升级到navigateFallback行为。

如果您不想使用此模型，而是希望始终针对每个页面的SSR版本违反网络，并且仅在网络请求失败时使用缓存页面，则{{1选项不是正确的选择。您可以在网络上找到一些examples离线后备广告。