@docusaurus/plugin-pwa 2.0.0-beta.1decd6f80 → 2.0.0-beta.20

package/lib/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { LoadContext, Plugin } from '@docusaurus/types';
+import type { PluginOptions } from '@docusaurus/plugin-pwa';
+export default function pluginPWA(context: LoadContext, options: PluginOptions): Plugin<void>;
+export { validateOptions } from './options';

package/lib/index.js

@@ -0,0 +1,165 @@
+"use strict";
+/**
+ * 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.
+ */
+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 isProd = process.env.NODE_ENV === 'production';
+function getSWBabelLoader() {
+    return {
+        loader: 'babel-loader',
+        options: {
+            babelrc: false,
+            configFile: false,
+            presets: [
+                [
+                    require.resolve('@babel/preset-env'),
+                    {
+                        useBuiltIns: 'entry',
+                        corejs: '3',
+                        // See https://twitter.com/jeffposnick/status/1280223070876315649
+                        targets: 'chrome >= 56',
+                    },
+                ],
+            ],
+        },
+    };
+}
+function pluginPWA(context, options) {
+    const { outDir, baseUrl, i18n: { currentLocale }, } = context;
+    const { debug, offlineModeActivationStrategies, injectManifestConfig, reloadPopup, pwaHead, swCustom, swRegister, } = options;
+    return {
+        name: 'docusaurus-plugin-pwa',
+        getThemePath() {
+            return '../lib/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+        getClientModules() {
+            return isProd && swRegister ? [swRegister] : [];
+        },
+        getDefaultCodeTranslationMessages() {
+            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+                locale: currentLocale,
+                name: 'plugin-pwa',
+            });
+        },
+        configureWebpack(config) {
+            if (!isProd) {
+                return {};
+            }
+            return {
+                plugins: [
+                    new webpack_1.default.EnvironmentPlugin({
+                        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) {
+                pwaHead.forEach(({ tagName, ...attributes }) => {
+                    ['href', 'content'].forEach((attribute) => {
+                        const attributeValue = attributes[attribute];
+                        if (!attributeValue) {
+                            return;
+                        }
+                        const attributePath = !!path_1.default.extname(attributeValue) && attributeValue;
+                        if (attributePath && !attributePath.startsWith(baseUrl)) {
+                            attributes[attribute] = (0, utils_1.normalizeUrl)([baseUrl, attributeValue]);
+                        }
+                    });
+                    return headTags.push({
+                        tagName,
+                        attributes,
+                    });
+                });
+            }
+            return { headTags };
+        },
+        async postBuild(props) {
+            if (!isProd) {
+                return;
+            }
+            const swSourceFileTest = /\.m?js$/;
+            const swWebpackConfig = {
+                entry: require.resolve('./sw.js'),
+                output: {
+                    path: outDir,
+                    filename: 'sw.js',
+                    publicPath: baseUrl,
+                },
+                target: 'webworker',
+                mode: debug ? 'development' : 'production',
+                devtool: debug ? 'source-map' : false,
+                optimization: {
+                    splitChunks: false,
+                    minimize: !debug,
+                    // See https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
+                    minimizer: debug
+                        ? []
+                        : [
+                            new terser_webpack_plugin_1.default({
+                                test: swSourceFileTest,
+                            }),
+                        ],
+                },
+                plugins: [
+                    new webpack_1.default.EnvironmentPlugin({
+                        // Fallback value required with Webpack 5
+                        PWA_SW_CUSTOM: swCustom || '',
+                    }),
+                    new LogPlugin_1.default({
+                        name: 'Service Worker',
+                        color: 'red',
+                    }),
+                ],
+                module: {
+                    rules: [
+                        {
+                            test: swSourceFileTest,
+                            exclude: /node_modules/,
+                            use: getSWBabelLoader(),
+                        },
+                    ],
+                },
+            };
+            await (0, utils_2.compile)([swWebpackConfig]);
+            const swDest = path_1.default.resolve(props.outDir, 'sw.js');
+            await (0, workbox_build_1.injectManifest)({
+                ...injectManifestConfig,
+                globPatterns: [
+                    '**/*.{js,json,css,html}',
+                    '**/*.{png,jpg,jpeg,gif,svg,ico}',
+                    '**/*.{woff,woff2,eot,ttf,otf}',
+                    // @ts-expect-error: internal API?
+                    ...(workbox_build_1.injectManifest.globPatterns ?? []),
+                ],
+                // Those attributes are not overrideable
+                swDest,
+                swSrc: swDest,
+                globDirectory: props.outDir,
+            });
+        },
+    };
+}
+exports.default = pluginPWA;
+var options_1 = require("./options");
+Object.defineProperty(exports, "validateOptions", { enumerable: true, get: function () { return options_1.validateOptions; } });

package/lib/options.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.
+ */
+import type { OptionValidationContext } from '@docusaurus/types';
+import type { PluginOptions } from '@docusaurus/plugin-pwa';
+export declare function validateOptions({ validate, options, }: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions;

package/lib/options.js

@@ -0,0 +1,46 @@
+"use strict";
+/**
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOptions = void 0;
+const utils_validation_1 = require("@docusaurus/utils-validation");
+const DEFAULT_OPTIONS = {
+    debug: false,
+    offlineModeActivationStrategies: [
+        'appInstalled',
+        'queryString',
+        'standalone',
+    ],
+    injectManifestConfig: {},
+    pwaHead: [],
+    swCustom: undefined,
+    swRegister: './registerSw.js',
+    reloadPopup: '@theme/PwaReloadPopup',
+};
+const Schema = 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()
+        .valid('appInstalled', 'queryString', 'standalone', 'mobile', 'saveData', 'always')
+        .required())
+        .default(DEFAULT_OPTIONS.offlineModeActivationStrategies),
+    injectManifestConfig: utils_validation_1.Joi.object().default(DEFAULT_OPTIONS.injectManifestConfig),
+    pwaHead: utils_validation_1.Joi.array()
+        .items(utils_validation_1.Joi.object({ tagName: utils_validation_1.Joi.string().required() }).unknown().required())
+        .default(DEFAULT_OPTIONS.pwaHead),
+    swCustom: utils_validation_1.Joi.string(),
+    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),
+});
+function validateOptions({ validate, options, }) {
+    return validate(Schema, options);
+}
+exports.validateOptions = validateOptions;

package/lib/registerSw.js

@@ -0,0 +1,306 @@
+/**
+ * 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 {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_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',
+);
+
+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();
+}
+
+/*
+As of 2021:
+It is complicated and not very reliable to detect an app is actually installed.
+https://stackoverflow.com/questions/51735869/check-if-user-has-already-installed-pwa-to-homescreen-on-chrome
+
+- appinstalled event is not in the spec anymore and seems to not fire? https://firt.dev/pwa-2021#less-capabilities-%E2%98%B9%EF%B8%8F
+- getInstalledRelatedApps() is only supported in recent Chrome and does not seem to reliable either https://github.com/WICG/get-installed-related-apps
+- 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';
+}
+async function isAppInstalledRelatedApps() {
+  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;
+}
+
+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',
+};
+
+async function isStrategyActive(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);
+}
+
+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,
+      );
+    }
+  }
+  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 () => {
+    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,
+      );
+    }
+    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);
+    }
+    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);
+    }
+    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 (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',
+      );
+    }
+  }
+}
+
+/*
+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));
+  }
+}

package/lib/renderReloadPopup.js

@@ -0,0 +1,26 @@
+/**
+ * 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 React from 'react';
+import {render} 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;
+};
+
+export default async function renderReloadPopup(props) {
+  const container = getContainer() || createContainer();
+  const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP);
+  render(<ReloadPopup {...props} />, container);
+}

package/lib/sw.js

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ */
+/* eslint-disable no-restricted-globals */
+
+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;
+}
+
+// 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',
+      );
+    }
+  }
+}
+
+/**
+ * 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;
+}
+
+(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) => {
+    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;
+        }
+      }
+    }
+  });
+
+  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();
+    }
+  });
+})();

package/lib/theme/PwaReloadPopup/index.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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/PwaReloadPopup';
+export default function PwaReloadPopup({ onReload }: Props): JSX.Element | false;

package/lib/theme/PwaReloadPopup/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 React, { useState } from 'react';
+import clsx from 'clsx';
+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)}>
+        <p>
+          <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">
+              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)}>
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+      </div>));
+}

package/lib/theme/PwaReloadPopup/styles.module.css

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+
+.popup {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 344px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 999;
+}
+
+.popup p {
+  margin: 0;
+}
+
+@media screen and (max-width: 500px) {
+  .popup {
+    width: 100%;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+}
+
+.buttonContainer :global(.close) {
+  margin: 0;
+  padding: 0;
+}

package/package.json

@@ -1,8 +1,15 @@
 {
   "name": "@docusaurus/plugin-pwa",
-  "version": "2.0.0-beta.1decd6f80",
+  "version": "2.0.0-beta.20",
   "description": "Docusaurus Plugin to add PWA support.",
-  "main": "src/index.js",
+  "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"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -13,26 +20,31 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.16",
-    "@babel/preset-env": "^7.12.16",
-    "@docusaurus/core": "2.0.0-beta.1decd6f80",
-    "@docusaurus/theme-common": "2.0.0-beta.1decd6f80",
-    "@docusaurus/utils-validation": "2.0.0-beta.1decd6f80",
-    "babel-loader": "^8.2.2",
+    "@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-loader": "^8.2.5",
     "clsx": "^1.1.1",
-    "core-js": "^2.6.5",
-    "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^5.28.0",
-    "webpack-merge": "^5.7.3",
-    "workbox-build": "^6.1.1",
-    "workbox-precaching": "^6.1.1",
-    "workbox-window": "^6.1.1"
+    "core-js": "^3.22.3",
+    "terser-webpack-plugin": "^5.3.1",
+    "tslib": "^2.4.0",
+    "webpack": "^5.72.0",
+    "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",
+    "fs-extra": "^10.1.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.0.0",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
-  "gitHead": "0f82d5997e05666fa8c0e8852e551c1a8ffe3876"
+  "gitHead": "ed5cdba401a5948e187e927039b142a0decc702d"
 }

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

@@ -5,14 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const LogPlugin = require('@docusaurus/core/lib/webpack/plugins/LogPlugin')
-  .default;
-const {compile} = require('@docusaurus/core/lib/webpack/utils');
-const path = require('path');
-const webpack = require('webpack');
-const {injectManifest} = require('workbox-build');
-const {PluginOptionSchema} = require('./pluginOptionSchema');
-const Terser = require('terser-webpack-plugin');
+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';
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -33,17 +37,19 @@ function getSWBabelLoader() {
           },
         ],
       ],
-      plugins: [
-        require.resolve('@babel/plugin-proposal-object-rest-spread'),
-        require.resolve('@babel/plugin-proposal-optional-chaining'),
-        require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
-      ],
     },
   };
 }
 
-function plugin(context, options) {
-  const {outDir, baseUrl} = context;
+export default function pluginPWA(
+  context: LoadContext,
+  options: PluginOptions,
+): Plugin<void> {
+  const {
+    outDir,
+    baseUrl,
+    i18n: {currentLocale},
+  } = context;
   const {
     debug,
     offlineModeActivationStrategies,
@@ -58,11 +64,21 @@ function plugin(context, options) {
     name: 'docusaurus-plugin-pwa',
 
     getThemePath() {
-      return path.resolve(__dirname, './theme');
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
     },
 
     getClientModules() {
-      return isProd ? [swRegister] : [];
+      return isProd && swRegister ? [swRegister] : [];
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'plugin-pwa',
+      });
     },
 
     configureWebpack(config) {
@@ -75,10 +91,11 @@ function plugin(context, options) {
           new webpack.EnvironmentPlugin({
             PWA_DEBUG: debug,
             PWA_SERVICE_WORKER_URL: path.posix.resolve(
-              `${config.output.publicPath || '/'}`,
+              `${config.output?.publicPath || '/'}`,
               'sw.js',
             ),
-            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies,
+            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
+              offlineModeActivationStrategies,
             PWA_RELOAD_POPUP: reloadPopup,
           }),
         ],
@@ -86,14 +103,29 @@ function plugin(context, options) {
     },
 
     injectHtmlTags() {
-      const headTags = [];
+      const headTags: HtmlTags = [];
       if (isProd && pwaHead) {
-        pwaHead.forEach(({tagName, ...attributes}) =>
-          headTags.push({
+        pwaHead.forEach(({tagName, ...attributes}) => {
+          (['href', 'content'] as const).forEach((attribute) => {
+            const attributeValue = attributes[attribute];
+
+            if (!attributeValue) {
+              return;
+            }
+
+            const attributePath =
+              !!path.extname(attributeValue) && attributeValue;
+
+            if (attributePath && !attributePath.startsWith(baseUrl)) {
+              attributes[attribute] = normalizeUrl([baseUrl, attributeValue]);
+            }
+          });
+
+          return headTags.push({
             tagName,
             attributes,
-          }),
-        );
+          });
+        });
       }
       return {headTags};
     },
@@ -105,8 +137,8 @@ function plugin(context, options) {
 
       const swSourceFileTest = /\.m?js$/;
 
-      const swWebpackConfig = {
-        entry: path.resolve(__dirname, 'sw.js'),
+      const swWebpackConfig: Configuration = {
+        entry: require.resolve('./sw.js'),
         output: {
           path: outDir,
           filename: 'sw.js',
@@ -118,17 +150,19 @@ function plugin(context, options) {
         optimization: {
           splitChunks: false,
           minimize: !debug,
-          // see https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
-          minimizer: [
-            !debug &&
-              new Terser({
-                test: swSourceFileTest,
-              }),
-          ].filter(Boolean),
+          // See https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
+          minimizer: debug
+            ? []
+            : [
+                new Terser({
+                  test: swSourceFileTest,
+                }),
+              ],
         },
         plugins: [
           new webpack.EnvironmentPlugin({
-            PWA_SW_CUSTOM: swCustom || '', // fallback value required with Webpack 5
+            // Fallback value required with Webpack 5
+            PWA_SW_CUSTOM: swCustom || '',
           }),
           new LogPlugin({
             name: 'Service Worker',
@@ -139,7 +173,7 @@ function plugin(context, options) {
           rules: [
             {
               test: swSourceFileTest,
-              exclude: /(node_modules)/,
+              exclude: /node_modules/,
               use: getSWBabelLoader(),
             },
           ],
@@ -156,9 +190,10 @@ function plugin(context, options) {
           '**/*.{js,json,css,html}',
           '**/*.{png,jpg,jpeg,gif,svg,ico}',
           '**/*.{woff,woff2,eot,ttf,otf}',
-          ...(injectManifest.globPatterns || []),
+          // @ts-expect-error: internal API?
+          ...(injectManifest.globPatterns ?? []),
         ],
-        // those attributes are not overrideable
+        // Those attributes are not overrideable
         swDest,
         swSrc: swDest,
         globDirectory: props.outDir,
@@ -167,8 +202,4 @@ function plugin(context, options) {
   };
 }
 
-module.exports = plugin;
-
-plugin.validateOptions = function validateOptions({validate, options}) {
-  return validate(PluginOptionSchema, options);
-};
+export {validateOptions} from './options';

package/src/{pluginOptionSchema.js → options.ts}

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {Joi} = require('@docusaurus/utils-validation');
-const path = require('path');
+import {Joi} from '@docusaurus/utils-validation';
+import type {OptionValidationContext} from '@docusaurus/types';
+import type {PluginOptions} from '@docusaurus/plugin-pwa';
 
 const DEFAULT_OPTIONS = {
   debug: false,
@@ -18,11 +19,11 @@ const DEFAULT_OPTIONS = {
   injectManifestConfig: {},
   pwaHead: [],
   swCustom: undefined,
-  swRegister: path.join(__dirname, 'registerSw.js'),
+  swRegister: './registerSw.js',
   reloadPopup: '@theme/PwaReloadPopup',
 };
 
-exports.PluginOptionSchema = Joi.object({
+const Schema = Joi.object({
   debug: Joi.bool().default(DEFAULT_OPTIONS.debug),
   offlineModeActivationStrategies: Joi.array()
     .items(
@@ -52,3 +53,10 @@ exports.PluginOptionSchema = Joi.object({
     .try(Joi.string(), Joi.bool().valid(false))
     .default(DEFAULT_OPTIONS.reloadPopup),
 });
+
+export function validateOptions({
+  validate,
+  options,
+}: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions {
+  return validate(Schema, options);
+}

package/src/plugin-pwa.d.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 module '@docusaurus/plugin-pwa' {
+  import type {InjectManifestOptions} from 'workbox-build';
+
+  export type PluginOptions = {
+    /**
+     * Turn debug mode on:
+     *
+     * - Workbox logs
+     * - Additional Docusaurus logs
+     * - Unoptimized SW file output
+     * - Source maps
+     */
+    debug?: boolean;
+    /**
+     * Strategies used to turn the offline mode on:
+     *
+     * - `appInstalled`: activates for users having installed the site as an app
+     * (not 100% reliable)
+     * - `standalone`: activates for users running the app as standalone (often
+     * the case once a PWA is installed)
+     * - `queryString`: activates if queryString contains `offlineMode=true`
+     * (convenient for PWA debugging)
+     * - `mobile`: activates for mobile users (width <= 940px)
+     * - `saveData`: activates for users with `navigator.connection.saveData ===
+     * true`
+     * - `always`: activates for all users
+     */
+    offlineModeActivationStrategies: (
+      | 'appInstalled'
+      | 'queryString'
+      | 'standalone'
+      | 'mobile'
+      | 'saveData'
+      | 'always'
+    )[];
+    /**
+     * Workbox options to pass to `workbox.injectManifest()`. This gives you
+     * control over which assets will be precached, and be available offline.
+     * @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
+     * through this, but it's ideally used for tags to make your site PWA-
+     * compliant.
+     */
+    pwaHead: {
+      tagName: string;
+      href?: string;
+      content?: string;
+      [attributeName: string]: string | boolean | undefined;
+    }[];
+    /**
+     * Useful for additional Workbox rules. You can do whatever a service worker
+     * can do here, and use the full power of workbox libraries. The code is
+     * transpiled, so you can use modern ES6+ syntax here.
+     */
+    swCustom?: string;
+    /**
+     * Adds an entry before the Docusaurus app so that registration can happen
+     * before the app runs. The default `registerSW.js` file is enough for
+     * simple registration. Passing `false` will disable registration entirely.
+     */
+    swRegister: string | false;
+  };
+
+  export type Options = Partial<PluginOptions>;
+}
+
+declare module '@theme/PwaReloadPopup' {
+  export interface Props {
+    /**
+     * The popup should call this callback when the `reload` button is clicked.
+     * This will tell the service worker to install the waiting service worker
+     * and reload the page.
+     */
+    readonly onReload: () => void;
+  }
+  export default function PwaReloadPopup(props: Props): JSX.Element;
+}

package/src/registerSw.js

@@ -4,6 +4,7 @@
  * 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';
 
 // First: read the env variables (provided by Webpack)
@@ -15,7 +16,7 @@ const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES =
 const PWA_DEBUG = process.env.PWA_DEBUG;
 /* eslint-enable prefer-destructuring */
 
-const debug = PWA_DEBUG; // shortcut
+const debug = PWA_DEBUG; // Shortcut
 
 const MAX_MOBILE_WIDTH = 940;
 
@@ -78,7 +79,7 @@ function isStandaloneDisplayMode() {
 const OfflineModeActivationStrategiesImplementations = {
   always: () => true,
   mobile: () => window.innerWidth <= MAX_MOBILE_WIDTH,
-  saveData: () => !!(navigator.connection && navigator.connection.saveData),
+  saveData: () => !!navigator.connection?.saveData,
   appInstalled: async () => {
     const installedEventFired = await isAppInstalledEventFired();
     const installedRelatedApps = await isAppInstalledRelatedApps();
@@ -100,7 +101,7 @@ async function getActiveStrategies() {
       return isActive ? strategyName : undefined;
     }),
   );
-  return activeStrategies.filter(Boolean); // remove undefined values
+  return activeStrategies.filter(Boolean);
 }
 
 async function isOfflineModeEnabled() {
@@ -218,8 +219,8 @@ async function registerSW() {
   }
 }
 
-// TODO these events still works in chrome but have been removed from the spec in 2019!
-// See https://github.com/w3c/manifest/pull/836
+// 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) {
@@ -247,7 +248,8 @@ function addLegacyAppInstalledEventsListeners() {
       await clearRegistrations();
     });
 
-    // TODO this event still works in chrome but has been removed from the spec in 2019!!!
+    // 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(
@@ -255,7 +257,8 @@ function addLegacyAppInstalledEventsListeners() {
           event,
         );
       }
-      // TODO instead of default browser install UI, show custom docusaurus prompt?
+      // TODO instead of default browser install UI, show custom docusaurus
+      // prompt?
       // event.preventDefault();
       if (debug) {
         console.log(
@@ -272,7 +275,7 @@ function addLegacyAppInstalledEventsListeners() {
         }
         // 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 will show.
+        // need to clear registrations and reload, otherwise the popup shows.
         await clearRegistrations();
       }
     });

package/src/sw.js

@@ -18,10 +18,10 @@ function parseSwParams() {
   return params;
 }
 
-// doc advise against dynamic imports in SW
+// 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 I think it's working fine as it's inlined by webpack, need to double check?
+// 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);
@@ -70,9 +70,11 @@ function getPossibleURLs(url) {
 (async () => {
   const params = parseSwParams();
 
+  // eslint-disable-next-line no-underscore-dangle
   const precacheManifest = self.__WB_MANIFEST;
   const controller = new PrecacheController({
-    fallbackToNetwork: true, // safer to turn this true?
+    // Safer to turn this true?
+    fallbackToNetwork: true,
   });
 
   if (params.offlineMode) {
@@ -136,7 +138,7 @@ function getPossibleURLs(url) {
       });
     }
 
-    const type = event.data && event.data.type;
+    const type = event.data?.type;
 
     if (type === 'SKIP_WAITING') {
       self.skipWaiting();

package/src/theme/PwaReloadPopup/{index.js → index.tsx}

@@ -9,9 +9,11 @@ import React, {useState} from 'react';
 import clsx from 'clsx';
 import Translate, {translate} from '@docusaurus/Translate';
 
+import type {Props} from '@theme/PwaReloadPopup';
+
 import styles from './styles.module.css';
 
-export default function PwaReloadPopup({onReload}) {
+export default function PwaReloadPopup({onReload}: Props): JSX.Element | false {
   const [isVisible, setIsVisible] = useState(true);
 
   return (

package/src/types.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.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />