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

Question

在使用HTML5 历史记录 API进行 URL 重写时，支持离线模式的最佳实践(以及如何做到这一点(是什么？

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

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

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

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

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

Answer 1

是的，这对于服务工作者来说是微不足道的。您所要做的就是正确配置sw-precache的navigateFallback属性。它必须指向您希望服务工作进程在遇到缓存未命中时获取的缓存资产。

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

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

同样，您放入navigateFallback中的东西绝对必须已经由 Service Worker 缓存，否则这将以静默方式失败。

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

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

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