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

Question

我正在尝试使用 Workbox 将服务工作人员集成到我的网络应用程序中。但是，我不太确定如何缓存现在在服务器端动态生成的index.html 文件。我正在使用具有以下配置的 workbox-webpack-plugin 。

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 的最佳实践是什么。

Answer 1

Twitter Lite是构建 PWA(也使用 React)的一个著名示例。您可以阅读“How we built Twitter Lite”上的这篇文章，本文的“渐进式加载”部分就是您问题的解决方案。

根据 Google 的 PWA 推荐，可以对静态和动态内容进行应用程序缓存。继续阅读 Cache API and IndexDB here 。 Workbox 只是构建在这些 API 之上的助手，因此原理是相同的。

用于缓存的动态内容类型 - 表示我们可以在 PWA 中缓存动态/服务器生成的数据，它可以有两种类型。您从 Web 服务调用获取并缓存在 IndexDB 中的 JSON/XML 内容，或将其缓存为服务器生成的 HTML 文件(服务器端渲染)。

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

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

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