3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-02 03:37:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(pwa): remove reloadPopup option in favor of swizzling (#7422)

Browse source 
* refactor(pwa): remove reloadPopup option in favor of swizzling

* restore code splitting

* add deprecation
This commit is contained in:
Joshua Chen 2022-05-27 20:32:22 +08:00 • committed by GitHub
parent be912c698a
commit 1a5e33c717
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-plugin-pwa/src/index.ts
View file

@ -52,7 +52,6 @@ export default function pluginPWA(
debug, debug,
offlineModeActivationStrategies, offlineModeActivationStrategies,
injectManifestConfig, injectManifestConfig,
reloadPopup,
pwaHead, pwaHead,
swCustom, swCustom,
swRegister, swRegister,
@ -94,7 +93,6 @@ export default function pluginPWA(
), ),
PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES:
offlineModeActivationStrategies, offlineModeActivationStrategies,
PWA_RELOAD_POPUP: reloadPopup,
}), }),
], ],
}; };

9
packages/docusaurus-plugin-pwa/src/options.ts
View file

@ -20,7 +20,6 @@ const DEFAULT_OPTIONS = {
pwaHead: [], pwaHead: [],
swCustom: undefined, swCustom: undefined,
swRegister: './registerSw.js', swRegister: './registerSw.js',
reloadPopup: '@theme/PwaReloadPopup',
}; };
const optionsSchema = Joi.object<PluginOptions>({ const optionsSchema = Joi.object<PluginOptions>({
@ -49,9 +48,11 @@ const optionsSchema = Joi.object<PluginOptions>({
swRegister: Joi.alternatives() swRegister: Joi.alternatives()
.try(Joi.string(), Joi.bool().valid(false)) .try(Joi.string(), Joi.bool().valid(false))
.default(DEFAULT_OPTIONS.swRegister), .default(DEFAULT_OPTIONS.swRegister),
reloadPopup: Joi.alternatives() // @ts-expect-error: forbidden
.try(Joi.string(), Joi.bool().valid(false)) reloadPopup: Joi.any().forbidden().messages({
.default(DEFAULT_OPTIONS.reloadPopup), '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({ export function validateOptions({

10
packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts vendored
View file

@ -46,16 +46,6 @@ declare module '@docusaurus/plugin-pwa' {
* @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest * @see https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest
*/ */
injectManifestConfig: InjectManifestOptions; 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 * Array of objects containing `tagName` and key-value pairs for attributes
* to inject into the `<head>` tag. Technically you can inject any head tag * to inject into the `<head>` tag. Technically you can inject any head tag

3
packages/docusaurus-plugin-pwa/src/registerSw.ts
View file

@ -10,7 +10,6 @@ import {createStorageSlot} from '@docusaurus/theme-common';
// First: read the env variables (provided by Webpack) // First: read the env variables (provided by Webpack)
/* eslint-disable prefer-destructuring */ /* eslint-disable prefer-destructuring */
const PWA_SERVICE_WORKER_URL = process.env.PWA_SERVICE_WORKER_URL!; 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 const PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES = process.env
.PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[]; .PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES as unknown as (keyof typeof OfflineModeActivationStrategiesImplementations)[];
const PWA_DEBUG = process.env.PWA_DEBUG; const PWA_DEBUG = process.env.PWA_DEBUG;
@ -170,7 +169,7 @@ async function registerSW() {
// Immediately load new service worker when files aren't cached // Immediately load new service worker when files aren't cached
if (!offlineMode) { if (!offlineMode) {
sendSkipWaiting(); sendSkipWaiting();
} else if (PWA_RELOAD_POPUP) { } else {
const renderReloadPopup = (await import('./renderReloadPopup')).default; const renderReloadPopup = (await import('./renderReloadPopup')).default;
await renderReloadPopup({ await renderReloadPopup({
onReload() { onReload() {

7
packages/docusaurus-plugin-pwa/src/renderReloadPopup.tsx
View file

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

31
website/docs/api/plugins/plugin-pwa.md
View file

@ -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} ### `pwaHead` {#pwahead}
- Type: `({ tagName: string; [attributeName: string]: string })[]` - Type: `({ tagName: string; [attributeName: string]: string })[]`
@ -312,3 +291,13 @@ import CodeBlock from '@theme/CodeBlock';
{JSON.stringify(require("@site/static/manifest.json"),null,2)} {JSON.stringify(require("@site/static/manifest.json"),null,2)}
</CodeBlock> </CodeBlock>
``` ```
## 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.