Cache Refresh Issue at a time new Release

[engr-muzammil]

index.js
serviceWorkerRegistration.register();

If I load the application, the first time it cached all data, into the browser cache, but at the time of the new build release, the browser still showing old data which is already cached, I need to perform a hard reload Ctrl + Shift + R.

Any Fix Available except Cache Buster Technique?

[jeffposnick]

This is due to the newly updated service worker remaining in the waiting stage of the service worker lifecycle by default.

The pwa template offers some hooks to run your own code when a service worker has finished installation and starts waiting:

pwa/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js

Lines 70 to 78 in 25cb9f0

	console.log(
	'New content is available and will be used when all ' +
	'tabs for this page are closed. See https://cra.link/PWA.'
	);
	// Execute callback
	if (config && config.onUpdate) {
	config.onUpdate(registration);
	}

Your onUpdate callback function could do whatever you want; it can notify the user about the update and ask them if they want to stay on the old version or reload for the new version, or it could just forcibly perform that upgrade without asking anything.

The following code would do that forced update without asking:

installingWorker.addEventListener("statechange", event => {
  if (event.target.state === "activated") {
    window.location.reload()
  }
});
installingWorker.postMessage({type: 'SKIP_WAITING'});