Vue 路由器历史记录模式和离线模式下的 PWA

Question

要让历史模式与 Vue-Router 一起使用，您需要在尝试访问不存在的路由时返回主页的内容。例如，当您访问mypwa.com/route1 时，您的服务器会检查route1 是否有资源，如果没有，它会返回在mypwa.com/ 找到的内容（但不会重定向您）。这很好，并且在您在线时也可以使用，但它需要您的服务器进行实际的重新路由。

如果您有一个打算离线工作的 PWA，则需要重新路由才能在服务器不可用的情况下工作。
问题是这样的：离线工作时访问mypwa.com/。加载后，您可以从应用程序内部导航到mypwa.com/route1。但是，如果您尝试在离线时直接导航到 mypwa.com/route1，您将收到 404 错误，因为 mypwa.com/route1 没有被缓存，只有 / 被缓存。 我想这意味着您的服务人员需要某种后备条款？有谁知道实现这一目标的方法？ sw-precache-webpack-plugin 有没有通用的方法？

Answer 1

您需要在vue.config.js 文件中设置navigateFallback 选项：

pwa: {
  workboxOptions: {
    navigateFallback: 'index.html'
  }
}

它会自动将必要的代码添加到您的服务工作者：

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("index.html"));

我遇到了同样的问题，我在这里找到了解决方案：https://github.com/vuejs/vue-cli/issues/717#issuecomment-382079361

Answer 2

如果您的网站是单页应用，您可以使用NavigationRoute 为所有导航请求返回特定响应。

workbox.routing.registerNavigationRoute('/single-page-app.html')

在我的 vue 中：

workbox.routing.registerNavigationRoute('/index.html')

每当用户在浏览器中访问您的网站时，对该页面的请求将是一个导航请求，并将提供缓存页面/single-page-app.html。

注意：您应该通过 workbox-precaching 或您自己的安装步骤缓存页面。

默认情况下，这将响应所有导航请求，如果您想限制它响应 URL 的子集，您可以使用白名单和黑名单选项来限制哪些页面将匹配此路由。

更新：Workbox V5

const handler = workbox.precaching.createHandlerBoundToURL("/index.html");

const navigationRoute = new workbox.routing.NavigationRoute(handler);

workbox.routing.registerRoute(navigationRoute);