How Can I cache resources from my application to have complete offline feature?
I'm implementing a complete offline application, I dont want to display a fallback page when there is not internet
I want to cache all my files .html, .js, .css, .png, and font families
When there is not internet I want my application check the cache and use it
That set up was posible in an old version of NextJs with next-pwa, but now I'm updating my application and I want to use serwist
Thanks in advance 🙏
Here are blogs related to caching:
-
https://serwist.pages.dev/docs/serwist/guide/precaching
-
https://serwist.pages.dev/docs/serwist/runtime-caching
-
https://serwist.pages.dev/docs/serwist/core/serwist
Well, seems that you want to precache some files. I notice that you use Next.js, so there's a few things to keep in mind:
-
If you want to precache some pages, fonts, and images, you will have to use
additionalPrecacheEntries. This option expects you to generaterevisionyourself, which is quite a pain, but I guess you can simply create an utility function that can hash a file's content. Hopefully we can improve this field a bit. One thing to keep in mind is that it is not recommended that you precache server-side rendered pages since they will then always be served by the precache rather than the network until the service worker is updated so that said pages should not be precached. -
@serwist/nextprecaches all CSS and JavaScript files for you out of the box unless you useexclude,excludeChunks,include, orincludeChunks. -
Don't think about precaching HTML files 💀 With how Next.js does its things, you just can't get a proper list of HTML files to precache.
Also, next time, please use GitHub Discussions if you want to ask a question. Our Issues is only meant for bugs and feature requests.
This issue is stale because it has been open for 30 days with no activity.
This issue was closed because it has been inactive for 14 days since being marked as stale.