Installation et mode hors ligne : c’est vous qui décidez#

La marketplace donne à votre application sa propre adresse et y sert vos fichiers. Elle n’exige ni manifeste ni service worker, et ne marque pas les applications comme « installables » ou « fonctionne hors ligne ». Si vous voulez que votre application soit installable, fonctionne hors ligne ou affiche une page qui invite à l’installer, c’est à vous de le construire. Si c’est le cas, dites-le à vos utilisateurs sur votre propre page.

Dans le catalogue, chaque application a un lien Ouvrir vers son adresse. Rien d’autre.

Pourquoi chaque application a son sous-domaine#

Chaque application tourne sur son propre sous-domaine, c’est-à-dire sa propre origine dans le navigateur. Votre application a son propre stockage (IndexedDB, localStorage) et son propre service worker, totalement séparés de ceux des autres. Une application ne peut jamais lire les données d’une autre. Une invite d’installation appartient donc à votre application seule.

Si vous voulez qu’on puisse l’installer#

L’installation est une fonction du navigateur qui demande deux choses à vos fichiers, de simples fichiers de votre paquet :

• un manifeste web, lié depuis vos pages avec <link rel="manifest" href="/manifest.webmanifest">, avec un nom, start_url, scope, display: "standalone" et des icônes (192 et 512 px) ;
• un service worker (par exemple sw.js à la racine du paquet, pour que sa portée couvre toute l’application), enregistré depuis votre code avec navigator.serviceWorker.register('/sw.js'). C’est aussi lui qui permet le mode hors ligne.

Des outils comme vite-plugin-pwa génèrent les deux. Si votre application a un manifeste, la marketplace utilise aussi son nom, sa description, son icône et ses étiquettes pour la fiche. C’est la seule chose qu’elle en lit.

Une page vitrine et l’application dans des dossiers séparés#

Un schéma qui fonctionne bien : une page vitrine à la racine de votre adresse, qui invite à installer, et l’application elle-même dans un dossier comme /app.

• / affiche le nom de l’application, ce qu’elle fait et un bouton Installer. Le bouton garde l’événement beforeinstallprompt du navigateur et appelle prompt() quand on l’appuie. Là où le navigateur n’a pas cet événement (Safari sur iPhone et iPad, par exemple), la page explique comment installer à la main.
• Le manifeste définit "start_url": "/app" et "scope": "/". L’application installée s’ouvre toujours sur /app : ceux qui l’ont installée ne voient jamais la vitrine, ceux qui ne l’ont pas installée y sont invités.
• Quand la vitrine s’ouvre dans la fenêtre de l’application installée (matchMedia('(display-mode: standalone)')), envoyez directement vers /app.

Le dossier examples/market-pwa du dépôt est un exemple complet, avec un vrai service worker, des icônes et un parcours d’installation testé dans un navigateur.

Si vous voulez qu’elle fonctionne hors ligne#

Un service worker met vos fichiers en cache pour que l’application s’ouvre sans réseau. Les appels au backend de la plateforme (/_dg/) ont toujours besoin d’une connexion : gardez une copie locale de ce dont l’utilisateur a besoin et ne mettez jamais rien de /_dg/ en cache.

Publier une mise à jour#

La marketplace revalide sw.js, index.html et le manifeste à chaque chargement : une version approuvée atteint les navigateurs sans astuce de cache. Les navigateurs cherchent un nouveau service worker au lancement ou à la navigation, et au plus une fois par jour tant que l’application reste ouverte. Pour détecter une mise à jour dans une application installée déjà ouverte, demandez à l’enregistrement de vérifier quand elle repasse au premier plan :

navigator.serviceWorker.ready.then((registration) => {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible' && navigator.onLine) void registration.update()
  })
})

Changez quelque chose dans votre service worker à chaque build (par exemple un nom de cache contenant un hash de vos fichiers) pour que les navigateurs voient une nouvelle version. Ne mettez jamais sw.js lui-même en cache, sinon les mises à jour ne seront pas détectées. Sans service worker, l’application reçoit les nouveaux fichiers au prochain rechargement, car index.html est revalidé.

Testez avant de soumettre#

• Servez votre build en local et ouvrez-le dans Chrome. Dans les DevTools, le panneau Application montre le manifeste et le service worker, et Lighthouse indique si l’application est installable.
• Passez le réseau en Hors connexion dans les DevTools et rechargez : l’application doit encore s’ouvrir.
• Rappelez-vous que le stockage dépend de l’origine : les données de votre test local ne se retrouveront pas à votre adresse sur la marketplace.