How to use workbox-window - 10 common examples

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);

workbox.register(registerOptions);

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

//==============================================================================
// WorkboxWindow.messageSW
//==============================================================================

export namespace MessageSWTest {
    declare const data: any;
    declare const worker: ServiceWorker;

    // $ExpectType Promise
    messageSW(worker, data);
}

}

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();
        }

export const init = async () => {
  // Instantiating the Workbox instance adds an event listener to
  // `navigator.serviceWorker`, which will be undefined in older browsers.
  wb = new Workbox('/sw.js');

  addNavigationReportListener();
  addFirstInstalledListener();
  addCacheUpdateListener();
  addSWUpdateListener();

  const {log} = await import('./log');
  log.awaitBeforeSending(setSiteVersionOrTimeout());
  log.awaitBeforeSending(setNavigationCacheOrTimeout());

  // Calling register must happen after all presend dependencies get added.
  await 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!')
    }
  })