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 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

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}
- 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).
![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.