@azerion/bunosaurus-plugin-pwa 0.0.0-stage → 4.0.0

package/README.md

@@ -1,3 +1,7 @@
-# Temporary Holding Version
+# `@docusaurus/plugin-pwa`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Progressive web app plugin for Docusaurus.
+
+## Usage
+
+See [plugin-pwa documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa).

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> | null;
+export { validateOptions } from './options';

package/lib/index.js

@@ -0,0 +1,113 @@
+"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;
+exports.default = pluginPWA;
+const tslib_1 = require("tslib");
+const node_path_1 = tslib_1.__importDefault(require("node:path"));
+const bundler_1 = require("@docusaurus/bundler");
+const workbox_build_1 = require("workbox-build");
+const utils_1 = require("@docusaurus/utils");
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const theme_translations_1 = require("@docusaurus/theme-translations");
+const PluginName = 'docusaurus-plugin-pwa';
+function pluginPWA(context, options) {
+    if (process.env.NODE_ENV !== 'production') {
+        return null;
+    }
+    if (context.siteConfig.future.experimental_router === 'hash') {
+        logger_1.default.warn(`${PluginName} does not support the Hash Router and will be disabled.`);
+        return null;
+    }
+    const { outDir, baseUrl, i18n: { currentLocale }, } = context;
+    const { debug, offlineModeActivationStrategies, injectManifestConfig, pwaHead, swCustom, swRegister, } = options;
+    return {
+        name: PluginName,
+        getThemePath() {
+            return '../lib/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+        getClientModules() {
+            return swRegister ? [swRegister] : [];
+        },
+        getDefaultCodeTranslationMessages() {
+            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+                locale: currentLocale,
+                name: 'plugin-pwa',
+            });
+        },
+        configureWebpack(config, isServer, { currentBundler }) {
+            return {
+                plugins: [
+                    new currentBundler.instance.EnvironmentPlugin({
+                        PWA_DEBUG: debug,
+                        PWA_SERVICE_WORKER_URL: node_path_1.default.posix.resolve(`${config.output?.publicPath || '/'}`, 'sw.js'),
+                        PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies,
+                    }),
+                ],
+            };
+        },
+        injectHtmlTags() {
+            const headTags = [];
+            pwaHead.forEach(({ tagName, ...attributes }) => {
+                ['href', 'content'].forEach((attribute) => {
+                    const attributeValue = attributes[attribute];
+                    if (!attributeValue) {
+                        return;
+                    }
+                    const attributePath = !!node_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) {
+            // The service worker is a classic script, bundled on its own
+            await (0, bundler_1.bunBuild)('Service Worker', {
+                entrypoints: [require.resolve('./sw.js')],
+                outdir: outDir,
+                naming: 'sw.js',
+                target: 'browser',
+                format: 'iife',
+                minify: !debug,
+                sourcemap: debug ? 'linked' : 'none',
+                publicPath: baseUrl,
+                env: 'disable',
+                define: {
+                    'process.env.NODE_ENV': JSON.stringify(debug ? 'development' : 'production'),
+                    'process.env.PWA_SW_CUSTOM': JSON.stringify(swCustom ?? ''),
+                },
+            });
+            const swDest = node_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,
+            });
+        },
+    };
+}
+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,45 @@
+"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 = validateOptions;
+const utils_validation_1 = require("@docusaurus/utils-validation");
+const DEFAULT_OPTIONS = {
+    debug: false,
+    offlineModeActivationStrategies: [
+        'appInstalled',
+        'queryString',
+        'standalone',
+    ],
+    injectManifestConfig: {},
+    pwaHead: [],
+    swCustom: undefined,
+    swRegister: './registerSw.js',
+};
+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()
+        .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),
+    // @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(optionsSchema, options);
+}

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

@@ -0,0 +1,191 @@
+/**
+ * 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 ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import { createStorageSlot } from '@docusaurus/theme-common';
+// First: read the env variables (provided by Webpack)
+const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL;
+const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env
+    .PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES;
+const PWA_DEBUG = process.env.PWA_DEBUG;
+const MAX_MOBILE_WIDTH = 996;
+const AppInstalledEventFiredStorage = createStorageSlot('docusaurus.pwa.event.appInstalled.fired');
+function debugLog(msg, obj) {
+    if (PWA_DEBUG) {
+        if (typeof obj === 'undefined') {
+            console.log(`[Docusaurus-PWA][registerSw]: ${msg}`);
+        }
+        else {
+            console.log(`[Docusaurus-PWA][registerSw]: ${msg}`, obj);
+        }
+    }
+}
+async function clearRegistrations() {
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    debugLog('will unregister all service workers', { registrations });
+    await Promise.all(registrations.map((registration) => registration
+        .unregister()
+        .then((result) => debugLog('unregister service worker', { registration, result }))));
+    debugLog('unregistered all service workers', { 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/
+ */
+function getIsAppInstalledEventFired() {
+    return AppInstalledEventFiredStorage.get() === 'true';
+}
+async function getIsAppInstalledRelatedApps() {
+    if (!('getInstalledRelatedApps' in window.navigator)) {
+        return false;
+    }
+    try {
+        const relatedApps = await navigator.getInstalledRelatedApps();
+        return relatedApps.some((app) => app.platform === 'webapp');
+    }
+    catch {
+        // Error might be thrown when Docusaurus is embedded in an iframe:
+        // registerSW failed DOMException: Failed to execute 'getInstalledRelatedApps' on 'Navigator': getInstalledRelatedApps() is only supported in top-level browsing contexts.
+        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: () => getIsAppInstalledEventFired() || getIsAppInstalledRelatedApps(),
+    standalone: () => isStandaloneDisplayMode(),
+    queryString: () => new URLSearchParams(window.location.search).get('offlineMode') === 'true',
+};
+async function getActiveStrategies() {
+    const activeStrategies = await Promise.all(PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES.map((strategyName) => Promise.resolve(OfflineModeActivationStrategiesImplementations[strategyName]()).then((isActive) => (isActive ? strategyName : undefined))));
+    return activeStrategies.filter(Boolean);
+}
+async function getIsOfflineModeEnabled() {
+    const activeStrategies = await getActiveStrategies();
+    const enabled = activeStrategies.length > 0;
+    debugLog(enabled
+        ? 'offline mode enabled, because of activation strategies'
+        : 'offline mode disabled, because none of the offlineModeActivationStrategies could be used', {
+        activeStrategies,
+        availableStrategies: PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES,
+    });
+    return enabled;
+}
+function createServiceWorkerUrl(params) {
+    const paramsQueryString = JSON.stringify(params);
+    const url = `${PWA_SERVICE_WORKER_URL}?params=${encodeURIComponent(paramsQueryString)}`;
+    debugLog('service worker url', { url, params });
+    return url;
+}
+async function registerSW() {
+    const [{ Workbox }, offlineMode] = await Promise.all([
+        import('workbox-window'),
+        getIsOfflineModeEnabled(),
+    ]);
+    const url = createServiceWorkerUrl({ offlineMode, debug: PWA_DEBUG });
+    const wb = new Workbox(url);
+    const sendSkipWaiting = () => wb.messageSW({ type: 'SKIP_WAITING' });
+    const handleServiceWorkerWaiting = () => {
+        debugLog('handleServiceWorkerWaiting');
+        // Immediately load new service worker when files aren't cached
+        if (!offlineMode) {
+            return sendSkipWaiting();
+        }
+        return import('./renderReloadPopup.js').then(({ renderReloadPopup }) => renderReloadPopup({
+            onReload() {
+                wb.addEventListener('controlling', () => {
+                    window.location.reload();
+                });
+                sendSkipWaiting();
+            },
+        }));
+    };
+    // Update the current service worker when the next one has finished
+    // installing and transitions to waiting state.
+    wb.addEventListener('waiting', (event) => {
+        debugLog('event waiting', { event });
+        void 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) => {
+        debugLog('event externalwaiting', { event });
+        void handleServiceWorkerWaiting();
+    });
+    const registration = await wb.register();
+    if (registration) {
+        if (registration.active) {
+            debugLog('registration.active', { registration });
+        }
+        if (registration.installing) {
+            debugLog('registration.installing', { registration });
+        }
+        if (registration.waiting) {
+            debugLog('registration.waiting', { registration });
+            // 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.
+            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() {
+    debugLog('addLegacyAppInstalledEventsListeners');
+    window.addEventListener('appinstalled', (event) => {
+        debugLog('event appinstalled', { event });
+        AppInstalledEventFiredStorage.set('true');
+        debugLog("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.
+        void clearRegistrations();
+    });
+    // TODO this event still works in chrome but has been removed from the spec
+    // in 2019!!!
+    window.addEventListener('beforeinstallprompt', (event) => {
+        debugLog('event beforeinstallprompt', { event });
+        // TODO instead of default browser install UI, show custom docusaurus
+        // prompt?
+        // event.preventDefault();
+        const appInstalledEventFired = AppInstalledEventFiredStorage.get();
+        debugLog('AppInstalledEventFiredStorage.get()', { appInstalledEventFired });
+        if (appInstalledEventFired) {
+            AppInstalledEventFiredStorage.del();
+            debugLog('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.
+            void clearRegistrations();
+        }
+    });
+    debugLog('legacy appinstalled and beforeinstallprompt event listeners installed');
+}
+/*
+Init code to run on the client!
+ */
+if (ExecutionEnvironment.canUseDOM) {
+    debugLog('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 declare function renderReloadPopup(props: Props): Promise<void>;

package/lib/renderReloadPopup.js

@@ -0,0 +1,22 @@
+/**
+ * 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 { createRoot } from 'react-dom/client';
+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 function renderReloadPopup(props) {
+    const container = getContainer() ?? createContainer();
+    return import('@theme/PwaReloadPopup').then(({ default: ReloadPopup }) => {
+        const root = createRoot(container);
+        root.render(<ReloadPopup {...props}/>);
+    });
+}

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 {};

package/lib/sw.js

@@ -0,0 +1,109 @@
+/**
+ * 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 { 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://x.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
+ */
+function getPossibleURLs(url) {
+    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();
+    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 (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.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 ReactNode } from 'react';
+import type { Props } from '@theme/PwaReloadPopup';
+export default function PwaReloadPopup({ onReload }: Props): ReactNode;

package/lib/theme/PwaReloadPopup/index.js

@@ -0,0 +1,54 @@
+/**
+ * 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 {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 (width <= 500px) {
+  .popup {
+    width: 100%;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+}
+
+.buttonContainer :global(.close) {
+  margin: 0;
+  padding: 0;
+}