search

vite-pwa / vite-plugin-pwa

Zero-config PWA for Vite
https://vite-pwa-org.netlify.app/
MIT License
2.93k stars 199 forks source link

VueJS redirect to offline view #501

Open TheGlenn88 opened 1 year ago

TheGlenn88 commented 1 year ago

Hi,

I'm struggling to find a way to implement a redirect when the app becomes offline.

I'm working on a NetworkFirst strategy, which improves the offline state dramatically and makes it seem pretty seamless as the data is served from cache when the network request fails if the url has been requested before.

However, if the user goes to a page that has not had the data cached and the request fails, I would like to send them to an 'Sorry you appear to offline' page, which ideally would be a vue-router link, or even just showing an overlay triggered by a value from a Pinia store.

I cannot seem to use any Pinia state or vue-router's useRouter within the service worker. It's not feasible to try and pre-cache tonnes of data just on the off chance they may visit.

Is there a way this can be done?

TheGlenn88 commented 1 year ago

Update:

I've started to realise, directly accessing Vue related functions isn't going to work, since the service worker is entirely separate and can be running while even the browser is closed.

Are there any other clever ways of achieving a dynamic offline page, for example I want the page to be translated, which is simple in Vue, but not when serving an offline.html file.