@docusaurus/plugin-pwa 2.0.0-beta.20 → 2.0.0-beta.21

package/lib/index.js

@@ -8,14 +8,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateOptions = void 0;
 const tslib_1 = require("tslib");
-const utils_1 = require("@docusaurus/utils");
-const utils_2 = require("@docusaurus/core/lib/webpack/utils");
-const LogPlugin_1 = tslib_1.__importDefault(require("@docusaurus/core/lib/webpack/plugins/LogPlugin"));
-const theme_translations_1 = require("@docusaurus/theme-translations");
 const path_1 = tslib_1.__importDefault(require("path"));
 const webpack_1 = tslib_1.__importDefault(require("webpack"));
 const terser_webpack_plugin_1 = tslib_1.__importDefault(require("terser-webpack-plugin"));
 const workbox_build_1 = require("workbox-build");
+const utils_1 = require("@docusaurus/utils");
+const utils_2 = require("@docusaurus/core/lib/webpack/utils");
+const LogPlugin_1 = tslib_1.__importDefault(require("@docusaurus/core/lib/webpack/plugins/LogPlugin"));
+const theme_translations_1 = require("@docusaurus/theme-translations");
 const isProd = process.env.NODE_ENV === 'production';
 function getSWBabelLoader() {
     return {
@@ -39,7 +39,7 @@ function getSWBabelLoader() {
 }
 function pluginPWA(context, options) {
     const { outDir, baseUrl, i18n: { currentLocale }, } = context;
-    const { debug, offlineModeActivationStrategies, injectManifestConfig, reloadPopup, pwaHead, swCustom, swRegister, } = options;
+    const { debug, offlineModeActivationStrategies, injectManifestConfig, pwaHead, swCustom, swRegister, } = options;
     return {
         name: 'docusaurus-plugin-pwa',
         getThemePath() {
@@ -67,14 +67,13 @@ function pluginPWA(context, options) {
                         PWA_DEBUG: debug,
                         PWA_SERVICE_WORKER_URL: path_1.default.posix.resolve(`${config.output?.publicPath || '/'}`, 'sw.js'),
                         PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies,
-                        PWA_RELOAD_POPUP: reloadPopup,
                     }),
                 ],
             };
         },
         injectHtmlTags() {
             const headTags = [];
-            if (isProd && pwaHead) {
+            if (isProd) {
                 pwaHead.forEach(({ tagName, ...attributes }) => {
                     ['href', 'content'].forEach((attribute) => {
                         const attributeValue = attributes[attribute];
@@ -124,7 +123,7 @@ function pluginPWA(context, options) {
                 plugins: [
                     new webpack_1.default.EnvironmentPlugin({
                         // Fallback value required with Webpack 5
-                        PWA_SW_CUSTOM: swCustom || '',
+                        PWA_SW_CUSTOM: swCustom ?? '',
                     }),
                     new LogPlugin_1.default({
                         name: 'Service Worker',

package/lib/options.js

@@ -19,9 +19,8 @@ const DEFAULT_OPTIONS = {
     pwaHead: [],
     swCustom: undefined,
     swRegister: './registerSw.js',
-    reloadPopup: '@theme/PwaReloadPopup',
 };
-const Schema = utils_validation_1.Joi.object({
+const optionsSchema = utils_validation_1.Joi.object({
     debug: utils_validation_1.Joi.bool().default(DEFAULT_OPTIONS.debug),
     offlineModeActivationStrategies: utils_validation_1.Joi.array()
         .items(utils_validation_1.Joi.string()
@@ -36,11 +35,12 @@ const Schema = utils_validation_1.Joi.object({
     swRegister: utils_validation_1.Joi.alternatives()
         .try(utils_validation_1.Joi.string(), utils_validation_1.Joi.bool().valid(false))
         .default(DEFAULT_OPTIONS.swRegister),
-    reloadPopup: utils_validation_1.Joi.alternatives()
-        .try(utils_validation_1.Joi.string(), utils_validation_1.Joi.bool().valid(false))
-        .default(DEFAULT_OPTIONS.reloadPopup),
+    // @ts-expect-error: forbidden
+    reloadPopup: utils_validation_1.Joi.any().forbidden().messages({
+        'any.unknown': 'The reloadPopup option is removed in favor of swizzling. See https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa#customizing-reload-popup for how to customize the reload popup using swizzling.',
+    }),
 });
 function validateOptions({ validate, options, }) {
-    return validate(Schema, options);
+    return validate(optionsSchema, options);
 }
 exports.validateOptions = validateOptions;

package/lib/registerSw.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 {
+    interface Navigator {
+        getInstalledRelatedApps: () => Promise<{
+            platform: string;
+        }[]>;
+        connection?: {
+            effectiveType: string;
+            saveData: 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 {
+            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,8 @@
+/**
+ * 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.
+ */
+import type { Props } from '@theme/PwaReloadPopup';
+export default function renderReloadPopup(props: Props): 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 ReloadPopup = (await import('@theme/PwaReloadPopup')).default;
+    ReactDOM.render(<ReloadPopup {...props}/>, container);
 }

package/lib/sw.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 {};