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

package/lib/sw.js

@@ -5,143 +5,107 @@
  * LICENSE file in the root directory of this source tree.
  */
 /* eslint-disable no-restricted-globals */
-
-import {PrecacheController} from 'workbox-precaching';
-
+import { PrecacheController } from 'workbox-precaching';
 function parseSwParams() {
-  const params = JSON.parse(
-    new URLSearchParams(self.location.search).get('params'),
-  );
-  if (params.debug) {
-    console.log('[Docusaurus-PWA][SW]: Service Worker params:', params);
-  }
-  return params;
+    const params = JSON.parse(new URLSearchParams(self.location.search).get('params'));
+    if (params.debug) {
+        console.log('[Docusaurus-PWA][SW]: Service Worker params:', params);
+    }
+    return params;
 }
-
 // Doc advises against dynamic imports in SW
 // https://developers.google.com/web/tools/workbox/guides/using-bundlers#code_splitting_and_dynamic_imports
 // https://twitter.com/sebastienlorber/status/1280155204575518720
 // but looks it's working fine as it's inlined by webpack, need to double check
 async function runSWCustomCode(params) {
-  if (process.env.PWA_SW_CUSTOM) {
-    const customSW = await import(process.env.PWA_SW_CUSTOM);
-    if (typeof customSW.default === 'function') {
-      customSW.default(params);
-    } else if (params.debug) {
-      console.warn(
-        '[Docusaurus-PWA][SW]: swCustom should have a default export function',
-      );
+    if (process.env.PWA_SW_CUSTOM) {
+        const customSW = await import(process.env.PWA_SW_CUSTOM);
+        if (typeof customSW.default === 'function') {
+            customSW.default(params);
+        }
+        else if (params.debug) {
+            console.warn('[Docusaurus-PWA][SW]: swCustom should have a default export function');
+        }
     }
-  }
 }
-
 /**
  * Gets different possible variations for a request URL. Similar to
  * https://git.io/JvixK
- *
- * @param {string} url
  */
 function getPossibleURLs(url) {
-  const possibleURLs = [];
-  const urlObject = new URL(url, self.location.href);
-
-  if (urlObject.origin !== self.location.origin) {
-    return possibleURLs;
-  }
-
-  // Ignore search params and hash
-  urlObject.search = '';
-  urlObject.hash = '';
-
-  // /blog.html
-  possibleURLs.push(urlObject.href);
-
-  // /blog/ => /blog/index.html
-  if (urlObject.pathname.endsWith('/')) {
-    possibleURLs.push(`${urlObject.href}index.html`);
-  } else {
-    // /blog => /blog/index.html
-    possibleURLs.push(`${urlObject.href}/index.html`);
-  }
-
-  return possibleURLs;
+    const urlObject = new URL(url, self.location.href);
+    if (urlObject.origin !== self.location.origin) {
+        return [];
+    }
+    // Ignore search params and hash
+    urlObject.search = '';
+    urlObject.hash = '';
+    return [
+        // /blog.html
+        urlObject.href,
+        // /blog/ => /blog/index.html
+        // /blog => /blog/index.html
+        `${urlObject.href}${urlObject.pathname.endsWith('/') ? '' : '/'}index.html`,
+    ];
 }
-
 (async () => {
-  const params = parseSwParams();
-
-  // eslint-disable-next-line no-underscore-dangle
-  const precacheManifest = self.__WB_MANIFEST;
-  const controller = new PrecacheController({
-    // Safer to turn this true?
-    fallbackToNetwork: true,
-  });
-
-  if (params.offlineMode) {
-    controller.addToCacheList(precacheManifest);
-    if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: addToCacheList', {
-        precacheManifest,
-      });
-    }
-  }
-
-  await runSWCustomCode(params);
-
-  self.addEventListener('install', (event) => {
-    if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: install event', {
-        event,
-      });
-    }
-    event.waitUntil(controller.install(event));
-  });
-
-  self.addEventListener('activate', (event) => {
-    if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: activate event', {
-        event,
-      });
-    }
-    event.waitUntil(controller.activate(event));
-  });
-
-  self.addEventListener('fetch', async (event) => {
+    const params = parseSwParams();
+    // eslint-disable-next-line no-underscore-dangle
+    const precacheManifest = self.__WB_MANIFEST;
+    const controller = new PrecacheController({
+        // Safer to turn this true?
+        fallbackToNetwork: true,
+    });
     if (params.offlineMode) {
-      const requestURL = event.request.url;
-      const possibleURLs = getPossibleURLs(requestURL);
-      for (let i = 0; i < possibleURLs.length; i += 1) {
-        const possibleURL = possibleURLs[i];
-        const cacheKey = controller.getCacheKeyForURL(possibleURL);
-        if (cacheKey) {
-          const cachedResponse = caches.match(cacheKey);
-          if (params.debug) {
-            console.log('[Docusaurus-PWA][SW]: serving cached asset', {
-              requestURL,
-              possibleURL,
-              possibleURLs,
-              cacheKey,
-              cachedResponse,
-            });
-          }
-          event.respondWith(cachedResponse);
-          break;
+        controller.addToCacheList(precacheManifest);
+        if (params.debug) {
+            console.log('[Docusaurus-PWA][SW]: addToCacheList', { precacheManifest });
         }
-      }
-    }
-  });
-
-  self.addEventListener('message', async (event) => {
-    if (params.debug) {
-      console.log('[Docusaurus-PWA][SW]: message event', {
-        event,
-      });
-    }
-
-    const type = event.data?.type;
-
-    if (type === 'SKIP_WAITING') {
-      self.skipWaiting();
     }
-  });
+    await runSWCustomCode(params);
+    self.addEventListener('install', (event) => {
+        if (params.debug) {
+            console.log('[Docusaurus-PWA][SW]: install event', { event });
+        }
+        event.waitUntil(controller.install(event));
+    });
+    self.addEventListener('activate', (event) => {
+        if (params.debug) {
+            console.log('[Docusaurus-PWA][SW]: activate event', { event });
+        }
+        event.waitUntil(controller.activate(event));
+    });
+    self.addEventListener('fetch', async (event) => {
+        if (params.offlineMode) {
+            const requestURL = event.request.url;
+            const possibleURLs = getPossibleURLs(requestURL);
+            for (const possibleURL of possibleURLs) {
+                const cacheKey = controller.getCacheKeyForURL(possibleURL);
+                if (cacheKey) {
+                    const cachedResponse = caches.match(cacheKey);
+                    if (params.debug) {
+                        console.log('[Docusaurus-PWA][SW]: serving cached asset', {
+                            requestURL,
+                            possibleURL,
+                            possibleURLs,
+                            cacheKey,
+                            cachedResponse,
+                        });
+                    }
+                    event.respondWith(cachedResponse);
+                    break;
+                }
+            }
+        }
+    });
+    self.addEventListener('message', async (event) => {
+        if (params.debug) {
+            console.log('[Docusaurus-PWA][SW]: message event', { event });
+        }
+        const type = event.data?.type;
+        if (type === 'SKIP_WAITING') {
+            // lib def bug, see https://github.com/microsoft/TypeScript/issues/14877
+            self.skipWaiting();
+        }
+    });
 })();

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,14 @@
 {
   "name": "@docusaurus/plugin-pwa",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "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 ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "publishConfig": {
     "access": "public"
@@ -20,31 +20,34 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@docusaurus/core": "2.0.0-beta.20",
-    "@docusaurus/theme-common": "2.0.0-beta.20",
-    "@docusaurus/theme-translations": "2.0.0-beta.20",
-    "@docusaurus/utils": "2.0.0-beta.20",
-    "@docusaurus/utils-validation": "2.0.0-beta.20",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@docusaurus/core": "2.0.0-beta.21",
+    "@docusaurus/theme-common": "2.0.0-beta.21",
+    "@docusaurus/theme-translations": "2.0.0-beta.21",
+    "@docusaurus/utils": "2.0.0-beta.21",
+    "@docusaurus/utils-validation": "2.0.0-beta.21",
     "babel-loader": "^8.2.5",
     "clsx": "^1.1.1",
-    "core-js": "^3.22.3",
+    "core-js": "^3.22.7",
     "terser-webpack-plugin": "^5.3.1",
     "tslib": "^2.4.0",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "webpack-merge": "^5.8.0",
     "workbox-build": "^6.5.3",
     "workbox-precaching": "^6.5.3",
     "workbox-window": "^6.5.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.20",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.21",
     "fs-extra": "^10.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
-  "gitHead": "ed5cdba401a5948e187e927039b142a0decc702d"
+  "engines": {
+    "node": ">=16.14"
+  },
+  "gitHead": "69ac49fc6909517f13615ee40290c4bd00c39df4"
 }

package/src/index.ts

@@ -5,18 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {HtmlTags, LoadContext, Plugin} from '@docusaurus/types';
-import type {PluginOptions} from '@docusaurus/plugin-pwa';
-import {normalizeUrl} from '@docusaurus/utils';
-import {compile} from '@docusaurus/core/lib/webpack/utils';
-import LogPlugin from '@docusaurus/core/lib/webpack/plugins/LogPlugin';
-import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
-
 import path from 'path';
 import webpack, {type Configuration} from 'webpack';
 import Terser from 'terser-webpack-plugin';
-
 import {injectManifest} from 'workbox-build';
+import {normalizeUrl} from '@docusaurus/utils';
+import {compile} from '@docusaurus/core/lib/webpack/utils';
+import LogPlugin from '@docusaurus/core/lib/webpack/plugins/LogPlugin';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import type {HtmlTags, LoadContext, Plugin} from '@docusaurus/types';
+import type {PluginOptions} from '@docusaurus/plugin-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -54,7 +52,6 @@ export default function pluginPWA(
     debug,
     offlineModeActivationStrategies,
     injectManifestConfig,
-    reloadPopup,
     pwaHead,
     swCustom,
     swRegister,
@@ -91,12 +88,11 @@ export default function pluginPWA(
           new webpack.EnvironmentPlugin({
             PWA_DEBUG: debug,
             PWA_SERVICE_WORKER_URL: path.posix.resolve(
-              `${config.output?.publicPath || '/'}`,
+              `${(config.output?.publicPath as string) || '/'}`,
               'sw.js',
             ),
             PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
               offlineModeActivationStrategies,
-            PWA_RELOAD_POPUP: reloadPopup,
           }),
         ],
       };
@@ -104,7 +100,7 @@ export default function pluginPWA(
 
     injectHtmlTags() {
       const headTags: HtmlTags = [];
-      if (isProd && pwaHead) {
+      if (isProd) {
         pwaHead.forEach(({tagName, ...attributes}) => {
           (['href', 'content'] as const).forEach((attribute) => {
             const attributeValue = attributes[attribute];
@@ -162,7 +158,7 @@ export default function pluginPWA(
         plugins: [
           new webpack.EnvironmentPlugin({
             // Fallback value required with Webpack 5
-            PWA_SW_CUSTOM: swCustom || '',
+            PWA_SW_CUSTOM: swCustom ?? '',
           }),
           new LogPlugin({
             name: 'Service Worker',
@@ -191,7 +187,7 @@ export default function pluginPWA(
           '**/*.{png,jpg,jpeg,gif,svg,ico}',
           '**/*.{woff,woff2,eot,ttf,otf}',
           // @ts-expect-error: internal API?
-          ...(injectManifest.globPatterns ?? []),
+          ...((injectManifest.globPatterns as string[] | undefined) ?? []),
         ],
         // Those attributes are not overrideable
         swDest,

package/src/options.ts

@@ -20,10 +20,9 @@ const DEFAULT_OPTIONS = {
   pwaHead: [],
   swCustom: undefined,
   swRegister: './registerSw.js',
-  reloadPopup: '@theme/PwaReloadPopup',
 };
 
-const Schema = Joi.object({
+const optionsSchema = Joi.object<PluginOptions>({
   debug: Joi.bool().default(DEFAULT_OPTIONS.debug),
   offlineModeActivationStrategies: Joi.array()
     .items(
@@ -49,14 +48,16 @@ const Schema = Joi.object({
   swRegister: Joi.alternatives()
     .try(Joi.string(), Joi.bool().valid(false))
     .default(DEFAULT_OPTIONS.swRegister),
-  reloadPopup: Joi.alternatives()
-    .try(Joi.string(), Joi.bool().valid(false))
-    .default(DEFAULT_OPTIONS.reloadPopup),
+  // @ts-expect-error: forbidden
+  reloadPopup: 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.',
+  }),
 });
 
 export function validateOptions({
   validate,
   options,
 }: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions {
-  return validate(Schema, options);
+  return validate(optionsSchema, options);
 }

package/src/plugin-pwa.d.ts

@@ -46,16 +46,6 @@ declare module '@docusaurus/plugin-pwa' {
      * @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest
      */
     injectManifestConfig: InjectManifestOptions;
-    /**
-     * Module path to reload popup component. This popup is rendered when a new
-     * service worker is waiting to be installed, and we suggest a reload to
-     * the user.
-     *
-     * Passing `false` will disable the popup, but this is not recommended:
-     * users won't have a way to get up-to-date content.
-     * @see {@link @theme/PwaReloadPopup}
-     */
-    reloadPopup: string | false;
     /**
      * Array of objects containing `tagName` and key-value pairs for attributes
      * to inject into the `<head>` tag. Technically you can inject any head tag

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

@@ -9,10 +9,9 @@ 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_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL!;
+const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env
+  .PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[];
 const PWA_DEBUG = process.env.PWA_DEBUG;
 /* eslint-enable prefer-destructuring */
 
@@ -34,7 +33,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 +64,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?: {effectiveType: string; saveData: boolean};
+  }
+}
+
 async function isAppInstalledRelatedApps() {
   if ('getInstalledRelatedApps' in window.navigator) {
     const relatedApps = await navigator.getInstalledRelatedApps();
@@ -90,7 +97,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 +136,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,
@@ -160,7 +169,7 @@ async function registerSW() {
     // Immediately load new service worker when files aren't cached
     if (!offlineMode) {
       sendSkipWaiting();
-    } else if (PWA_RELOAD_POPUP) {
+    } else {
       const renderReloadPopup = (await import('./renderReloadPopup')).default;
       await renderReloadPopup({
         onReload() {
@@ -173,7 +182,7 @@ async function registerSW() {
     }
   };
 
-  if (debug) {
+  if (debug && registration) {
     if (registration.active) {
       console.log(
         '[Docusaurus-PWA][registerSw]: registration.active',
@@ -205,6 +214,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 +224,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();
   }
 }
@@ -301,6 +311,6 @@ if (typeof window !== 'undefined') {
     addLegacyAppInstalledEventsListeners();
 
     // Then try to register the SW using lazy/dynamic imports
-    registerSW().catch((e) => console.error('registerSW failed', e));
+    registerSW().catch((e: unknown) => console.error('registerSW failed', e));
   }
 }

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

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