Не удалось выполнить переход с автономного плагина на Workbox - новый сервисный работник не активирован

Question

Поскольку автономный плагин ( https://github.com/NekR/offline-plugin) больше не поддерживается, я решил переключиться на Workbox (https://developers.google.com/web/tools/workbox). Предыдущий код работает, новый код работает. Но при переключении между двумя версиями новый сервис-воркер не активируется.

Я борюсь с этим, и любая помощь будет очень признательна.

Мой старый код (с офлайн-плагином):

Регистрация обслуживающего работника:

        // eslint-disable-next-line global-require
  require('offline-plugin/runtime').install({
    onUpdateReady: () => {
      const checkExist = setInterval(() => {
        const element = document.getElementById('system-notification-cache');
        if (element) {
          element.className = 'system-notification-cache active';
          clearInterval(checkExist);
        }
      }, 100); // check every 100ms
    },
  });

html, чтобы перезагрузить страницу

        <div id="system-notification-cache" className="system-notification-cache">
      <PopUp
        name="new-version-available-popup"
        noScroll={['.body-scroll']}
        showModal
        content={
          <div className="popup-content">
            {formatMessage(messages.new_version_available)}
          </div>
        }
        controlBtns={
          <Button
            text={formatMessage(messages.apply)}
            id="pop-up-apply-button"
            className="full-green"
            onClick={() => window.location.reload()}
          />
        }
      />
    </div>

Плагин Webpack:

       new OfflinePlugin({
      relativePaths: false,
      publicPath: `${process.env.ROUTE}/`,
      appShell: `${process.env.ROUTE}/`,

      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,
      ServiceWorker: {
        entry: 'sw-handler.js',
        events: true,
      },
    }),

Мой новый код

Регистрационный код :

        if ('serviceWorker' in navigator) {
    const workbox = new Workbox(`${process.env.ROUTE}/sw.js`);
    let registration;

    const showNewVersionPopup = () => {
      workbox.addEventListener('controlling', () => {
        window.location.reload();
      });

      if (registration && registration.waiting) {
        const element = document.getElementById('system-notification-cache');
        if (element) {
          element.className = 'system-notification-cache active';
          const buttonApply = document.getElementById('pop-up-apply-button');
          buttonApply.addEventListener('click', () => {
            messageSW(registration.waiting, { type: 'SKIP_WAITING' });
          });
        }
      }
    };

    // Add an event listener to detect when the  registered
    // service worker has installed but is waiting to activate.
    workbox.addEventListener('waiting', showNewVersionPopup);
    workbox.addEventListener('externalwaiting', showNewVersionPopup);
    // eslint-disable-next-line no-return-assign
    workbox.register().then((r) => (registration = r));
  }

Вот плагин Webpack:

        new WorkboxWebpackPlugin.GenerateSW({  
      swDest: 'sw.js',
      mode: 'production',
      clientsClaim: true,
      skipWaiting: false,
      maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, 
      runtimeCaching: [{
        urlPattern: /\.(?:png|jpg|jpeg)$/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'images',
          expiration: {
            maxEntries: 40,
            maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
          },
        },
      }],
    }),