nuxt
Offline Page to be used in PWA
Describe the feature
Build process should be able to generate an offline page e.g. offline.html similar to index.html or 200.html page that is built when ssr is false. This offline page can be used by PWA / Service Worker so that application may fallback to SPA when user is offline.
Additional information
- [ ] Would you be willing to help implement this feature?
- [ ] Could this feature be implemented as a module?
Final checks
- [X] Read the contribution guide.
- [X] Check existing discussions and issues.
Check out my example https://www.hom.wang
It appears you are caching all pages a user visits but that is not what we want to do since it will make only a few pages to work. For e.g. a user visits page A then it would can be used offline but page B won't work.
We want to provide an entire offline SPA experience if a user is offline using workbox offline fallback. There might be a few sections which won't work offline but we can still make a large part work in our use case.
This should probably be part of the PWA module?
@jgupta I have a similar use case and I think it would be cool to have an option in the PWA module to pre-cache all routes and components if the user installs the app. That way the experience would be almost exactly like a native app, only that it can be installed from the web via the standard PWA flow.
This should probably be part of the PWA module?
Yes and no. Actual implementation has to be inside PWA module/scripts but it cannot (or should not) generate the required offline.html file.
@jgupta I have a similar use case and I think it would be cool to have an option in the PWA module to pre-cache all routes and components if the user installs the app. That way the experience would be almost exactly like a native app, only that it can be installed from the web via the standard PWA flow.
PWA should pre-cache all build files (js, css, html, png, webp etc) but pre-cache all routes? In our case, we have thousands of dynamic routes and cannot pre-cache them all. We do have way to pre-cache API call's for most recent/frequent routes but need SPA capabilities while being offline to use this data. I am not sure if I understood your point correctly?
What we are doing is as follows.
- PWA caches all build files (js, css, html, png, webp etc)
- It also pre-caches API data for most recent/frequent routes.
- We need an html file which PWA would use when user is offline so that application works as SPA.
We had been doing this in Vue and now are switching to Nuxt for better performance (SSR). We need to maintain offline capabilities. We don't want to cache all routes html (document) as doing that won't be the efficient. @toniengelhardt does this makes sense?
Yes, it makes sense, pre-caching all routes should be an option to turn on/off. But PWAs that are published in the PlayStore for instance should behave exactly like native apps, meaning all routes should work offline, not only the ones that were visited. But it's a different use case from yours I think.
In reference to this, as a workaround, we may cache any SSR generated page and use it as an SPA fallback. This is only an workaround because the page will contain a lot of unnecessary HTML and we have to choose a page with no payload or disable payload extraction. Having an 200.html or offline.html for this would be ideal.