使用 HTML5 历史 api 时如何启用离线支持
How to enable offline support when using HTML5 history api
在使用 html5 历史时支持 离线 模式的最佳实践是什么（以及如何去做）api 为 url 重写？
例如，（假设）我在 https://abc.xyz 有一个 PWA SPA 应用程序，它内置了国际化。所以当我访问这个 link，Vue 路由器（理想情况下可以是任何框架 - vue、react、angular 等）将我重定向到 https://abc.xyz/en。
这在我在线时非常有效（当然，网络服务器也在处理此重定向，因此即使您直接访问上述 link，应用程序也能正常工作）。
然而，当我处于离线状态时，情况就不同了。 Service Worker 正确缓存了所有资源，因此当我访问 URL https://abc.xyz 时，一切都按预期加载。但是，现在如果我手动输入 URL 到 https://abc.xyz/en，应用程序将无法加载。
关于如何实现这一点的任何指示？
Link github 中的相同问题：https://github.com/vuejs-templates/pwa/issues/188
是的，这对于 Service Workers 来说是很容易实现的。您所要做的就是正确配置 sw-precache 的 navigateFallback 属性。它必须指向 缓存的资产 你希望 service worker 在遇到缓存未命中时获取。
在您发布的模板中，如果您按如下方式配置 SWPrecache Webpack 插件，您应该可以开始使用：
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
同样，你放在 navigateFallback 里面的东西必须已经被 Service Worker 缓存了，否则它会静静地失败。
您可以通过检查生成的 webpack 中的两件事来验证是否一切配置正确 service-worker.js:
- precacheConfig 数组包含
['/index.html', ...]
- 在 service worker 的 fetch 拦截器中（在文件底部），变量
navigateFallback 被设置为您配置的值
如果您的最终应用程序托管在子目录中，例如托管在 Github 页面上，您还必须正确配置 stripPrefix 和 replacePrefix 选项。
在使用 html5 历史时支持 离线 模式的最佳实践是什么（以及如何去做）api 为 url 重写？
例如，（假设）我在 https://abc.xyz 有一个 PWA SPA 应用程序，它内置了国际化。所以当我访问这个 link，Vue 路由器（理想情况下可以是任何框架 - vue、react、angular 等）将我重定向到 https://abc.xyz/en。
这在我在线时非常有效（当然，网络服务器也在处理此重定向，因此即使您直接访问上述 link，应用程序也能正常工作）。
然而，当我处于离线状态时，情况就不同了。 Service Worker 正确缓存了所有资源，因此当我访问 URL https://abc.xyz 时，一切都按预期加载。但是，现在如果我手动输入 URL 到 https://abc.xyz/en，应用程序将无法加载。
关于如何实现这一点的任何指示？
Link github 中的相同问题：https://github.com/vuejs-templates/pwa/issues/188
是的，这对于 Service Workers 来说是很容易实现的。您所要做的就是正确配置 sw-precache 的 navigateFallback 属性。它必须指向 缓存的资产 你希望 service worker 在遇到缓存未命中时获取。
在您发布的模板中，如果您按如下方式配置 SWPrecache Webpack 插件，您应该可以开始使用：
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
同样，你放在 navigateFallback 里面的东西必须已经被 Service Worker 缓存了，否则它会静静地失败。
您可以通过检查生成的 webpack 中的两件事来验证是否一切配置正确 service-worker.js:
- precacheConfig 数组包含
['/index.html', ...] - 在 service worker 的 fetch 拦截器中（在文件底部），变量
navigateFallback被设置为您配置的值
如果您的最终应用程序托管在子目录中，例如托管在 Github 页面上，您还必须正确配置 stripPrefix 和 replacePrefix 选项。