Service Worker showing as deleted after reloading the page

Question

Am using react and trying to implement service worker, I had written a mini service worker file for push notifications, when the user clicks a button am registering a service worker, now if i send a push message it working as expected, but when i reload the page, the service worker in application shows as deleted even though the registration was successful, please refer screenshot

Service worker code

    const self = this;

    function receivePushNotification(event) {
      console.log('[Service Worker] Push Received.');
      console.log(event);

      // const { image, tag, url, title, text } = event.data.json();

      const options = {
        data: '/neworders',
        body: 'New order request',
        vibrate: [200, 100, 200],
        badge: 'https://spyna.it/icons/favicon.ico',
        actions: [
          {
            action: 'Detail',
            title: 'View',
            icon: 'https://via.placeholder.com/128/ff0000',
          },
        ],
      };
      event.waitUntil(self.registration.showNotification('Hello', options));
    }

    function openPushNotification(event) {
      console.log(
        '[Service Worker] Notification click Received.',
        event.notification.data
      );

      event.notification.close();
      event.waitUntil(clients.openWindow(event.notification.data));
    }

    self.addEventListener('install', function (event) {
      console.log({ event });
      // The promise that skipWaiting() returns can be safely ignored.
      self.skipWaiting();

      // Perform any other actions required for your
      // service worker to install, potentially inside
      // of event.waitUntil();
    });

    self.addEventListener('activate', (event) => {
      console.log('V1 now ready to handle fetches!');
    });
    self.addEventListener('push', receivePushNotification);
    self.addEventListener('notificationclick', openPushNotification);

Register service worker function

function registerServiceWorker() {
  return navigator.serviceWorker.register('/newsw.js');
}

Service worker deleted screenshot

Answer 1

I suspect it happens because you turned "update on reload" on.

This forces the service worker to update whenever you reload the page. (read more here)