mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-01 19:27:48 +02:00
refactor(pwa): remove reloadPopup option in favor of swizzling (#7422)
* refactor(pwa): remove reloadPopup option in favor of swizzling * restore code splitting * add deprecation
This commit is contained in:
Joshua Chen
GitHub
parent
be912c698a
commit
1a5e33c717
6 changed files with 19 additions and 43 deletions
|
|
@ -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,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ const DEFAULT_OPTIONS = {
|
|||
pwaHead: [],
|
||||
swCustom: undefined,
|
||||
swRegister: './registerSw.js',
|
||||
reloadPopup: '@theme/PwaReloadPopup',
|
||||
};
|
||||
|
||||
const optionsSchema = Joi.object<PluginOptions>({
|
||||
|
|
@ -49,9 +48,11 @@ const optionsSchema = Joi.object<PluginOptions>({
|
|||
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({
|
||||
|
|
|
|||
|
|
@ -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 `<head>` tag. Technically you can inject any head tag
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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<void> {
|
||||
export default async function renderReloadPopup(props: Props): Promise<void> {
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
||||
|
||||
### `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)}
|
||||
</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).
|
||||
|
||||
|
||||
|
||||
Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue