Need to refresh previously vistied Gatsby site to view changes

Question

I have a Gatsby site hosted on Netlify. When I deploy a new version, the changes I made to the site aren't visible until I do a page refresh. Does anyone know why that would happen?

I am using gatsby-plugin-offline & gatsby-plugin-manifest. I saw that I could install the gatsby-plugin-remove-serviceworker plugin to remove the service worker, but I'd like to keep using it if possible.

This is kind of a hard issue to search for because I get results about the .cache folder in the local directory

Answer 1

Problem: Your service worker still shows the old page

In Gatsby, service workers are programmed to update while navigating. Service workers automatically get included to your site by using the gatsby-plugin-offline plugin.

The problem is that when a user visits home and does not navigate any further no update will be visible. If you want the page to refresh automatically on first visit and invalidate the old cache, you need to trigger it.

Solution:

You can use the official Gatsby Browser API to trigger an update to the service worker.

If you have gatsby-plugin-offline in your gatsby-config.js, add this line to your gatsby-browser.js.

// trigger an immediate page refresh when an update is found
export const onServiceWorkerUpdateReady = () => window.location.reload();

Here some background information about this issue from the official github repository.