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

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

如果您的站点是单页应用程序，则可以使用 aNavigationRoute为所有导航请求返回特定响应。

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

就我而言，在 vue 中：

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

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

注意：您应该通过工作箱预缓存或通过您自己的安装步骤缓存页面）。

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

更新：Workbox V5

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

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

workbox.routing.registerRoute(navigationRoute);

Answer 2

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

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

它会自动向你的 service worker 添加必要的代码：

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

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