Why I Stopped using Service Workers

I stopped using a service worker with my website because it was slowing down the pace of which users would get new updates.

​
----
#benawad

[vigilant]

Thank's for sharing. We implemented the feature to show a notification for the user that a new version is available! It works in production pretty nice!

[locodev]

It happened the same to us, we solved it with a custom service worker (with workbox). we do make a network first aproach only with de html because its contians the referencies to the new bundles and new assets (create react app generates new names on every deploy), so, the network first has a timeout in which case we assume that the user does not have a conection so its ok to show the previews version.

[AlexFigueiredoo]

Offline navigation is just one of the many things you can do with Service Workers. It really depends on your application.

For example, I've made one website that was heavy on images, but the images itself were not super dynamic, they could changed once every month. So we added a cache of 15 days for those images and saw a huge impact on performance and bandwidth consumption.

Another thing is when you know some data won't change soon, so you can specifically cache some heavy endpoints, for example loading data that is old and doesn't change much (imagine loading user actions history from an old time).

Another way I've use it a lot is to go cache first and then immediately trigger a request in the background to update it. This can make your app look really fast and while you still have the n+1 scenario, users don't need to refresh manually because you already done it.

Don't give up on using Service Workers, they are easy to setup as a "all or nothing" kind of thing, but hard to really understand how it can improve your app specifically. But once you know how to take advantage of it only for the things you actually need, they can be great.

[jagadeeshkumar]

I was learning PWA and came to know that it may be fixed by cache versioning. Every time you update the content, the old version of the cache needs to be deleted, and fill the cache with new content.

[cali]

Dude it's incredible how your content is synchronized with stuff that I need to learn/do. I've started using Gatsby for a static site and Prismic as a CMS for the content creators. The thing is that the project has also a dynamic app with CRA so I'm trying to convince the team to move it on Gatsby as well. And I think that a plugin or two might solve that kind of SW issue.

[mandaputtra]

You can cache only some content though, I used this for image

[DiegoArcega]

Man, There's so much hate in your heart when you speak about service workers, I can see it in your eyes haha

[busyrand]

Thanks for this. Learning React now and I wondered about this issue as I built projects. I appreciate your logic on the matter.

[yapayzeka]

we couldnt even start and you quit. give this man a madal

[AlekEagle]

i experienced the same issue, what I did was provided a last modified header and the service worker checked the cached version of the page and compare it to periodic requests to the static file at the server, if the cache is out of date it will remove the old file from the cache and add the new page into the cache, then prompt the user about the new update

[CaptainDev]

You can prompt the user to update to the last version ... Using Workbox can help to avoid developing crucial parts of the service worker.

[GeordyJames]

I also have face issues with service worker in my blog. The service worker was not updating properly. I am using workbox to create service worker, so they should be a feature to automatically purge old caches and install new service worker. And after some debugging I found out that the real culprit was cloudflare CDN which cache my old service worker. So users are not receiving new service workers. Now I purge my old CDN caches when I deployed any new updates and I think it just solve my issues.

[eminem]

Often there will be a build process with multiple chunks and the index.html will have the references to them. However on update the browser holds to the SW index.html for dear life and therefore it keeps looking for the old build chunks, causing everything to fall apart if your build process has emptied the folder.

[FranCano]

Service Workers are a great technology, but very misunderstood and misused. Caching static files would be the last thing I would do in a Service Worker, it's dangerous. A good use case is to cache certain API calls using Workbox!

[estranhokonsta]

Service workers and spa can have a complicated relationship.
Although i do believe that when something gives more work than advantages it is time to reconsider it, i think that you 'abandoned' service worker too early.

Fortunately service workers are just javascript and their behavior can be changed to our needs.

In practice you could trigger the update whenever you want. You might have to manually call a skipwaiting in certain situations or even a clients.claim().

[JamesDoehring]

I bet if I looked at your service worker's fetch event listener, it would say to simply check the cache and return that file if there is a match. So your users cached the first version they ever got, and it returned that version until the end of time. I did this myself and it was frustrating. But it's not a limitation of service workers, it's because we used service workers without the right caching strategy.

[thetastefultoastie]

I built a web application not so long ago using service workers and haven't had any of this grief.
I added a route to the api such as "/version" that doesn't get cached and returns a version string.
Every time a user loads a page it loads from the service worker, but an asynchronous js request checks the remote version against the local version.
If there's a mismatch, all service workers are unregistered and the page is reloaded automatically.
So when users open the app, they always have the latest content, immediately.

[patrickstival]

Here I am 4 years later having the exact same thoughts. If users have to click on the update button all the time, it actually becomes a worse experience

[hatrick]

First thought when you want to split web development into pieces: front end / back end
After you had an experience of adding service workers to website: full stack / service workers

[romanshestakov]

skipWaiting is for activating new version of the service worker script ( sw.js ), maybe just clean the cache on activating .
also
clients.claim sets this worker as the active worker for all clients that match the workers scope and triggers an oncontrollerchange event for the clients.