Example of how to use Service Workers to make a fully offline build?

Partially connected to this issue I found where Needle builds don’t run offline https://discord.com/channels/717429793926283276/1149300500328628262

Where would one start with trying out service workers when exporting from Needle? Would you suggest to use some NPM package or Vite plugin for this that runs when Vite builds?

Original Post on Discord

by user 103054507105067008

Yes, vite-pwa is a good starting point

For offline usage what you’ll want to do is ensure that the caching strategy is set in a way that every file is cached locally

This is basically what websites do that tell you “this website can work offline”, they cache stuff into the serviceWorker (which is essentially a kind of local server your browser puts inbetween the website and the web) and so future requests from the website first hit that cache

Would that in theory work for builds that I export then run while fully offline - as in not hosted anywhere, just taking the dist folder between PCs to run fully offline at an exhibition for example?

by user 103054507105067008

No, that’s separate, I believe Marcel is already responding in regards to the draco paths :slightly_smiling_face:

The serviceWorker route works best if you have internet access at some point - so opening the page once and ideally installing it to a user’s home screen which extends how long the service worker caches data

Ah brilliant, I already have an example using this PWA app I can share from ages ago - it didn’t seem to always hold the cache offline on desktop windows/android/ios so I gave up using it for offline use

by user 103054507105067008

It would cache for a while but once that cache expired, opening the app offline was impossible

by user 103054507105067008

I think this is a good overview:

and this

and this

vite-pwa uses workbox (Google’s service worker toolset) under the hood

https://github.com/vite-pwa/vite-plugin-pwa/issues/448

by user 103054507105067008

Service workers can do a lot of things, as in a typical app (e.g. a News app) you want not only to add stuff to the cache but also remove it again at certain points.
For a self-contained app it should be easier and a “just cache everything” strategy will likely work :slightly_smiling_face:

I think after I posted that issue ^ I did notice later on the Windows/Android caches expired

by user 103054507105067008

On iOS:

Service workers support is very limited compared to Android. You can only persist app data and cache its files (no background tasks). There is also a 50MB and “few weeks” limit for storage.

by user 103054507105067008

Yes, there are limits, but I believe they have been increased with iOS 16

A web-installed PWA is certainly not a 100% catch all for persistence e.g. if you want to move that device between exhibitions for a year and never have internet

There are other ways, like bundling all assets into a native app and so on; really depends on what you want to do / what the usecase is

Native app is the next route to explore for this for me after butting heads with PWA for a while - the idea was to circumvent Testflight expiry periods which I hit with a lot of exhibition apps as a client wants an app outside the app store for events once a year > app expires after a few months before the next event and so on

by user 103054507105067008