如何用Workbox对SSR中的HTML页面进行缓存

Question

我正在尝试使用工作框将服务人员集成到我的web应用程序中。但是，我不太确定如何缓存现在在服务器端动态生成的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)。您可以阅读本文中关于"我们是如何建立Twitter Lite的“”渐进加载“部分的文章，这是解决您的问题的方法。

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

用于缓存的动态内容类型- -说我们可以在PWA中缓存动态/服务器生成的数据，它可以分为两种类型。您从IndexDB中的web服务调用和缓存中获得的JSON/XML内容，或者将其缓存为一个由服务器生成的HTML (服务器端呈现)。

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

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

您的用例？如果您认为您的index.html与上面的用例有很大的不同，那么如果您列出了您拥有的index.html组件，那么很乐意为PWA缓存细分它。