Fait avec Chinaski

PWA

Chinaski peut présenter votre site généré comme une Progressive Web App installable. Activer la PWA (désactivée par défaut, Settings → PWA) fait générer par le builder statique trois artefacts supplémentaires par langue : un web app manifest, un service worker, et une page de repli hors ligne.

Le manifeste

manifest.json est généré par langue depuis vos réglages :

  • Name et short name: le nom du site, le short name prenant ce dernier par défaut (tronqué à environ 16 caractères). Les deux sont paramétrables.
  • Description: votre tagline.
  • Start URL et scope: par langue (le préfixe de langue, ou le sous-domaine par langue en mode URL par sous-domaine).
  • Display mode: standalone (défaut), minimal-ui, fullscreen ou browser.
  • Couleurs de thème et d'arrière-plan: utilisées pour le chrome du navigateur et l'écran de démarrage.
  • Icônes: les icônes d'installation 192 et 512 viennent de votre favicon téléversé (avec une variante maskable incluse). Pas de favicon configuré signifie pas d'icônes dans le manifeste, configurez-en un à moins de ne pas prévoir d'exposer une app installable.

Le service worker

Généré par langue avec l'horodatage du build incorporé comme version de cache : chaque rebuild produit un cache neuf et met automatiquement les anciens à la retraite.

  • Précaching à l'installation : la page d'accueil, la page hors ligne, le manifeste, la racine du blog, la page de recherche, chaque URL de page et de post dans cette langue, plus les polices fournies, récupérées individuellement pour qu'un fichier manquant n'avorte pas l'installation.
  • Stratégie à l'exécution : les navigations de page sont network-first (contenu frais en ligne, copie en cache en cas de connexion, puis la page hors ligne) ; seules les requêtes same-origin sont interceptées ; le trafic cross-origin passe sans y toucher ; les POST de formulaires ont leur propre chemin de repli dédié.
  • Un nouveau worker prend le relais rapidement (skipWaiting + claiming clients).

Comme la version de cache du worker change à chaque build, les mises à jour publiées remplacent automatiquement le cache périmé ; les lecteurs obtiennent le nouveau contenu à leur prochaine visite au lieu d'être bloqués sur un vieux cliché.

La page hors ligne

offline.html est générée depuis les propres templates du site, avec le header, le footer, les contacts de l'organisation, la gestion RTL, et votre titre et message hors ligne configurés (Settings → PWA). C'est la destination quand un visiteur demande une page qui n'est ni fraîchement hors ligne ni en cache.

Les réglages en un coup d'œil

Réglage Rôle Défaut
Enable PWA Génère le manifeste, le service worker, la page hors ligne au moment du build off
Short name Libellé de l'icône de l'écran d'accueil (~16 caractères) nom du site
Theme color Couleur du chrome du navigateur #6A0DAD
Background color Arrière-plan de l'écran de démarrage #FFF8DC
Display mode standalone / minimal-ui / fullscreen / browser standalone
Offline title / message Contenu de la page de repli hors ligne depuis la tagline

Notes opérationnelles

  • Les changements de réglages PWA déclenchent un rebuild, comme d'habitude.
  • Les exemples de reverse proxy livrés servent /sw.js avec un en-tête no-cache ; c'est délibéré : cela permet à un service worker nouvellement généré de remplacer promptement le précédent tandis que tout autre actif garde son long cache.
  • Chaque langue reçoit son propre jeu PWA complet (son manifeste, son worker, sa page hors ligne), en cohérence avec le modèle d'URL par langue.
Lisez ce site en