Handling Service Worker Updates

index.js

	navigator.serviceWorker.register('/sw.js').then(function(reg) {

				//page has loaded from the network and not sw
				if (!navigator.serviceWorker.controller) {
					return;
				}

				//if sw is in waiting state
				if (reg.waiting) {
					//call the update function
					updateReady(reg.waiting);
					return;
				}
				//if sw is in installing state
				if (reg.installing) {
					trackInstalling(reg.installing);
					return;
				}

				//if update is found
				reg.addEventListener('updatefound', function() {
					trackInstalling(reg.installing);
				});

				// Ensure refresh is only called once.
				// This works around a bug in "force update on reload".
				//if new SW is loaded this event will fire and reload the page
				var refreshing;
				navigator.serviceWorker.addEventListener('controllerchange', function() {
					if (refreshing) return;
					window.location.reload();
					refreshing = true;
				});

			}

			//update message                                            
			function updateReady(worker) {
				//do something , show a dialog to update
				//on "update" send a message to sw
				worker.postMessage({
					action: 'skipWaiting'
				});
			}

			//Observe SW in installing stage
			function trackInstalling(worker) {
				//listening to state change
				worker.addEventListener('statechange', function() {
					//if state is 'installed' show update message
					if (worker.state == 'installed') {
						updateReady(worker);
					}
				});
			}

sw.js

self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

Quick Read : https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68