I recently setup a Service Worker to make my web app a PWA and enable offline support. Ever since then I have noticed a HUGE increase in server bandwidth used and it may push me into a higher billing tier.
Is it possible I configured something incorrectly or are service workers expected to have this effect?
I would have thought the server bandwidth would have gone down, not up due to the fact that static assets are cached right away by the worker. Is this happening because the worker is checking the server more often for updates to the cache? I thought the number of network requests would stay the same… any help would be appreciated.
service workers are like a wrench:
- used in one way, they unscrew bolts
- used in another way, they tighten bolts
So, service workers will affect your bandwidth usage, but how you use them matters.
Suppose your average visitor visits only a single page, that has no other assets used ("I’m just here to see https://yourservice.com/statuscheck - are you up? It says
all systems green in text, great!).
That service worker was told to cache hundreds of assets, all necessary to load your homepage and nav…so it now downloads hundreds of assets that would not otherwise have been used.
You have 100000 average users, and this multiplies out as expected - 100000 x hundreds of unnecessary assets crammed down their throat => greater bandwidth usage.
So - service workers can help with bandwidth, but they can also hurt, depending on your users’ browsing patterns and frequency.
Thanks so much for this detailed response, this makes total sense. I am guessing that most of my users do not use the PWA capabilities or the offline support - but I wanted to ‘upgrade’ my app and give anyone who wants this advanced functionality the option.
I didn’t think of this unintended side effect that you mentioned where most users are visiting one page on my site and are now forced to download the entire site. Not only that but there are also other apps that embed my app via iframe, so I am guessing that now those third party apps are also using the service worker as well?
This sounds like a pros/cons situation that I have to make a decision on. I can’t have a PWA with offline support and also keep my bandwidth usage low right? I already have the service worker configured to add a version number to the cache and only update when there is a new version available. So I am pretty sure I have already optimised as much as I can.
It’s a tough decision because I like the PWA functionality making the app more like a native app if users want that, but I also don’t know if I want to go into the enterprise tier for bandwidth usage… I see there is an open source application option though so maybe I will try that route.
Some other things I might be able to do is upgrade my assets to use webp format where possible… Maybe it is also possible for the cache to only update assets that have changed instead of clearing and replacing the entire thing?
Is it possible to only precache assets if a user has installed the app as a PWA and if not then only cache assets as they are needed? Not sure if you can detect this easily but there is no need to precache for regular non-PWA users right?
Also sorry I just realized I posted this in the Admin section but it probably should have been in Support.
Do you really wish to cache all images on your site? Personally, I do not like this behaviour by websites. This is precisely why I block service workers. Developers cache huge chunks of data (for a site, my service worker cache was over a GB!). I would rather spend my internet bill which gives me unlimited usage than waste my storage space - especially on my phone (I have just 64 GB there).
While it does give you “increased speed”, wasting your users’ device’s resources might not be a good idea.
This is not really a Netlify question, but more of the service-worker/programming question, which we cannot help with. I recommend using some other forums for that.