Site using a lot of bandwidth

Hey folks! Apparently one of my sites ended up using a ton of bandwidth (https://play.idle.land) - 50gb last month to be exact! I reached out and it seems like I have a service worker misconfiguration, but I’m not sure how to configure it to use less bandwidth, basically. I’m using angular and here’s my ngsw-config.json: https://github.com/IdleLands/IdleLands/blob/master/src/client/ngsw-config.json

Any tips to reduce my bandwidth for this particular site?

I don’t see how a service worker can consume 50 GB bandwidth. Your website doesn’t even seem to load a lot of resources, it loaded around 5 to 6 MB on initial site load for me.

Are you sure you’re not getting a lot, like too much traffic? Maybe some spam? Or is there any large file that someone might be downloading?

The specific feedback I got from netlify support was as follows:

" Takes us a fair amount of time to gather that information manually, but it turns out to be play.idle.land, whose service worker is constantly loading your index.html (around 200k times last month).

This is in comparison to less than a couple thousand folks actually browsing your main page (https://play.idle.land), so you may want to adjust that :)"

That’s why I’m a bit confused. Likely, it’s because I have had it running for a while (since last august), and more people come by daily.

Oh yes, I did not see that. The support team was correct. In the Network tab, I do see your JS files continuously being requested by the service worker.

Let me see if I can try to fix it. I’ll keep you posted.

Oh a side note, from where exactly have you got this service worker file? It seems a little bit overcomplicated than the usual service workers I use and see.

This was the default generated service worker from angulars PWA toolkit. I followed this guide: https://web.dev/creating-pwa-with-angular-cli/

That helps.

If I navigate to this part: https://web.dev/precaching-with-the-angular-service-worker/#introducing-the-angular-service-worker, it shows that any file with the matching pattern is requested in the background.

You have the JS files setup to do that just like the example there. So, I’m guessing that’s the reason. You can try to switch installMode to lazy if it helps: https://angular.io/guide/service-worker-config#installmode. The perceived speed might take a little hit, but the assets won’t be cached till they’re not requested.

Thank you! I’ll give that a try, and hopefully next month I’ll see that number go down.

1 Like