问题
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?
回答1:
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);
回答2:
You need to set the navigateFallback option in your vue.config.js
file:
pwa: {
workboxOptions: {
navigateFallback: 'index.html'
}
}
It will automatically add the necessary code to your service worker:
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("index.html"));
I had the same problem and I found the solution here: https://github.com/vuejs/vue-cli/issues/717#issuecomment-382079361
来源:https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode