vue.js - 使用 HTML5 history api 时如何启用离线支持

Question

当使用 html5 history api 进行 url 重写时，支持离线模式的最佳实践是什么(以及如何去做)？

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

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

然而，当我处于离线状态时，情况就不同了。 Service Worker 正确地缓存了所有资源，因此当我访问 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 属性。它必须指向您希望 Service Worker 在遇到缓存未命中时获取的缓存 Assets 。

在您发布的模板中，如果您按如下方式配置 SWPrecache Webpack 插件，您应该可以开始使用:

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

同样，你放在 navigateFallback 中的东西绝对必须已经被 Service Worker 缓存，否则这将静默失败。

您可以通过检查您的 webpack 生成的 service-worker.js 中的两件事来验证是否一切都配置正确:

1. precacheConfig 数组包含 ['/index.html', ...]
2. 在 service worker 的获取拦截器中(在文件底部)，变量 navigateFallback 被设置为您配置的值

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