Aller au contenu
Design system @paulperigault

Composants

Mise en page

PWA installable

La PWA est une brique optionnelle du design system. Ce n’est pas un composant : on la copie depuis ce dépôt.

Manifeste et icônes

Le manifeste est servi sur /manifest.webmanifest en standalone. Ses couleurs lisent themeColor.light dans les jetons. Son nom vient deSITE_NAME.

Trois icônes PNG viennent de public/image/logo.svg, lu sans être modifié : 192 et 512 px en any, 512 px en maskable.

Service worker

scripts/sw.mjs écrit dist/sw.js après le build, sans précache. Sa version est un SHA-256 de la liste des fichiers de dist/.

Stratégies de cache
RequêteStratégie
Navigation, même origineRéseau d’abord, cache en repli
/_astro/* et /pwa/*Cache d’abord
/pagefind/*Réseau seul, jamais en cache
Autre origine, méthode autre que GETRéseau, non interceptée
Autre ressource, même origineRéseau, non interceptée

Le cache s’appelle pp-docs- suivi de la version. L’activation supprime les autres pp-docs-*. Seules les réponses réussies de même origine sont copiées.

Mise à jour

Le worker n’appelle pas skipWaiting() seul. Un bouton « Mettre à jour » apparaît quand une version attend. Le clic envoie SKIP_WAITING.

Données et en-têtes

Aucune collecte. Le seul stockage est le cache du worker, dans l’origine du site.

La CSP autorise worker-src 'self' et manifest-src 'self'./sw.js reçoit Cache-Control: no-cache.

Activer dans un autre site

  1. Copier src/lib/pwa.ts et fournir SITE_NAME, SITE_LANG.
  2. Ajouter l’endpoint src/pages/manifest.webmanifest.ts.
  3. Copier src/lib/sw-core.js et scripts/sw.mjs.
  4. Lancer node scripts/sw.mjs en dernier, après le build.
  5. Copier public/pwa/register.js, le charger avec defer.
  6. Déclarer <link rel="manifest">, lancer pwa-icons.mjs.
  7. Ajouter les en-têtes CSP et no-cache sur /sw.js.

Limites

  • Seules les pages déjà visitées sont lisibles hors ligne. Pas de précache.
  • Images, /favicon.ico et /r/registry.json ne sont pas en cache.
  • La recherche est indisponible hors ligne (/pagefind/*, réseau seul).
  • La version ne dépend que des noms : un contenu modifié sans nouveau nom ne purge rien.
  • Les icônes ne sont pas régénérées par le build : pwa-icons.mjs est manuel.
  • Le bouton pp-pwa-update n’a aucun style défini dans le dépôt.
  • Le test e2e est prévu dans apps/docs/e2e/pwa.spec.ts, il n’est pas encore là.

Aucune note Lighthouse n’est revendiquée pour cette PWA.