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中缓存动态/服务器生成的数据，它可以是两种类型。您从IndexDB中的Web服务调用和缓存中获取的JSON / XML内容，或将其缓存为服务器生成的HTML文件（服务器端呈现）。

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

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

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

如何使用Workbox

1 个答案: