Skip to main content
Version: 2.0.0-alpha.70

📦 plugin-pwa

Extension Docusaurus pour ajouter le support PWA en utilisant Workbox. This plugin generates a Service Worker in production build only, and allows you to create fully PWA-compliant documentation site with offline and installation support.

Installation#

npm install --save @docusaurus/plugin-pwa

Configuration#

Créer un manifeste PWA au fichier ./static/manifest.json.

Modifiez docusaurus.config.js avec une configuration PWA minimale, tel que :

docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-pwa',
{
debug: true,
offlineModeActivationStrategies: ['appInstalled', 'queryString'],
pwaHead: [
{
tagName: 'link',
rel: 'icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'manifest',
href: '/manifest.json', // votre manifeste PWA
},
{
tagName: 'meta',
name: 'theme-color',
content: 'rgb(37, 194, 160)',
},
],
},
],
],
};

Progressive Web App#

Having a service worker installed is not enough to make your application a PWA. You'll need to at least include a Web App Manifest and have the correct tags in <head> (Options > pwaHead).

After deployment, you can use Lighthouse to run an audit on your site.

For a more exhaustive list of what it takes for your site to be a PWA, refer to the PWA Checklist

App installation support#

If your browser supports it, you should be able to install a Docusaurus site as an app.

pwa_install.gif

Offline mode (precaching)#

We enable users to browse a Docusaurus site offline, by using service-worker precaching.

What is Precaching?#

One feature of service workers is the ability to save a set of files to the cache when the service worker is installing. This is often referred to as "precaching", since you are caching content ahead of the service worker being used.

The main reason for doing this is that it gives developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline.

Workbox takes a lot of the heavy lifting out of precaching by simplifying the API and ensuring assets are downloaded efficiently.

By default, offline mode is enabled when the site is installed as an app. See the offlineModeActivationStrategies option for details.

After the site has been precached, the service worker will serve cached responses for later visits. When a new build is deployed along with a new service worker, the new one will begin installing and eventually move to a waiting state. During this waiting state, a reload popup will show and ask the user to reload the page for new content. Until the user either clears the application cache or clicks the reload button on the popup, the service worker will continue serving the old content.

caution

Offline mode / precaching requires downloading all the static assets of the site ahead of time, and can consume unnecessary bandwidth. Ce n'est peut-être pas une bonne idée de l'activer pour toutes sortes de sites.

Options#

debug#

  • Type : boolean
  • Par défaut : false

Turn debug mode on:

  • Workbox logs
  • Additional Docusaurus logs
  • Unoptimized SW file output
  • Source maps

offlineModeActivationStrategies#

  • Type : Array<'appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always'>
  • Par défaut : ['appInstalled','queryString']

Strategies used to turn the offline mode on:

  • appInstalled: activates for users having installed the site as an app
  • queryString: activates if queryString contains offlineMode=true (convenient for PWA debugging)
  • mobile: activates for mobile users (width <= 940px)
  • saveData: activates for users with navigator.connection.saveData === true
  • always: activates for all users
caution

Utilisez ceci avec précaution : certains utilisateurs n'aiment pas être forcés d'utiliser le mode hors ligne.

injectManifestConfig#

Workbox options to pass to workbox.injectManifest(). This gives you control over which assets will be precached, and be available offline.

  • Type : InjectManifestOptions
  • Par défaut : {}
docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-pwa',
{
injectManifestConfig: {
manifestTransforms: [
//...
],
modifyURLPrefix: {
//...
},
// We already add regular static assets (html, images...) to be available offline
// You can add more files according to your needs
globPatterns: ['**/*.{pdf,docx,xlsx}'],
// ...
},
},
],
],
};

reloadPopup#

  • Type : string | false
  • Par défaut : '@theme/PwaReloadPopup'

Chemin du module pour recharger la composante popup. 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.

Une composante personnalisé peut être utilisé, à condition qu'il accepte onReload en tant que prop. Le callback onReload doit être appelé lorsque le bouton reload est cliqué. Cela indiquera au travailleur de service d'installer le travailleur du service d'attente et de recharger la page.

interface PwaReloadPopupProps {
onReload: () => void;
}

Le thème par défaut inclut une implémentation pour la popup de rechargement et utilise Infima Alerts.

pwa_reload.gif

pwaHead#

  • Type : Array<{ tagName: string } & Record<string,string>>
  • Par défaut : []

Array of objects containing tagName and key-value pairs for attributes to inject into the <head> tag. Technically you can inject any head tag through this, but it's ideally used for tags to make your site PWA compliant. Here's a list of tag to make your app fully compliant:

module.exports = {
plugins: [
[
'@docusaurus/plugin-pwa',
{
pwaHead: [
{
tagName: 'link',
rel: 'icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'manifest',
href: '/manifest.json',
},
{
tagName: 'meta',
name: 'theme-color',
content: 'rgb(37, 194, 160)',
},
{
tagName: 'meta',
name: 'apple-mobile-web-app-capable',
content: 'yes',
},
{
tagName: 'meta',
name: 'apple-mobile-web-app-status-bar-style',
content: '#000',
},
{
tagName: 'link',
rel: 'apple-touch-icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'mask-icon',
href: '/img/docusaurus.svg',
color: 'rgb(37, 194, 160)',
},
{
tagName: 'meta',
name: 'msapplication-TileImage',
content: '/img/docusaurus.png',
},
{
tagName: 'meta',
name: 'msapplication-TileColor',
content: '#000',
},
],
},
],
],
};

swCustom#

  • Type : string | undefined
  • Par défaut : undefined

Utile pour des règles additionnelles de Workbox. Vous pouvez faire tout ce qu'un travailleur de service peut faire ici et utiliser toute la puissance des bibliothèques de workbox. The code is transpiled, so you can use modern ES6+ syntax here.

Par exemple, pour mettre en cache des fichiers depuis des chemins externes :

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
// default fn export receiving some useful params
export default function swCustom(params) {
const {
debug, // :boolean
offlineMode, // :boolean
} = params;
// Cache responses from external resources
registerRoute((context) => {
return [
/graph\.facebook\.com\/.*\/picture/,
/netlify\.com\/img/,
/avatars1\.githubusercontent/,
].some((regex) => context.url.href.match(regex));
}, new StaleWhileRevalidate());
}

The module should have a default function export, and receives some params.

swRegister#

  • Type : string | false
  • Par défaut : 'docusaurus-plugin-pwa/src/registerSW.js'

Adds an entry before the Docusaurus app so that registration can happen before the app runs. The default registerSW.js file is enough for simple registration.

Passer false désactivera complètement l'inscription.

Edit this page