@starterlib/cli 0.14.0 → 0.15.0

package/README.md

@@ -104,6 +104,14 @@ par un point d'entree vide dans la configuration `production`).
   `["src/app/gabarits/coquille.ts", "src/app/pages/accueil.ts"]`), cherchees dans `browser-stats.json` que la
   cible esbuild d'`angular.json` ecrit avec `statsJson: true` ; sans elles, le premier ecran compte toutes les pages
   de route (D171) ;
+- pour l'hote seul (0.15.0, lot P09-49 d'Aplomb), `starterWeb.serviceWorker: true` : `starter-web construire` pose a
+  la racine de sa sortie `sw.js` (une navigation que le reseau ne sert pas recoit la page hors ligne ; aucune page,
+  aucune reponse d'API ni du BFF, aucun manifeste en cache, aucune file hors ligne ; sa version est le condense de la
+  page construite), `sw-retrait.js` (l'interrupteur de retrait, que le serveur sert sous `/sw.js` a sa place), et la
+  page hors ligne `hors-ligne.html` avec sa feuille `hors-ligne.css`, statiques, que l'application remplace en posant
+  les siennes dans `public/` (`src/construction/service-worker.mjs`). Le serveur sert `/sw.js` sans cache et admet
+  `worker-src 'self'` ; l'hote l'enregistre par `enregistrerLeServiceWorker` (`@starterlib/core/navigateur`), sous la
+  politique Trusted Types `starter#service-worker`. Refuse pour un remote ou une application autonome ;
 - le nom et `pleinePage` : `manifest.source.json` (un remote), `socle` pour l'hote ;
 - les formulations que l'application interdit dans ses textes : `starterWeb.formulationsInterdites`,
   chemin d'un fichier JSON relatif a sa racine, qui liste des `formulations` (un `id`, des `textes`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starterlib/cli",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Chaine de verification et de construction des SPA du socle frontal starter : starter-web verify, construire, sprite, manifeste, precompresser. Jamais en dependance de production.",
   "license": "UNLICENSED",
   "type": "module",

package/src/construction/construire.mjs

@@ -7,7 +7,9 @@
  *      PRERENDUE (`starterWeb.prerendu`, 0.11.4) le pose dans chaque page, et sort de ses pages les feuilles des
  *      composants et les attributs `style` (`prerendu.mjs`) ;
  *   4. le manifeste (il renomme les catalogues i18n) ;
- *   5. la precompression (apres le renommage, sans quoi des variantes resteraient orphelines).
+ *   5. le service worker minimal d'un hote qui le demande (`starterWeb.serviceWorker`, P09-49 d'Aplomb) : sa version
+ *      est le condense de la page definitive ;
+ *   6. la precompression (apres le renommage, sans quoi des variantes resteraient orphelines).
  */
 import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
@@ -19,6 +21,7 @@ import {
   prechargerLaPoliceDansLesPages,
   resumerLExternalisation,
 } from './prerendu.mjs';
+import { poserLeServiceWorker } from './service-worker.mjs';
 import { poserLeSprite } from './sprite.mjs';
 
 /** Inter latin, graisse variable, style normal : le nom que `polices.css` du socle donne. */
@@ -100,6 +103,12 @@ export function construire(
       `  manifest.json : ${manifeste.nom} ${manifeste.version}, socle ${manifeste.socle.construit}`,
     );
   }
+  // Le service worker minimal d'un hote qui le demande (P09-49) : apres la page definitive, avant la precompression.
+  if (projet.serviceWorker) {
+    const { version, gardes } = poserLeServiceWorker(projet.sortie);
+    const propres = gardes.length === 0 ? '' : ` ; de l'application : ${gardes.join(', ')}`;
+    journal.info(`  service worker : sw.js ${version}, sw-retrait.js, page hors ligne${propres}`);
+  }
   const { resume, defauts } = juger(precompresser(projet.sortie));
   journal.info(`  precompression : ${resume}`);
   for (const defaut of defauts) journal.erreur(`  - ${defaut}`);

package/src/construction/service-worker/hors-ligne.css

@@ -0,0 +1,42 @@
+/*
+ * Feuille de la page hors ligne du socle frontal (lot P09-49 d'Aplomb) : gardee par le service worker avec sa page, sans
+ * police ni image a charger (le reseau manque). Les deux themes suivent le systeme.
+ */
+:root {
+  color-scheme: light dark;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  line-height: 1.5;
+}
+
+body {
+  margin: 0;
+  background: Canvas;
+  color: CanvasText;
+}
+
+.hors-ligne {
+  box-sizing: border-box;
+  max-inline-size: 36rem;
+  margin-inline: auto;
+  padding-block: 4rem;
+  padding-inline: 1rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: 1.125rem;
+  line-height: 1.3;
+}
+
+a {
+  color: LinkText;
+}

package/src/construction/service-worker/hors-ligne.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+  Page hors ligne du socle frontal (@starterlib ; lot P09-49 d'Aplomb) : le service worker la rend a une navigation que
+  le reseau ne sert pas. Statique : aucun script, aucun style en ligne (la politique de la page n'en admet pas sans
+  nonce), aucune donnee. Une application la remplace par la sienne en posant `hors-ligne.html` et `hors-ligne.css`
+  dans `public/`.
+-->
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Hors ligne &middot; Offline</title>
+    <link rel="stylesheet" href="/hors-ligne.css" />
+  </head>
+  <body>
+    <main class="hors-ligne">
+      <h1>Vous &ecirc;tes hors ligne</h1>
+      <p>
+        La page demand&eacute;e n&rsquo;a pas pu se charger. Rien n&rsquo;a &eacute;t&eacute;
+        envoy&eacute;. V&eacute;rifiez votre connexion, puis rechargez la page.
+      </p>
+      <div lang="en">
+        <h2>You are offline</h2>
+        <p>
+          The page could not load, and nothing was sent. Check your connection, then reload the
+          page.
+        </p>
+      </div>
+      <p>
+        <a href="">Recharger la page &middot; <span lang="en">Reload the page</span></a>
+      </p>
+    </main>
+  </body>
+</html>

package/src/construction/service-worker/sw-retrait.js

@@ -0,0 +1,22 @@
+/*
+ * Interrupteur de retrait du service worker du socle frontal (@starterlib ; lot P09-49 d'Aplomb) : le BFF le sert sous
+ * `/sw.js` a la place du service worker quand l'exploitant le retire. Le navigateur, qui revoit `/sw.js` a chaque
+ * navigation, l'installe a la place de l'ancien : il efface les caches que celui-ci avait poses, puis se desinscrit.
+ * Les pages ouvertes continuent sur le reseau ; rien n'est recharge de force, rien n'est garde.
+ */
+'use strict';
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (evenement) => {
+  evenement.waitUntil(
+    (async () => {
+      for (const cle of await caches.keys()) {
+        if (cle.startsWith('starter-hors-ligne-')) await caches.delete(cle);
+      }
+      await self.registration.unregister();
+    })(),
+  );
+});

package/src/construction/service-worker/sw.js

@@ -0,0 +1,81 @@
+/*
+ * Service worker minimal du socle frontal (@starterlib ; lot P09-49 d'Aplomb, ratification « pwa-legere » de DEC-062),
+ * pose par `starter-web construire` dans la sortie d'un hote qui le demande (`starterWeb.serviceWorker`).
+ *
+ * Ce qu'il fait, et rien d'autre : une NAVIGATION que le reseau ne sert pas recoit la page hors ligne statique.
+ *
+ * Ce qu'il ne fait jamais : garder une page, une reponse `/api/**` ou `/bff/**`, un `manifest.json` ou un
+ * `remoteEntry.json` ; mettre un geste en file pour plus tard. Chaque navigation va au reseau : le BFF rend la coquille
+ * avec le nonce de SA reponse, les versions et la maintenance restent les siennes. Les seuls fichiers gardes sont la
+ * page hors ligne et sa feuille, statiques, sans donnee de la personne.
+ *
+ * Le BFF le sert sous `/sw.js`, sans cache (`Cache-Control: no-cache`) ; son interrupteur de retrait sert a la place
+ * `sw-retrait.js`, qui le desinscrit de chaque navigateur a la verification suivante.
+ */
+'use strict';
+
+/** La version de la construction, posee par `starter-web construire` : une construction nouvelle, un worker nouveau. */
+const VERSION = '__VERSION__';
+const CACHE = `starter-hors-ligne-${VERSION}`;
+const PAGE_HORS_LIGNE = '/hors-ligne.html';
+const FEUILLE_HORS_LIGNE = '/hors-ligne.css';
+
+self.addEventListener('install', (evenement) => {
+  evenement.waitUntil(
+    caches
+      .open(CACHE)
+      .then((cache) =>
+        cache.addAll(
+          [PAGE_HORS_LIGNE, FEUILLE_HORS_LIGNE].map(
+            (chemin) => new Request(chemin, { cache: 'reload' }),
+          ),
+        ),
+      )
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener('activate', (evenement) => {
+  evenement.waitUntil(
+    (async () => {
+      // Les caches d'une version precedente partent : un seul jeu de fichiers hors ligne a la fois.
+      for (const cle of await caches.keys()) {
+        if (cle.startsWith('starter-hors-ligne-') && cle !== CACHE) await caches.delete(cle);
+      }
+      if (self.registration.navigationPreload) await self.registration.navigationPreload.enable();
+      await self.clients.claim();
+    })(),
+  );
+});
+
+self.addEventListener('fetch', (evenement) => {
+  const requete = evenement.request;
+  const adresse = new URL(requete.url);
+  // Une autre origine, une autre methode : le navigateur seul, comme sans service worker.
+  if (adresse.origin !== self.location.origin || requete.method !== 'GET') return;
+
+  if (requete.mode === 'navigate') {
+    evenement.respondWith(
+      (async () => {
+        try {
+          // Le prechargement de la navigation, s'il a eu lieu, sinon le reseau : jamais une copie.
+          const prechargee = await evenement.preloadResponse;
+          return prechargee ?? (await fetch(requete));
+        } catch {
+          return (await caches.match(PAGE_HORS_LIGNE, { cacheName: CACHE })) ?? Response.error();
+        }
+      })(),
+    );
+    return;
+  }
+
+  // La feuille de la page hors ligne, et elle seule : lue au cache quand le reseau manque.
+  if (adresse.pathname === FEUILLE_HORS_LIGNE) {
+    evenement.respondWith(
+      fetch(requete).catch(
+        async () =>
+          (await caches.match(FEUILLE_HORS_LIGNE, { cacheName: CACHE })) ?? Response.error(),
+      ),
+    );
+  }
+});

package/src/construction/service-worker.mjs

@@ -0,0 +1,77 @@
+/**
+ * Le service worker minimal d'un hote (lot P09-49 d'Aplomb ; ratification « pwa-legere » de DEC-062), pose dans sa
+ * sortie par `starter-web construire` quand `starterWeb.serviceWorker` le demande.
+ *
+ * - `sw.js` : une navigation que le reseau ne sert pas recoit la page hors ligne ; rien d'autre n'est garde ni rejoue
+ *   (`service-worker/sw.js`). Sa VERSION est le condense de la page de la construction : une construction nouvelle
+ *   change ses octets, et le navigateur installe le worker nouveau a la navigation suivante.
+ * - `sw-retrait.js` : l'interrupteur de retrait, que le BFF sert sous `/sw.js` a la place du worker.
+ * - `hors-ligne.html` et `hors-ligne.css` : la page hors ligne du socle, statique ; celle de l'application, posee dans
+ *   `public/` (donc deja dans la sortie), est gardee.
+ *
+ * A poser APRES la page definitive (police prechargee) et AVANT la precompression, qui compresse aussi ces fichiers.
+ */
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const MODELES = fileURLToPath(new URL('./service-worker/', import.meta.url));
+
+/** Les fichiers du service worker, a la racine de la sortie : le BFF les sert depuis la meme origine. */
+export const FICHIERS_DU_SERVICE_WORKER = Object.freeze([
+  'sw.js',
+  'sw-retrait.js',
+  'hors-ligne.html',
+  'hors-ligne.css',
+]);
+
+/**
+ * La politique Trusted Types de l'enregistrement, que `enregistrerLeServiceWorker` (`@starterlib/core/navigateur`)
+ * cree sous le meme nom : la politique de la page de l'hote doit la porter nommement.
+ */
+export const POLITIQUE_DU_SERVICE_WORKER = 'starter#service-worker';
+
+/** Ce que l'application peut fournir a la place du socle : sa page hors ligne et sa feuille. */
+const FOURNIS_PAR_L_APPLICATION = new Set(['hors-ligne.html', 'hors-ligne.css']);
+
+const MARQUE_DE_VERSION = "'__VERSION__'";
+
+/** La version d'une construction : le condense de sa page, qui nomme chacun de ses morceaux haches. */
+export function versionDeLaConstruction(sortie) {
+  const page = join(sortie, 'index.html');
+  if (!existsSync(page)) {
+    throw new Error(`service worker : ${page} absent, construire d'abord.`);
+  }
+  return createHash('sha256').update(readFileSync(page)).digest('hex').slice(0, 16);
+}
+
+/**
+ * Pose les fichiers du service worker dans `sortie` ; rend la version posee et les fichiers que l'application fournit
+ * elle-meme (gardes). Idempotent : une seconde pose sur la meme sortie ecrit les memes octets.
+ */
+export function poserLeServiceWorker(sortie) {
+  const version = versionDeLaConstruction(sortie);
+  const gardes = [];
+  for (const nom of FICHIERS_DU_SERVICE_WORKER) {
+    const cible = join(sortie, nom);
+    const modele = readFileSync(join(MODELES, nom), 'utf8');
+    if (
+      FOURNIS_PAR_L_APPLICATION.has(nom) &&
+      existsSync(cible) &&
+      readFileSync(cible, 'utf8') !== modele
+    ) {
+      gardes.push(nom);
+      continue;
+    }
+    if (nom === 'sw.js' && !modele.includes(MARQUE_DE_VERSION)) {
+      throw new Error('service worker : le modele sw.js ne porte plus sa marque de version.');
+    }
+    writeFileSync(
+      cible,
+      nom === 'sw.js' ? modele.replace(MARQUE_DE_VERSION, `'${version}'`) : modele,
+      'utf8',
+    );
+  }
+  return { version, gardes };
+}

package/src/etapes/securite.mjs

@@ -29,6 +29,7 @@
 import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fichiers, lireJson, relatif } from '../commun.mjs';
+import { POLITIQUE_DU_SERVICE_WORKER } from '../construction/service-worker.mjs';
 import { natureDesFichiers } from '../livraison.mjs';
 
 /** Les politiques que la CSP du BFF laisse creer par defaut (application.yml du BFF). */
@@ -360,6 +361,19 @@ export function jugerUnFichierLivre(
   return defauts;
 }
 
+/**
+ * Les politiques Trusted Types que l'application declare : un remote (lot 270), que le BFF retire s'il en exige une
+ * que sa CSP n'admet pas ; une application autonome (0.11.2), dont la page doit les porter nommement (la page d'ui-auth
+ * d'Aplomb et le widget de verification humaine) ; l'hote qui enregistre le service worker du socle (0.15.0, lot
+ * P09-49 d'Aplomb), celle de son enregistrement, que la politique de sa page doit porter avec `worker-src 'self'`.
+ * L'etape le dit des la construction.
+ */
+export function politiquesDeclarees(projet) {
+  if (projet.role === 'remote') return projet.source?.trustedTypes ?? [];
+  if (projet.role === 'autonome') return projet.paquet.starterWeb?.trustedTypes ?? [];
+  return projet.serviceWorker === true ? [POLITIQUE_DU_SERVICE_WORKER] : [];
+}
+
 export default {
   nom: 'securite',
   roles: ['remote', 'hote', 'autonome'],
@@ -374,23 +388,15 @@ export default {
       };
     }
     const { partages } = natureDesFichiers(lireJson(join(projet.sortie, 'remoteEntry.json')));
-    // Les politiques que l'application declare : un remote (lot 270), que le BFF retire s'il en exige une
-    // que sa CSP n'admet pas ; une application autonome (0.11.2), dont la page doit les porter nommement
-    // (la page d'ui-auth d'Aplomb et le widget de verification humaine). L'etape le dit des la construction.
-    const declarees =
-      projet.role === 'remote'
-        ? (projet.source?.trustedTypes ?? [])
-        : projet.role === 'autonome'
-          ? (projet.paquet.starterWeb?.trustedTypes ?? [])
-          : [];
+    const declarees = politiquesDeclarees(projet);
     const avertissements = declarees
       .filter((politique) => !POLITIQUES_ADMISES.includes(politique))
       .map((politique) =>
-        projet.role === 'autonome'
+        projet.role === 'remote'
           ? `trustedTypes : "${politique}" absente de la liste par defaut du BFF ` +
-            '(PLATFORM_WEB_CSP_TRUSTED_TYPES) : la page de l application doit la porter nommement.'
+            '(PLATFORM_WEB_CSP_TRUSTED_TYPES) : le BFF retire le remote tant qu elle n y est pas.'
           : `trustedTypes : "${politique}" absente de la liste par defaut du BFF ` +
-            '(PLATFORM_WEB_CSP_TRUSTED_TYPES) : le BFF retire le remote tant qu elle n y est pas.',
+            '(PLATFORM_WEB_CSP_TRUSTED_TYPES) : la page de l application doit la porter nommement.',
       );
     const defauts = [];
     // 0.11.7 : les admissions nommees, et la carte de la construction qui dit les sources de chaque morceau.

package/src/projet.mjs

@@ -11,6 +11,7 @@
  * - le nom et `pleinePage` : `manifest.source.json` (un remote), `socle` pour l'hote ;
  * - le prefixe : `prefix` du projet d'`angular.json`, ou `starterWeb.prefixe` ;
  * - le prerendu : `starterWeb.prerendu` (une application autonome servie en pages statiques, 0.11.4) ;
+ * - le service worker minimal : `starterWeb.serviceWorker` (l'hote seul, lot P09-49 d'Aplomb, 0.15.0) ;
  * - le dossier livre : `outputPath` de la cible `@angular/build:application`, plus `browser`.
  *
  * Les options de la ligne de commande (`--nom`, `--prefixe`, `--pleine-page`) les remplacent : ce
@@ -76,6 +77,14 @@ export function lireLeProjet(racine, options = {}) {
       `starterWeb.prerendu : reserve a une application autonome, pas a un role "${role}".`,
     );
   }
+  // Le service worker minimal (lot P09-49 d'Aplomb) : celui d'un hote, qui sert ses navigations ; jamais celui d'un
+  // remote (il vit sous le perimetre de l'hote) ni d'une application autonome (l'ecran anonyme, l'urgence).
+  const serviceWorker = reglages.serviceWorker === true;
+  if (serviceWorker && role !== 'hote') {
+    throw new ProjetIllisible(
+      `starterWeb.serviceWorker : reserve a l'hote, pas a un role "${role}".`,
+    );
+  }
   const source = role === 'remote' ? lireJson(cheminSource) : null;
   if (role === 'remote' && source === null) {
     throw new ProjetIllisible('manifest.source.json absent ou illisible : un remote en a un.');
@@ -100,6 +109,7 @@ export function lireLeProjet(racine, options = {}) {
     prefixe: options.prefixe ?? reglages.prefixe ?? projet.prefix ?? null,
     pleinePage: options.pleinePage ?? source?.pleinePage === true,
     prerendu,
+    serviceWorker,
     source,
     nomDuProjetAngular: nomDuProjet,
     sortieRelative: sortie.split('\\').join('/'),