使用 HTML5 历史 API 时如何启用离线支持

Question

在使用 html5 history 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 Worker 来说是非常简单的。您所要做的就是正确配置sw-precache 的navigateFallback 属性。如果遇到缓存未命中，它必须指向您希望服务工作者获取的缓存资产。

在您发布的模板中，如果您按照以下方式配置您的 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 选项。