3

我正在尝试使用 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 的最佳做法是什么。

4

1 回答 1

1

Twitter Lite是构建 PWA（也使用 React）的一个著名示例。你可以阅读这篇关于“我们如何构建 Twitter Lite ”的文章，这篇文章的“渐进式加载”部分是解决你问题的方法。

根据 Google 的 PWA 推荐，可以对静态和动态内容进行应用程序缓存。在此处阅读Cache API 和 IndexDB。Workbox 只是建立在这些 API 之上的助手，所以原理是一样的。

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

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

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

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

于 2018-04-02T20:46:06.230 回答