Question

要使历史模式与Vue-Router一起使用，您需要在尝试访问不存在的路径时返回主页面的内容。例如，当您访问<div style="width:400px; height: 500px;background-color:#f1f1f1"> <div id="you_element" class="myclass"> <p id="height"></p> <p id="width"></p> </div> </div>时，您的服务器会检查mypwa.com/route1是否有资源，如果没有资源，则会返回route1处找到的内容（但不会重定向）您）。这很棒，可以在您上网时使用，但它需要您的服务器进行实际的重新路由。

如果您的PWA意味着脱机工作，则需要重新路由才能在服务器不可用的情况下工作。
问题是：当您离线工作时访问mypwa.com/。加载后，您可以从应用内导航到mypwa.com/。但是，如果您尝试在离线时直接导航到mypwa.com/route1，则会收到404错误，因为mypwa.com/route1未缓存，只会缓存mypwa.com/route1。我想这意味着你需要在服务工作者中使用某种后备条款？有谁知道实现这一目标的方法？有没有一种常见的方法来使用sw-precache-webpack-plugin？

Answer 1

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

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

就我而言，是这样：

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

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

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

默认情况下，这将响应所有导航请求，如果您希望将其限制为仅响应URL的子集，则可以使用白名单和黑名单选项来限制哪些页面符合此路线。

Answer 2

您需要在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

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

2 个答案: