@docusaurus/plugin-pwa 2.0.0-beta.fbdeefcac → 2.0.0-rc.1

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,164 @@
+"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 path_1 = tslib_1.__importDefault(require("path"));
+const webpack_1 = tslib_1.__importDefault(require("webpack"));
+const terser_webpack_plugin_1 = tslib_1.__importDefault(require("terser-webpack-plugin"));
+const workbox_build_1 = require("workbox-build");
+const utils_1 = require("@docusaurus/utils");
+const utils_2 = require("@docusaurus/core/lib/webpack/utils");
+const LogPlugin_1 = tslib_1.__importDefault(require("@docusaurus/core/lib/webpack/plugins/LogPlugin"));
+const theme_translations_1 = require("@docusaurus/theme-translations");
+const isProd = process.env.NODE_ENV === 'production';
+function getSWBabelLoader() {
+    return {
+        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, 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,
+                    }),
+                ],
+            };
+        },
+        injectHtmlTags() {
+            const headTags = [];
+            if (isProd) {
+                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',
+};
+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);
+}
+exports.validateOptions = validateOptions;

package/lib/registerSw.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+declare global {
+    interface Navigator {
+        getInstalledRelatedApps: () => Promise<{
+            platform: string;
+        }[]>;
+        connection?: {
+            effectiveType: string;
+            saveData: boolean;
+        };
+    }
+}
+export {};

package/lib/registerSw.js

@@ -0,0 +1,186 @@
+/**
+ * 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)
+/* eslint-disable prefer-destructuring */
+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;
+/* eslint-enable prefer-destructuring */
+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;
+    }
+    const relatedApps = await navigator.getInstalledRelatedApps();
+    return relatedApps.some((app) => app.platform === 'webapp');
+}
+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 React from 'react';
+import ReactDOM from 'react-dom';
+const POPUP_CONTAINER_ID = 'pwa-popup-container';
+const getContainer = () => document.getElementById(POPUP_CONTAINER_ID);
+const createContainer = () => {
+    const container = document.createElement('div');
+    container.id = POPUP_CONTAINER_ID;
+    document.body.appendChild(container);
+    return container;
+};
+export function renderReloadPopup(props) {
+    const container = getContainer() ?? createContainer();
+    return import('@theme/PwaReloadPopup').then(({ default: ReloadPopup }) => {
+        ReactDOM.render(<ReloadPopup {...props}/>, container);
+    });
+}

package/lib/sw.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export {};

package/lib/sw.js

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

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

@@ -4,16 +4,12 @@
  * 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)}>

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