如何在使用 HTML5 历史记录 api 时启用离线支持

Question

使用html5 历史 api进行 url 重写时支持离线模式的最佳实践是什么（以及如何去做）？

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

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

然而，当我离线时，情况就不同了。服务工作线程会正确缓存所有资源，因此当我访问 URL https://abc.xyz时，所有内容都会按预期加载。但是，现在如果我手动输入https://abc.xyz /en的 URL ，应用程序将无法加载。

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

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

Answer 1

是的，这对于 Service Workers 来说是可能的。您所要做的就是正确配置navigateFallback的属性sw-precache。它必须指向您希望服务工作线程在遇到缓存未命中时获取的缓存资源。

在您发布的模板中，如果按如下方式配置 SWPrecache Webpack 插件，则应该可以正常使用：

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

再次强调，您放入其中的内容必须navigateFallback已由 Service Worker 缓存，否则将会默默失败。

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

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

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