How to use the workbox-window.Workbox function in workbox-window

Workbox,
    WorkboxEvent,
    WorkboxEventMap,
    messageSW,
} from "workbox-window";

//==============================================================================
// WorkboxWindow.Workbox
//==============================================================================

export namespace WorkboxTest {
    declare const url: string;
    declare const options: RegistrationOptions;

    // $ExpectType Workbox
    new Workbox(url);
    // $ExpectType Workbox
    new Workbox(url, options);

    declare const workbox: Workbox;
    declare const event: WorkboxEvent;
    declare const eventListener: () => void;
    declare const eventType: keyof WorkboxEventMap;
    declare const messageData: any;
    declare const registerOptions: Workbox.RegisterOptions;

    // $ExpectType Promise
    workbox.active;

    // $ExpectType Promise
    workbox.controlling;

WorkboxEventMap,
    messageSW,
} from "workbox-window";

//==============================================================================
// WorkboxWindow.Workbox
//==============================================================================

export namespace WorkboxTest {
    declare const url: string;
    declare const options: RegistrationOptions;

    // $ExpectType Workbox
    new Workbox(url);
    // $ExpectType Workbox
    new Workbox(url, options);

    declare const workbox: Workbox;
    declare const event: WorkboxEvent;
    declare const eventListener: () => void;
    declare const eventType: keyof WorkboxEventMap;
    declare const messageData: any;
    declare const registerOptions: Workbox.RegisterOptions;

    // $ExpectType Promise
    workbox.active;

    // $ExpectType Promise
    workbox.controlling;

    // $ExpectType void
    workbox.addEventListener(eventType, eventListener);

}

window.injectSettings = (newSettings) => {
  for (var key in newSettings) {
    settings.set(key, newSettings[key]);
  }
};

if (toggleButton) {
  toggleButton.onclick = () => settings.set("darkMode", !settings.get("darkMode"));
  ;
}

// Register service worker
if ("serviceWorker" in navigator) {
  const wb = new Workbox("sw.js");
  wb.addEventListener("waiting", (event) => {
    wb.addEventListener("controlling", (event) => {
      console.log("Reloading page for latest content");
      window.location.reload();
    });
    wb.messageSW({ type: "SKIP_WAITING" });
    // Old serviceworker message for migration, can be removed in the future
    wb.messageSW("SKIP_WAITING");
  });
  wb.register();
}

// purge old lightning strikes on restart
setTimeout(() => { strikemgr.fadeStrikes(); }, 30 * 1000);

/* vim: set ts=2 sw=2 expandtab: */

cc.sats.addFromTleUrl("data/tle/norad/starlink.txt", ["Starlink"]);
cc.sats.addFromTleUrl("data/tle/norad/globalstar.txt", ["Globalstar"]);
cc.sats.addFromTleUrl("data/tle/norad/resource.txt", ["Resource"]);
cc.sats.addFromTleUrl("data/tle/norad/science.txt", ["Science"]);
cc.sats.addFromTleUrl("data/tle/norad/stations.txt", ["Stations"]);
cc.sats.addFromTleUrl("data/tle/norad/weather.txt", ["Weather"]);
cc.sats.addFromTleUrl("data/tle/norad/tle-new.txt", ["New"]);

cc.sats.addFromTleUrl("data/tle/ext/move.txt", ["MOVE"]);
if (cc.sats.enabledTags.length === 0) {
  cc.sats.enableTag("MOVE");
}

// Register service worker
if ("serviceWorker" in navigator) {
  const wb = new Workbox("sw.js");
  wb.addEventListener("waiting", () => {
    wb.addEventListener("controlling", () => {
      console.log("Reloading page for latest content");
      window.location.reload();
    });
    wb.messageSW({type: "SKIP_WAITING"});
    // Old serviceworker message for migration, can be removed in the future
    wb.messageSW("SKIP_WAITING");
  });
  wb.register();
}

useEffect(() => {
    // Connect with workbow to display snackbar when update is available.
    if (process.env.NODE_ENV != "development" && "serviceWorker" in navigator) {
      const wb = new Workbox("/service-worker.js");
      wb.addEventListener("waiting", event => {
        wb.addEventListener("controlling", event => {
          AppActions.reload();
        });

        dispatch(
          AppActions.cacheDidUpdate(() => {
            wb.messageSW({ type: "SKIP_WAITING" });
          })
        );
      });
      wb.register();
    }
  }, []);

import('./lazy-resources.js').then(_ => {
        if ('serviceWorker' in navigator) {
          const wb = new Workbox('/service-worker.js');

          wb.addEventListener('activated', event => {
            if (!event.isUpdate) {
              this._setSnackBarText('Ready to work offline.');
            }

            // Get the current page URL + all resources the page loaded.
            const urlsToCache = [
              location.href,
              ...performance.getEntriesByType('resource').map(r => r.name),
            ];
            // Send that list of URLs to your router in the service worker.
            wb.messageSW({
              type: 'CACHE_URLS',
              payload: {urlsToCache},
            });

initSW() {
            if (!("serviceWorker" in navigator)) {
                return;
            }

            this._wb = new Workbox("/sw.js");

            // Add an event listener to detect when the registered
            // service worker has installed but is waiting to activate.
            this._wb.addEventListener("waiting", () => {
                setTimeout(() => {
                    this._updateReady();
                }, 1000);
            });

            this._wb.register();
        }

import { Workbox } from 'workbox-window'

if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
  const wb = new Workbox(__PWA_SW__, { scope: __PWA_SCOPE__ })

  wb.addEventListener('installed', event => {
    if (!event.isUpdate) {
      console.log('[PWA] service worker installed for first time!')
    } else {
      console.log('[PWA] service worker installed by an update!')
    }
  })
  
  wb.addEventListener('activated', event => {
    if (!event.isUpdate) {
      console.log('[PWA] service worker activated for first time!')
    } else {
      console.log('[PWA] service worker activated by an update!')
    }
  })

mounted() {
        const workbox = (context.workbox = new Workbox(
          `${__PUBLIC_URL__}service-worker.js`
        ))

        let snackbar
        const {
          pwaFirstTimeInstallMessage = 'Ready for offline use',
          pwaUpdateFoundMessage = 'Downloading app updates in the background',
          pwaUpdateReadyMessage = 'A new version of this app is available',
          pwaUpdateButtonMessage = 'UPDATE',
          pwaDismissMessage = 'DISMISS'
        } = this.$siteConfig

        if (notifyUpdates) {
          snackbar = require('@snackbar/core')
          require('@snackbar/core/dist/snackbar.css')

if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  const { Workbox } = require('workbox-window')

  const workbox = new Workbox(`${process.env.PUBLIC_URL}service-worker.js`)

  const addNotifier = () => {
    const { createSnackbar } = require('@egoist/snackbar')
    require('@egoist/snackbar/dist/snackbar.css')

    const pwaFirstTimeInstallMessage = 'Ready for offline use'
    const pwaUpdateReadyMessage = 'A new version of this app is available'
    const pwaUpdateButtonMessage = 'UPDATE'
    const pwaDismissMessage = 'DISMISS'

    const showUpdateNotifier = () => {
      createSnackbar(pwaUpdateReadyMessage, {
        position: 'right',
        timeout: 20000,
        actions: [
          {