Why is gatsby-plugin-offline still caching after it's removed?

Support
,
1

I have a sporadic issue with my Gatsby + Netlify site (https://kelleycooks.com or https://61a90f842d07ff000753ffd3--awesome-cray-d5e98c.netlify.app/) where the javascript elements (i.e. the search bar) stop working but there are no console errors. I’ve tracked this down to a caching issue related to the gatsby-plugin-offline cache, if I delete everything under Application >> Cache >> Cache Storage it reliably fixes the problem.

image

However, I removed gatsby-plugin-offline (and all references to it) from my site months ago (and many deploys ago).

My 2 questions are:

  1. Why is my browser still creating caches for gatsby-plugin-offline? (currently Chrome but this happens in a variety of browsers and platforms).

  2. Is there a way to prevent this from happening in the future without manually deleting the cache storage?

I found references to a similar problem in this post and this post that mention unregistering service workers and am wondering if that’s related.

Thanks for any help you can offer!

2

To answer your questions:

  1. You removed the plugin from Gatsby. You didn’t tell browsers to unregister your service worker. This won’t automatically happen. To programatically unregister it, follow this:

The problem with that implementation is that, if your HTML pages are cached and returned by Service Worker, this new piece of JS will never be loaded from server and thus, the service worker will still remain. In that case, you might have to find out which part of your site is not cached by the service worker and then update some other part which is not cached. You’d then have to find a way to force users to visit that page so that the JavaScript will remove the service worker registration. Even if the service worker is unregistered, I don’t think the cache is automatically deleted. But at least, the service worker won’t exist to serve the files from cache. In short, there’s no easy way to do this for all your users without manually removing it from cache storage.

  1. Yes, you need to set and control your caching strategies effectively. You should configure a way for yourself to be able to take over the control of a page when you need to. I personally do this by versioning the service worker. I check for the latest version on the server and invalidate the local cache + unregister the older worker and accept the new one.
1 Like
3

Thanks! Also realized that the docs recommend replacing gatsby-plugin-offline with gatsby-plugin-remove-serviceworker.

I’m no longer seeing service workers so thanks for your help and explanations!

1 Like