如何在使用HTML5历史记录API时启用脱机支持

Question

使用 html5历史记录api 进行网址重写时，支持离线模式的最佳做法（以及如何进行）是什么？

例如，（假设）我在 https://abc.xyz 上有一个内置国际化的PWA SPA应用程序。所以当我访问此链接时，Vue路由器（理想情况下可以任何框架 - vue，react，angular等）将我重定向到 https://abc.xyz / en 。

当我在线时，这非常有效（当然，网络服务器也在处理此重定向，以便即使您直接访问所述链接，该应用仍可正常工作）。

然而，当我离线时，它是一个不同的故事。服务工作者正确地缓存所有资源，因此当我访问URL https://abc.xyz 时，所有内容都按预期加载。但是，现在如果我手动键入 https://abc.xyz / en 的网址，则该应用无法加载。

有关如何实现这一目标的任何指示？

链接到github中的同一问题：https://github.com/vuejs-templates/pwa/issues/188

Answer 1

是的，服务工作者可能会非常轻松。您所要做的就是正确配置navigateFallback sw-precache属性。它必须指向服务工作者遇到缓存未命中时要获取的缓存资产。

在您发布的模板中，如果您按如下方式配置SWPrecache Webpack插件，那么您应该很高兴：

new SWPrecacheWebpackPlugin({
    ...
    navigateFallback: '/index.html'
    ...
})

同样，您放在navigateFallback中的内容绝对必须由服务工作者缓存，否则会无声地失败。

您可以通过检查生成的service-worker.js webpack中的两件事来验证是否所有内容都已正确配置：

1. precacheConfig数组包含['/index.html', ...]
2. 在服务工作者的fetch拦截器中（位于文件底部），变量navigateFallback设置为您配置的值

如果您的最终应用程序托管在子目录中，例如在Github页面上托管时，您还必须正确配置stripPrefix和replacePrefix选项。