Rendre une PWA installable correctement : le guide complet

Une Progressive Web App est « installable » quand le navigateur accepte de la proposer sur l'écran d'accueil ou dans le lanceur d'applications. C'est aussi la première condition pour en faire une application Android : une PWA mal configurée pose des problèmes bien avant le build.

Les critères d'installation

Les règles exactes varient selon le navigateur et sa version, mais le socle est stable :

• HTTPS avec un certificat valide, sur toutes les pages utiles (localhost est toléré en développement).
• Un manifeste web lié depuis la page (<link rel="manifest" href="/manifest.json">).
• Un nom (name ou short_name), une start_url et un display de type standalone, fullscreen ou minimal-ui.
• Des icônes d'au moins 192 px et 512 px.

Selon les navigateurs et leurs versions, un service worker peut être exigé ou non pour l'installation. Il reste indispensable pour le fonctionnement hors ligne : ajoutez-en un.

Un manifeste minimal qui fonctionne

{
  "name": "Mon application",
  "short_name": "MonApp",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#c2410c",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Les erreurs les plus fréquentes

1. Une icône déclarée 512×512 qui ne l'est pas. Le champ sizes est une déclaration, pas une vérification : ouvrez le fichier et contrôlez ses vraies dimensions. Une icône non carrée est refusée par la plupart des outils de génération d'application.
2. Une start_url qui redirige vers une autre origine ou une page de connexion : l'application démarre sur une page inattendue.
3. Un manifeste servi avec un mauvais type ou bloqué par une politique de sécurité de contenu (CSP) trop stricte.
4. Aucune icône maskable. Sur Android, l'icône est alors placée dans un cercle ou un carré arrondi avec des bandes blanches.
5. Un scope trop étroit : les liens hors du scope s'ouvrent dans le navigateur.

Comment vérifier

Dans Chrome, l'onglet Application des outils de développement affiche le manifeste, ses erreurs, les icônes et l'état du service worker. Lighthouse produit un rapport d'installabilité.

Avec PWA2APP, l'analyseur applique des règles techniques versionnées à votre PWA avant tout build. Les règles PWA-MAN-001 à PWA-MAN-005 contrôlent le manifeste, PWA-ICON-001 et PWA-ICON-002 les icônes, PWA-SW-001 le service worker et PWA-VP-001 la balise viewport. Chaque règle a sa page dans la documentation, avec sa recommandation.

À retenir

• Vérifiez les vraies dimensions de vos icônes.
• Gardez une start_url stable, sur votre origine.
• Ajoutez une icône maskable et un service worker.
• Contrôlez le tout avant de penser à l'application native.

Risques détectés selon les règles techniques actuellement configurées : un rapport propre n'est pas une garantie d'acceptation par un store, dont la review reste indépendante.