Gatsby blog - every new post requires hard refresh after build

Question

I have gatsby blog, and after I create a new post, and build static files, upload them on my hosting every user has to do hard refresh on my blog to see changes.

How to make auto refresh on next visit after uploading new build?

Answer 1

Another reason for this behavior was in my case the service worker as implemented by gatsby-plugin-offline.

Service workers are programmed to update while navigating. The problem is that when a user visits home and does not navigate any further no UPDATE will be visible. You esssentially never see an update if you have one-page website because there is nowhere to navigate to!

If you want the page to refresh automatically and invalidate the old cache, you need to trigger it. 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.

---

As @coreyway pointed out doing this automatically can be problematic. I argue that this behavior is still better than being stuck with an deprecated website version. If you are concerned about the UX the linked GitHub issuee discusses a solution to let the user trigger an update via click on a update notice message.