Javascript 如何使用Workbox在React SSR中缓存HTML页面

我正在尝试使用Workbox将服务人员集成到我的web应用程序中。但是，我不确定如何缓存index.html文件，该文件现在是在服务器端动态生成的。我正在使用带有以下配置的

workbox网页包插件

const {GenerateSW, InjectManifest} = require('workbox-webpack-plugin')
plugins: [
    new GenerateSW(),
    new InjectManifest({
            swSrc: './public/service-worker.js',
            include: [/\.html$/, /\.js$/, /\.svg$/, /\.css$/, /\.png$/, /\.ico$/]
        })
  ]

我能够成功注册服务工作者并缓存我的JS包。但是，我不确定缓存服务器端生成的index.html的最佳实践是什么

是构建PWA（以及使用React）的一个著名示例。您可以在“”上阅读本文。本文的“渐进加载”部分是您问题的解决方案

基于谷歌的PWA建议，可以对静态和动态内容进行应用程序缓存。继续读下去。Workbox只是构建在这些API之上的一个助手，所以原理是一样的

用于缓存的动态内容类型-说我们可以在PWA中缓存动态/服务器生成的数据，它可以有两种类型。从web服务调用中获取的JSON/XML内容，并将其缓存在IndexDB中，或者将其缓存为服务器生成的HTML文件（服务器端呈现）

您的用例正在缓存服务器端呈现的页面-index.html。虽然您可以通过使用workbox将其预缓存为单个文件来保持简单，然后在用户打开应用程序后立即显示相同的文件，然后让您的服务人员重新提取新的HTML，但当页面完全重新加载时，它可能无法提供良好的用户体验。。想想用户是否已经向下滚动并阅读了预加载的内容。当重新加载新的index.html时，它可能会突然消失，并导致用户混淆

Twitter Lite用例-如链接文章中所述，他们将登录页（您可以将其与index.html进行比较）分解为多个模块。把外壳分开。如通知、标题栏、菜单、侧导航等。页面中的内容块应进一步细分为推特流。因此，当用户打开应用程序时，它只加载预缓存的登录页模块，包括缓存的tweets，然后为用户获取新的tweets，作为预呈现的html页面，并注入到DOM中。因此，如果用户正在读一些预缓存的旧tweet，这种体验不会受到干扰

---

您的用例？如果您认为index.html与上述用例有显著不同，如果您列出了index.html组件，我们将很乐意将其分解为PWA缓存

如果index.html是在服务器端动态生成的，您确定要缓存它吗？内容是动态的，对吗？@pate SSR应用程序应该如何作为PWA构建？我听过一些人在使用Workbox，但我不确定如何在Workbox中使用它。@MRN下面的答案解决了这个问题吗？如果没有，请添加仍然存在的问题或接受答案以关闭它。