diff --git a/packages/docusaurus-plugin-pwa/src/index.ts b/packages/docusaurus-plugin-pwa/src/index.ts index 448e7d2f99..895dc56f40 100644 --- a/packages/docusaurus-plugin-pwa/src/index.ts +++ b/packages/docusaurus-plugin-pwa/src/index.ts @@ -52,7 +52,6 @@ export default function pluginPWA( debug, offlineModeActivationStrategies, injectManifestConfig, - reloadPopup, pwaHead, swCustom, swRegister, @@ -94,7 +93,6 @@ export default function pluginPWA( ), PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies, - PWA_RELOAD_POPUP: reloadPopup, }), ], }; diff --git a/packages/docusaurus-plugin-pwa/src/options.ts b/packages/docusaurus-plugin-pwa/src/options.ts index 8517028f9f..0332a26707 100644 --- a/packages/docusaurus-plugin-pwa/src/options.ts +++ b/packages/docusaurus-plugin-pwa/src/options.ts @@ -20,7 +20,6 @@ const DEFAULT_OPTIONS = { pwaHead: [], swCustom: undefined, swRegister: './registerSw.js', - reloadPopup: '@theme/PwaReloadPopup', }; const optionsSchema = Joi.object({ @@ -49,9 +48,11 @@ const optionsSchema = Joi.object({ swRegister: Joi.alternatives() .try(Joi.string(), Joi.bool().valid(false)) .default(DEFAULT_OPTIONS.swRegister), - reloadPopup: Joi.alternatives() - .try(Joi.string(), Joi.bool().valid(false)) - .default(DEFAULT_OPTIONS.reloadPopup), + // @ts-expect-error: forbidden + reloadPopup: Joi.any().forbidden().messages({ + 'any.unknown': + 'The reloadPopup option is removed in favor of swizzling. See https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa#customizing-reload-popup for how to customize the reload popup using swizzling.', + }), }); export function validateOptions({ diff --git a/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts b/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts index 9633e9e4e4..85d6aa0884 100644 --- a/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts +++ b/packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts @@ -46,16 +46,6 @@ declare module '@docusaurus/plugin-pwa' { * @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest */ injectManifestConfig: InjectManifestOptions; - /** - * Module path to reload popup component. This popup is rendered when a new - * service worker is waiting to be installed, and we suggest a reload to - * the user. - * - * Passing `false` will disable the popup, but this is not recommended: - * users won't have a way to get up-to-date content. - * @see {@link @theme/PwaReloadPopup} - */ - reloadPopup: string | false; /** * Array of objects containing `tagName` and key-value pairs for attributes * to inject into the `` tag. Technically you can inject any head tag diff --git a/packages/docusaurus-plugin-pwa/src/registerSw.ts b/packages/docusaurus-plugin-pwa/src/registerSw.ts index d48e7b29b2..7ccb4a56a2 100644 --- a/packages/docusaurus-plugin-pwa/src/registerSw.ts +++ b/packages/docusaurus-plugin-pwa/src/registerSw.ts @@ -10,7 +10,6 @@ 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 as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[]; const PWA_DEBUG = process.env.PWA_DEBUG; @@ -170,7 +169,7 @@ async function registerSW() { // Immediately load new service worker when files aren't cached if (!offlineMode) { sendSkipWaiting(); - } else if (PWA_RELOAD_POPUP) { + } else { const renderReloadPopup = (await import('./renderReloadPopup')).default; await renderReloadPopup({ onReload() { diff --git a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx index d4cac36017..fe8e9eb2b0 100644 --- a/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx +++ b/packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx @@ -7,6 +7,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import type {Props} from '@theme/PwaReloadPopup'; const POPUP_CONTAINER_ID = 'pwa-popup-container'; @@ -19,10 +20,8 @@ const createContainer = () => { return container; }; -export default async function renderReloadPopup(props: { - onReload: () => void; -}): Promise { +export default async function renderReloadPopup(props: Props): Promise { const container = getContainer() || createContainer(); - const {default: ReloadPopup} = await import(process.env.PWA_RELOAD_POPUP!); + const ReloadPopup = (await import('@theme/PwaReloadPopup')).default; ReactDOM.render(, container); } diff --git a/website/docs/api/plugins/plugin-pwa.md b/website/docs/api/plugins/plugin-pwa.md index 7dc019fe97..a732e8094d 100644 --- a/website/docs/api/plugins/plugin-pwa.md +++ b/website/docs/api/plugins/plugin-pwa.md @@ -171,27 +171,6 @@ module.exports = { }; ``` -### `reloadPopup` {#reloadpopup} - -- Type: `string | false` -- Default: `'@theme/PwaReloadPopup'` - -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. - -A custom component can be used, as long as it accepts `onReload` as a prop. The `onReload` callback should be called when the `reload` button is clicked. This will tell the service worker to install the waiting service worker and reload the page. - -```ts -interface PwaReloadPopupProps { - onReload: () => void; -} -``` - -The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert). - -![pwa_reload.gif](/img/pwa_reload.gif) - ### `pwaHead` {#pwahead} - Type: `({ tagName: string; [attributeName: string]: string })[]` @@ -312,3 +291,13 @@ import CodeBlock from '@theme/CodeBlock'; {JSON.stringify(require("@site/static/manifest.json"),null,2)} ``` + +## Customizing reload popup {#customizing-reload-popup} + +The `@theme/PwaReloadPopup` component is rendered when a new service worker is waiting to be installed, and we suggest a reload to the user. You can [swizzle](../../swizzling.md) this component and implement your own UI. It will receive an `onReload` callback as props, which should be called when the `reload` button is clicked. This will tell the service worker to install the waiting service worker and reload the page. + +The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert). + +![pwa_reload.gif](/img/pwa_reload.gif) + +Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.