在离线模式下使用 PWA 的 Vue 路由器历史模式 [英] Vue Router History Mode with PWA in Offline Mode

问题描述

要使历史模式与 Vue-Router 一起使用，您需要在尝试访问不存在的路由时返回主页的内容.例如，当您访问 mypwa.com/route1 时，您的服务器会检查 route1 处是否有资源，如果没有，则返回在 route1 处找到的内容code>mypwa.com/(但不会重定向您).这很棒，而且在您在线时也能工作，但它需要您的服务器进行实际的重新路由.

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

解决方案

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

>

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);

To get history mode working with Vue-Router you need to return the contents of your main page when trying to access a route that doesn't exist. For example when you visit mypwa.com/route1 your server checks if there is a resource at route1 and if there isn't, it returns the contents that is found at mypwa.com/ (but without redirecting you). This is great and works when you're online, but it requires your server to do the actual re-routing.

If you have a PWA that's meant to work offline, you need this re-routing to work without the server being available.
The problem is this: visiting mypwa.com/ when you're offline works. After loading it you can then navigate to mypwa.com/route1 from inside the app. However, if you try to navigate directly to mypwa.com/route1 whilst offline you will get a 404 error because mypwa.com/route1 is not cached, only / is cached. I suppose this means that you need some kind of fallback clause in your service worker? Does anyone know of a way to achieve this? Is there a common way to do it with sw-precache-webpack-plugin?

解决方案

If your site is a single page app, you can use a NavigationRoute to return a specific response for all navigation requests.

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

In my case in vue :

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

Whenever a user goes to your site in the browser, the request for the page will be a navigation request and will be served the cached page /single-page-app.html.

Note: You should have the page cached via workbox-precaching or through your own installation step).

By default, this will respond to all navigation requests, if you want to restrict it to respond to a subset of URL’s you can use the whitelist and blacklist options to restrict which pages will match this route.

Update: Workbox V5

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

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

workbox.routing.registerRoute(navigationRoute);

这篇关于在离线模式下使用 PWA 的 Vue 路由器历史模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！