Gatsby: Deleting a Gatsby site: how do I get the browser to clear the cache?

[noelwelsh]

Description

Once a site has been implemented in Gatsby it is difficult to migrate to another framework as Gatsby remains in the browser cache for an excessively long time, causing the old site to continue to render. This can be worked around by manually clearing the cache but it is impractical to expect users to do this.

Steps to reproduce

Create a Gatsby site. View in browser. Move to something else (e.g. static HTML). Gatsby site will still render in the browser until the cache is cleared. This happens months after migrating off Gatsby.

Expected result

New site should render

Actual result

Old Gatsby site renders

Environment

I don't have Gatsby installed any longer, so cannot answer this question unfortunately. However I used latest Gatsby as of several months ago.

[ipatate]

You have the same problem in multiple browser ? Maybe it's the service worker cache ? clear cache storage.

[noelwelsh]

I have the same problem in every browser for which I have not manually
cleared the cache. I cannot expect my users to manually clear their browser
cache before they can view my site correctly.

The solution, in the small, is to serve a file sw.js with the following
content:

self.addEventListener('install', function(e) {

    self.skipWaiting();
});

self.addEventListener('activate', function(e) {
    self.registration.unregister()
        .then(function() {
            return self.clients.matchAll();
        })
        .then(function(clients) {
            clients.forEach(client => client.navigate(client.url))
        });
});

However I think it is completely irresponsible of Gatsby to pollute the
browser cache to such an extent that two months after moving the site away
from Gatsby users are still seeing the old Gatsby site.

On Thu, Jul 11, 2019 at 10:19 AM Patrick Faramaz [e-mail]
wrote:

You have the same problem in multiple browser ? Maybe it's the service
worker cache ? clear cache storage.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/15623?email_source=notifications&email_token=AAAH5XEYFVU5QEP7TMFBGLLP633LHA5CNFSM4IAVFWB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZWCUTY#issuecomment-510405199,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAH5XGWTEYYMP67ZI6XD7TP633LHANCNFSM4IAVFWBQ
.

[ipatate]

it's good solution. But is not gatsby problem, it's service worker problem. Also, you can clear the cache with this solution : https://stackoverflow.com/questions/45467842/how-to-clear-cache-of-service-worker

[wardpeet]

Copied from the linked thread:

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

As stated, this is slightly tangential to Gatsby, and it seems like we’ve provided enough information to make an informed decision.

If this is not the case, or if we can help further--please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby 💪

[jbothma]

Hi there

This issue just hit me and looking at https://github.com/gatsbyjs/gatsby/issues?utf8=%E2%9C%93&q=is%3Aissue++remove+service+worker it seems to be a problem for many people.

I hear you, it's a service worker problem. But this is a framework that has a plugin to install a service worker so people are going to make assumptions about the framework taking care of them.

At the very least you need to warn people that you will need to manage moving away from gatsby if you use this.

I don't feel like figuring out right now whether this is possible, but I'd be surprised if it wasn't possible for the service worker to detect that loading pages-manifest....js and resources resulted in a 404 and that it's time to remove itself and reload.

I've set up redirects for those files from the new platform to https://github.com/OpenUpSA/unregister-service-worker/unregister-and-reload.js which seems to be resolving it for some but not all.

[wardpeet]

How do you suggest we warn people?

[jbothma]

How about under https://www.gatsbyjs.org/packages/gatsby-plugin-offline/#how-to-use and https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/#installing-gatsby-plugin-offline you have a notice like

Be careful not to make it impossible to replace the service worker without the user manually resetting their browser for this domain. Gatsby installs a service worker that will make the domain useless for people who have visited the site if you ...whatever setup can lead to this... and then migrate away from gatsby. To avoid this, make sure you ...
To remove the service worker using gatsby, see below. To remove the service worker when moving away from gatsby, do ...link to canonical documentation on this...

If it's easy to create settings that make it impossible to replace it in future, this should be a common issue and you can link to a canonical place where that's documented, perhaps with some help specific to gatsby's plugin on how to avoid this, perhaps around https://www.gatsbyjs.org/packages/gatsby-plugin-offline/#overriding-options

like

Avoid setting handler of ...paths that can lead to brokenness... to ....handler that can lead to brokenness...

By the way, I did some googling and saw there's a global error handler which you might be able to set up to have some safe default behaviour as a responsible framework https://stackoverflow.com/a/37784386/1305080
I haven't checked if it handles errors like 404s, and you probably don't want it to be overzealous so it should probably not uninstall if the network is just shaky. But a 404 is a pretty clear indication that the current service worker is not compatible with the current site and something has to change.

[schalkventer]

@wardpeet I think @jbothma raises an interesting point. https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/ covers how to remove the service worker via Gatsby, however, this does not cover use-cases where the site moved from Gatbsy to something else, for example, Wordpress, etc.

It might be worth including a section that just says to copy and paste the following into the HTML of your new site.

<script>
  if (navigator && navigator.serviceWorker && navigator.serviceWorker.getRegistrations) {
    navigator.serviceWorker.getRegistrations().then((registrations) => {
      for(let registration of registrations) {
        registration.unregister()
    })
  }
</script>

If this makes sense to you I'm happy to do a PR?

[wardpeet]

It's always good to warn people. If people are struggling with this I think it's a good idea to add it to the plugin's readme.