page-reload-on-route-change.js

// gatsby-browser.js

import { SERVICE_WORKER_UPDATE_FOUND } from "./src/components/navLink"

/**
 * Set global variable to true when service worker has found an
 * update. This is used to trigger a page reload on route change.
 */
export function onServiceWorkerUpdateReady() {
  window[SERVICE_WORKER_UPDATE_FOUND] = true
}





// src/components/navLink.js

export const SERVICE_WORKER_UPDATE_FOUND = "myAppServiceWorkerUpdateFound"

function NavLink({ children, ...props }) {
  const isOnline = useNetwork()

  // If we're online and service worker has found an update,
  // trigger page reload on route change.
  function handleClick(event) {
    if (isOnline && window[SERVICE_WORKER_UPDATE_FOUND] === true) {
      event.preventDefault()
      window.location.href = props.to
    }
  }

  return (
    <Link {...props} onClick={handleClick}>
      {children}
    </Link>
  )
}

export default NavLink