@docusaurus/plugin-pwa 0.0.0-5012 → 0.0.0-5024

package/lib/registerSw.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare global {
+    namespace NodeJS {
+        interface ProcessEnv {
+            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: (keyof typeof OfflineModeActivationStrategiesImplementations)[];
+        }
+    }
+}
+declare global {
+    interface Navigator {
+        getInstalledRelatedApps: () => Promise<{
+            platform: string;
+        }[]>;
+        connection: {
+            saveData: boolean;
+        };
+    }
+}
+declare const OfflineModeActivationStrategiesImplementations: {
+    always: () => boolean;
+    mobile: () => boolean;
+    saveData: () => boolean;
+    appInstalled: () => Promise<boolean>;
+    standalone: () => boolean;
+    queryString: () => boolean;
+};
+export {};

package/lib/registerSw.js

@@ -4,55 +4,33 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-import {createStorageSlot} from '@docusaurus/theme-common';
-
+import { createStorageSlot } from '@docusaurus/theme-common';
 // First: read the env variables (provided by Webpack)
 /* eslint-disable prefer-destructuring */
 const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL;
 const PWA_RELOAD_POPUP = process.env.PWA_RELOAD_POPUP;
-const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES =
-  process.env.PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES;
+const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env.PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES;
 const PWA_DEBUG = process.env.PWA_DEBUG;
 /* eslint-enable prefer-destructuring */
-
 const debug = PWA_DEBUG; // Shortcut
-
 const MAX_MOBILE_WIDTH = 940;
-
-const AppInstalledEventFiredStorage = createStorageSlot(
-  'docusaurus.pwa.event.appInstalled.fired',
-);
-
+const AppInstalledEventFiredStorage = createStorageSlot('docusaurus.pwa.event.appInstalled.fired');
 async function clearRegistrations() {
-  const registrations = await navigator.serviceWorker.getRegistrations();
-  if (debug) {
-    console.log(
-      `[Docusaurus-PWA][registerSw]: will unregister all service worker registrations`,
-      registrations,
-    );
-  }
-  await Promise.all(
-    registrations.map(async (registration) => {
-      const result = await registration?.registration?.unregister();
-      if (debug) {
-        console.log(
-          `[Docusaurus-PWA][registerSw]: unregister() service worker registration`,
-          registrations,
-          result,
-        );
-      }
-    }),
-  );
-  if (debug) {
-    console.log(
-      `[Docusaurus-PWA][registerSw]: unregistered all service worker registrations`,
-      registrations,
-    );
-  }
-  window.location.reload();
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    if (debug) {
+        console.log(`[Docusaurus-PWA][registerSw]: will unregister all service worker registrations`, registrations);
+    }
+    await Promise.all(registrations.map(async (registration) => {
+        const result = await registration?.unregister();
+        if (debug) {
+            console.log(`[Docusaurus-PWA][registerSw]: unregister() service worker registration`, registrations, result);
+        }
+    }));
+    if (debug) {
+        console.log(`[Docusaurus-PWA][registerSw]: unregistered all service worker registrations`, registrations);
+    }
+    window.location.reload();
 }
-
 /*
 As of 2021:
 It is complicated and not very reliable to detect an app is actually installed.
@@ -63,244 +41,189 @@ https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed
 - display-mode: standalone is not exactly the same concept, but looks like a decent fallback https://petelepage.com/blog/2019/07/is-my-pwa-installed/
  */
 async function isAppInstalledEventFired() {
-  return AppInstalledEventFiredStorage.get() === 'true';
+    return AppInstalledEventFiredStorage.get() === 'true';
 }
 async function isAppInstalledRelatedApps() {
-  if ('getInstalledRelatedApps' in window.navigator) {
-    const relatedApps = await navigator.getInstalledRelatedApps();
-    return relatedApps.some((app) => app.platform === 'webapp');
-  }
-  return false;
+    if ('getInstalledRelatedApps' in window.navigator) {
+        const relatedApps = await navigator.getInstalledRelatedApps();
+        return relatedApps.some((app) => app.platform === 'webapp');
+    }
+    return false;
 }
 function isStandaloneDisplayMode() {
-  return window.matchMedia('(display-mode: standalone)').matches;
+    return window.matchMedia('(display-mode: standalone)').matches;
 }
-
 const OfflineModeActivationStrategiesImplementations = {
-  always: () => true,
-  mobile: () => window.innerWidth <= MAX_MOBILE_WIDTH,
-  saveData: () => !!navigator.connection?.saveData,
-  appInstalled: async () => {
-    const installedEventFired = await isAppInstalledEventFired();
-    const installedRelatedApps = await isAppInstalledRelatedApps();
-    return installedEventFired || installedRelatedApps;
-  },
-  standalone: () => isStandaloneDisplayMode(),
-  queryString: () =>
-    new URLSearchParams(window.location.search).get('offlineMode') === 'true',
+    always: () => true,
+    mobile: () => window.innerWidth <= MAX_MOBILE_WIDTH,
+    saveData: () => !!navigator.connection?.saveData,
+    appInstalled: async () => {
+        const installedEventFired = await isAppInstalledEventFired();
+        const installedRelatedApps = await isAppInstalledRelatedApps();
+        return installedEventFired || installedRelatedApps;
+    },
+    standalone: () => isStandaloneDisplayMode(),
+    queryString: () => new URLSearchParams(window.location.search).get('offlineMode') === 'true',
 };
-
 async function isStrategyActive(strategyName) {
-  return OfflineModeActivationStrategiesImplementations[strategyName]();
+    return OfflineModeActivationStrategiesImplementations[strategyName]();
 }
-
 async function getActiveStrategies() {
-  const activeStrategies = await Promise.all(
-    PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES.map(async (strategyName) => {
-      const isActive = await isStrategyActive(strategyName);
-      return isActive ? strategyName : undefined;
-    }),
-  );
-  return activeStrategies.filter(Boolean);
+    const activeStrategies = await Promise.all(PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES.map(async (strategyName) => {
+        const isActive = await isStrategyActive(strategyName);
+        return isActive ? strategyName : undefined;
+    }));
+    return activeStrategies.filter(Boolean);
 }
-
 async function isOfflineModeEnabled() {
-  const activeStrategies = await getActiveStrategies();
-  const enabled = activeStrategies.length > 0;
-  if (debug) {
-    const logObject = {
-      activeStrategies,
-      availableStrategies: PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES,
-    };
-    if (enabled) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: offline mode enabled, because of activation strategies',
-        logObject,
-      );
-    } else {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: offline mode disabled, because none of the offlineModeActivationStrategies could be used',
-        logObject,
-      );
+    const activeStrategies = await getActiveStrategies();
+    const enabled = activeStrategies.length > 0;
+    if (debug) {
+        const logObject = {
+            activeStrategies,
+            availableStrategies: PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES,
+        };
+        if (enabled) {
+            console.log('[Docusaurus-PWA][registerSw]: offline mode enabled, because of activation strategies', logObject);
+        }
+        else {
+            console.log('[Docusaurus-PWA][registerSw]: offline mode disabled, because none of the offlineModeActivationStrategies could be used', logObject);
+        }
     }
-  }
-  return enabled;
+    return enabled;
 }
-
 function createServiceWorkerUrl(params) {
-  const paramsQueryString = JSON.stringify(params);
-  const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent(
-    paramsQueryString,
-  )}`;
-  if (debug) {
-    console.log(`[Docusaurus-PWA][registerSw]: service worker url`, {
-      url,
-      params,
-    });
-  }
-  return url;
-}
-
-async function registerSW() {
-  const {Workbox} = await import('workbox-window');
-
-  const offlineMode = await isOfflineModeEnabled();
-
-  const url = createServiceWorkerUrl({offlineMode, debug});
-  const wb = new Workbox(url);
-
-  const registration = await wb.register();
-
-  const sendSkipWaiting = () => wb.messageSW({type: 'SKIP_WAITING'});
-
-  const handleServiceWorkerWaiting = async () => {
+    const paramsQueryString = JSON.stringify(params);
+    const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent(paramsQueryString)}`;
     if (debug) {
-      console.log('[Docusaurus-PWA][registerSw]: handleServiceWorkerWaiting');
-    }
-    // Immediately load new service worker when files aren't cached
-    if (!offlineMode) {
-      sendSkipWaiting();
-    } else if (PWA_RELOAD_POPUP) {
-      const renderReloadPopup = (await import('./renderReloadPopup')).default;
-      await renderReloadPopup({
-        onReload() {
-          wb.addEventListener('controlling', () => {
-            window.location.reload();
-          });
-          sendSkipWaiting();
-        },
-      });
-    }
-  };
-
-  if (debug) {
-    if (registration.active) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: registration.active',
-        registration,
-      );
+        console.log(`[Docusaurus-PWA][registerSw]: service worker url`, {
+            url,
+            params,
+        });
     }
-    if (registration.installing) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: registration.installing',
-        registration,
-      );
-    }
-    if (registration.waiting) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: registration.waiting',
-        registration,
-      );
-    }
-  }
-
-  // Update the current service worker when the next one has finished
-  // installing and transitions to waiting state.
-  wb.addEventListener('waiting', (event) => {
-    if (debug) {
-      console.log('[Docusaurus-PWA][registerSw]: event waiting', event);
+    return url;
+}
+async function registerSW() {
+    const { Workbox } = await import('workbox-window');
+    const offlineMode = await isOfflineModeEnabled();
+    const url = createServiceWorkerUrl({ offlineMode, debug });
+    const wb = new Workbox(url);
+    const registration = await wb.register();
+    const sendSkipWaiting = () => wb.messageSW({ type: 'SKIP_WAITING' });
+    const handleServiceWorkerWaiting = async () => {
+        if (debug) {
+            console.log('[Docusaurus-PWA][registerSw]: handleServiceWorkerWaiting');
+        }
+        // Immediately load new service worker when files aren't cached
+        if (!offlineMode) {
+            sendSkipWaiting();
+        }
+        else if (PWA_RELOAD_POPUP) {
+            const renderReloadPopup = (await import('./renderReloadPopup')).default;
+            await renderReloadPopup({
+                onReload() {
+                    wb.addEventListener('controlling', () => {
+                        window.location.reload();
+                    });
+                    sendSkipWaiting();
+                },
+            });
+        }
+    };
+    if (debug && registration) {
+        if (registration.active) {
+            console.log('[Docusaurus-PWA][registerSw]: registration.active', registration);
+        }
+        if (registration.installing) {
+            console.log('[Docusaurus-PWA][registerSw]: registration.installing', registration);
+        }
+        if (registration.waiting) {
+            console.log('[Docusaurus-PWA][registerSw]: registration.waiting', registration);
+        }
     }
-    handleServiceWorkerWaiting();
-  });
-
-  // Update current service worker if the next one finishes installing and
-  // moves to waiting state in another tab.
-  wb.addEventListener('externalwaiting', (event) => {
-    if (debug) {
-      console.log('[Docusaurus-PWA][registerSw]: event externalwaiting', event);
+    // Update the current service worker when the next one has finished
+    // installing and transitions to waiting state.
+    wb.addEventListener('waiting', (event) => {
+        if (debug) {
+            console.log('[Docusaurus-PWA][registerSw]: event waiting', event);
+        }
+        handleServiceWorkerWaiting();
+    });
+    // Update current service worker if the next one finishes installing and
+    // moves to waiting state in another tab.
+    // @ts-expect-error: not present in the API typings anymore
+    wb.addEventListener('externalwaiting', (event) => {
+        if (debug) {
+            console.log('[Docusaurus-PWA][registerSw]: event externalwaiting', event);
+        }
+        handleServiceWorkerWaiting();
+    });
+    // Update service worker if the next one is already in the waiting state.
+    // This happens when the user doesn't click on `reload` in the popup.
+    if (registration?.waiting) {
+        await handleServiceWorkerWaiting();
     }
-    handleServiceWorkerWaiting();
-  });
-
-  // Update service worker if the next one is already in the waiting state.
-  // This happens when the user doesn't click on `reload` in the popup.
-  if (registration.waiting) {
-    await handleServiceWorkerWaiting();
-  }
 }
-
 // TODO these events still works in chrome but have been removed from the spec
 // in 2019! See https://github.com/w3c/manifest/pull/836
 function addLegacyAppInstalledEventsListeners() {
-  if (typeof window !== 'undefined') {
-    if (debug) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: addLegacyAppInstalledEventsListeners',
-      );
-    }
-
-    window.addEventListener('appinstalled', async (event) => {
-      if (debug) {
-        console.log('[Docusaurus-PWA][registerSw]: event appinstalled', event);
-      }
-
-      AppInstalledEventFiredStorage.set('true');
-      if (debug) {
-        console.log(
-          "[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.set('true')",
-        );
-      }
-
-      // After the app is installed, we register a service worker with the path
-      // `/sw?enabled`. Since the previous service worker was `/sw`, it'll be
-      // treated as a new one. The previous registration will need to be
-      // cleared, otherwise the reload popup will show.
-      await clearRegistrations();
-    });
-
-    // TODO this event still works in chrome but has been removed from the spec
-    // in 2019!!!
-    window.addEventListener('beforeinstallprompt', async (event) => {
-      if (debug) {
-        console.log(
-          '[Docusaurus-PWA][registerSw]: event beforeinstallprompt',
-          event,
-        );
-      }
-      // TODO instead of default browser install UI, show custom docusaurus
-      // prompt?
-      // event.preventDefault();
-      if (debug) {
-        console.log(
-          '[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.get()',
-          AppInstalledEventFiredStorage.get(),
-        );
-      }
-      if (AppInstalledEventFiredStorage.get()) {
-        AppInstalledEventFiredStorage.del();
+    if (typeof window !== 'undefined') {
         if (debug) {
-          console.log(
-            '[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.del()',
-          );
+            console.log('[Docusaurus-PWA][registerSw]: addLegacyAppInstalledEventsListeners');
+        }
+        window.addEventListener('appinstalled', async (event) => {
+            if (debug) {
+                console.log('[Docusaurus-PWA][registerSw]: event appinstalled', event);
+            }
+            AppInstalledEventFiredStorage.set('true');
+            if (debug) {
+                console.log("[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.set('true')");
+            }
+            // After the app is installed, we register a service worker with the path
+            // `/sw?enabled`. Since the previous service worker was `/sw`, it'll be
+            // treated as a new one. The previous registration will need to be
+            // cleared, otherwise the reload popup will show.
+            await clearRegistrations();
+        });
+        // TODO this event still works in chrome but has been removed from the spec
+        // in 2019!!!
+        window.addEventListener('beforeinstallprompt', async (event) => {
+            if (debug) {
+                console.log('[Docusaurus-PWA][registerSw]: event beforeinstallprompt', event);
+            }
+            // TODO instead of default browser install UI, show custom docusaurus
+            // prompt?
+            // event.preventDefault();
+            if (debug) {
+                console.log('[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.get()', AppInstalledEventFiredStorage.get());
+            }
+            if (AppInstalledEventFiredStorage.get()) {
+                AppInstalledEventFiredStorage.del();
+                if (debug) {
+                    console.log('[Docusaurus-PWA][registerSw]: AppInstalledEventFiredStorage.del()');
+                }
+                // After uninstalling the app, if the user doesn't clear all data, then
+                // the previous service worker will continue serving cached files. We
+                // need to clear registrations and reload, otherwise the popup shows.
+                await clearRegistrations();
+            }
+        });
+        if (debug) {
+            console.log('[Docusaurus-PWA][registerSw]: legacy appinstalled and beforeinstallprompt event listeners installed');
         }
-        // After uninstalling the app, if the user doesn't clear all data, then
-        // the previous service worker will continue serving cached files. We
-        // need to clear registrations and reload, otherwise the popup shows.
-        await clearRegistrations();
-      }
-    });
-
-    if (debug) {
-      console.log(
-        '[Docusaurus-PWA][registerSw]: legacy appinstalled and beforeinstallprompt event listeners installed',
-      );
     }
-  }
 }
-
 /*
 Init code to run on the client!
  */
 if (typeof window !== 'undefined') {
-  if (debug) {
-    console.log('[Docusaurus-PWA][registerSw]: debug mode enabled');
-  }
-
-  if ('serviceWorker' in navigator) {
-    // First: add the listeners asap/synchronously
-    addLegacyAppInstalledEventsListeners();
-
-    // Then try to register the SW using lazy/dynamic imports
-    registerSW().catch((e) => console.error('registerSW failed', e));
-  }
+    if (debug) {
+        console.log('[Docusaurus-PWA][registerSw]: debug mode enabled');
+    }
+    if ('serviceWorker' in navigator) {
+        // First: add the listeners asap/synchronously
+        addLegacyAppInstalledEventsListeners();
+        // Then try to register the SW using lazy/dynamic imports
+        registerSW().catch((e) => console.error('registerSW failed', e));
+    }
 }

package/lib/renderReloadPopup.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export default function renderReloadPopup(props: {
+    onReload: () => void;
+}): Promise<void>;

package/lib/renderReloadPopup.js

@@ -4,23 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React from 'react';
-import {render} from 'react-dom';
-
+import ReactDOM from 'react-dom';
 const POPUP_CONTAINER_ID = 'pwa-popup-container';
-
 const getContainer = () => document.getElementById(POPUP_CONTAINER_ID);
-
 const createContainer = () => {
-  const container = document.createElement('div');
-  container.id = POPUP_CONTAINER_ID;
-  document.body.appendChild(container);
-  return container;
+    const container = document.createElement('div');
+    container.id = POPUP_CONTAINER_ID;
+    document.body.appendChild(container);
+    return container;
 };
-
 export default async function renderReloadPopup(props) {
-  const container = getContainer() || createContainer();
-  const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP);
-  render(<ReloadPopup {...props} />, container);
+    const container = getContainer() || createContainer();
+    const { default: ReloadPopup } = await import(process.env.PWA_RELOAD_POPUP);
+    ReactDOM.render(<ReloadPopup {...props}/>, container);
 }

package/lib/theme/PwaReloadPopup/index.js

@@ -4,35 +4,51 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import clsx from 'clsx';
-import Translate, { translate } from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
-export default function PwaReloadPopup({ onReload }) {
-    const [isVisible, setIsVisible] = useState(true);
-    return (isVisible && (<div className={clsx('alert', 'alert--secondary', styles.popup)}>
+export default function PwaReloadPopup({onReload}) {
+  const [isVisible, setIsVisible] = useState(true);
+  return (
+    isVisible && (
+      <div className={clsx('alert', 'alert--secondary', styles.popup)}>
         <p>
-          <Translate id="theme.PwaReloadPopup.info" description="The text for PWA reload popup">
+          <Translate
+            id="theme.PwaReloadPopup.info"
+            description="The text for PWA reload popup">
             New version available
           </Translate>
         </p>
         <div className={styles.buttonContainer}>
-          <button className="button button--link" type="button" onClick={() => {
-            setIsVisible(false);
-            onReload();
-        }}>
-            <Translate id="theme.PwaReloadPopup.refreshButtonText" description="The text for PWA reload button">
+          <button
+            className="button button--link"
+            type="button"
+            onClick={() => {
+              setIsVisible(false);
+              onReload();
+            }}>
+            <Translate
+              id="theme.PwaReloadPopup.refreshButtonText"
+              description="The text for PWA reload button">
               Refresh
             </Translate>
           </button>
 
-          <button aria-label={translate({
-            id: 'theme.PwaReloadPopup.closeButtonAriaLabel',
-            message: 'Close',
-            description: 'The ARIA label for close button of PWA reload popup',
-        })} className="close" type="button" onClick={() => setIsVisible(false)}>
+          <button
+            aria-label={translate({
+              id: 'theme.PwaReloadPopup.closeButtonAriaLabel',
+              message: 'Close',
+              description:
+                'The ARIA label for close button of PWA reload popup',
+            })}
+            className="close"
+            type="button"
+            onClick={() => setIsVisible(false)}>
             <span aria-hidden="true">×</span>
           </button>
         </div>
-      </div>));
+      </div>
+    )
+  );
 }

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@docusaurus/plugin-pwa",
-  "version": "0.0.0-5012",
+  "version": "0.0.0-5024",
   "description": "Docusaurus Plugin to add PWA support.",
   "main": "lib/index.js",
   "types": "src/plugin-pwa.d.ts",
   "scripts": {
-    "build": "yarn build:server && yarn build:browser && yarn build:copy",
-    "build:server": "tsc --project tsconfig.server.json",
-    "build:browser": "tsc --project tsconfig.browser.json",
-    "build:copy": "node copyUntypedFiles.mjs"
+    "build": "tsc --build && node copyUntypedFiles.mjs && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\""
   },
   "publishConfig": {
     "access": "public"
@@ -20,13 +17,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@docusaurus/core": "0.0.0-5012",
-    "@docusaurus/theme-common": "0.0.0-5012",
-    "@docusaurus/theme-translations": "0.0.0-5012",
-    "@docusaurus/utils": "0.0.0-5012",
-    "@docusaurus/utils-validation": "0.0.0-5012",
+    "@babel/core": "^7.17.12",
+    "@babel/preset-env": "^7.17.12",
+    "@docusaurus/core": "0.0.0-5024",
+    "@docusaurus/theme-common": "0.0.0-5024",
+    "@docusaurus/theme-translations": "0.0.0-5024",
+    "@docusaurus/utils": "0.0.0-5024",
+    "@docusaurus/utils-validation": "0.0.0-5024",
     "babel-loader": "^8.2.5",
     "clsx": "^1.1.1",
     "core-js": "^3.22.5",
@@ -39,12 +36,12 @@
     "workbox-window": "^6.5.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-5012",
+    "@docusaurus/module-type-aliases": "0.0.0-5024",
     "fs-extra": "^10.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
-  "gitHead": "23b7a134145506adf6db87c8e81640e3633c13ec"
+  "gitHead": "9d61f0a1f0c1121d25211afbb0fc45a92ca3b2ec"
 }

package/src/{registerSw.js → registerSw.ts}

@@ -7,6 +7,14 @@
 
 import {createStorageSlot} from '@docusaurus/theme-common';
 
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: (keyof typeof OfflineModeActivationStrategiesImplementations)[];
+    }
+  }
+}
+
 // First: read the env variables (provided by Webpack)
 /* eslint-disable prefer-destructuring */
 const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL;
@@ -34,7 +42,7 @@ async function clearRegistrations() {
   }
   await Promise.all(
     registrations.map(async (registration) => {
-      const result = await registration?.registration?.unregister();
+      const result = await registration?.unregister();
       if (debug) {
         console.log(
           `[Docusaurus-PWA][registerSw]: unregister() service worker registration`,
@@ -65,6 +73,14 @@ https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed
 async function isAppInstalledEventFired() {
   return AppInstalledEventFiredStorage.get() === 'true';
 }
+
+declare global {
+  interface Navigator {
+    getInstalledRelatedApps: () => Promise<{platform: string}[]>;
+    connection: {saveData: boolean};
+  }
+}
+
 async function isAppInstalledRelatedApps() {
   if ('getInstalledRelatedApps' in window.navigator) {
     const relatedApps = await navigator.getInstalledRelatedApps();
@@ -90,7 +106,9 @@ const OfflineModeActivationStrategiesImplementations = {
     new URLSearchParams(window.location.search).get('offlineMode') === 'true',
 };
 
-async function isStrategyActive(strategyName) {
+async function isStrategyActive(
+  strategyName: keyof typeof OfflineModeActivationStrategiesImplementations,
+) {
   return OfflineModeActivationStrategiesImplementations[strategyName]();
 }
 
@@ -127,7 +145,7 @@ async function isOfflineModeEnabled() {
   return enabled;
 }
 
-function createServiceWorkerUrl(params) {
+function createServiceWorkerUrl(params: object) {
   const paramsQueryString = JSON.stringify(params);
   const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent(
     paramsQueryString,
@@ -173,7 +191,7 @@ async function registerSW() {
     }
   };
 
-  if (debug) {
+  if (debug && registration) {
     if (registration.active) {
       console.log(
         '[Docusaurus-PWA][registerSw]: registration.active',
@@ -205,6 +223,7 @@ async function registerSW() {
 
   // Update current service worker if the next one finishes installing and
   // moves to waiting state in another tab.
+  // @ts-expect-error: not present in the API typings anymore
   wb.addEventListener('externalwaiting', (event) => {
     if (debug) {
       console.log('[Docusaurus-PWA][registerSw]: event externalwaiting', event);
@@ -214,7 +233,7 @@ async function registerSW() {
 
   // Update service worker if the next one is already in the waiting state.
   // This happens when the user doesn't click on `reload` in the popup.
-  if (registration.waiting) {
+  if (registration?.waiting) {
     await handleServiceWorkerWaiting();
   }
 }

package/src/{renderReloadPopup.js → renderReloadPopup.tsx}

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {render} from 'react-dom';
+import ReactDOM from 'react-dom';
 
 const POPUP_CONTAINER_ID = 'pwa-popup-container';
 
@@ -19,8 +19,10 @@ const createContainer = () => {
   return container;
 };
 
-export default async function renderReloadPopup(props) {
+export default async function renderReloadPopup(props: {
+  onReload: () => void;
+}): Promise<void> {
   const container = getContainer() || createContainer();
-  const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP);
-  render(<ReloadPopup {...props} />, container);
+  const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP!);
+  ReactDOM.render(<ReloadPopup {...props} />, container);
 }