Le manifeste d’application Web

Le manifeste d’une application web est un fichier JSON qui indique au navigateur comment installer la page comme une application : le nom à utiliser, l’icône à afficher, l’URL à ouvrir, la palette de couleurs à appliquer et le mode d’affichage à utiliser (autonome, plein écran ou navigateur).

Référencez le manifeste depuis chaque page qui doit pouvoir être installée : <link rel="manifest" href="/manifest.webmanifest"> dans l’en-tête. Le navigateur le récupère une fois et le met en cache ; les mises à jour du manifeste sont prises en compte lors des chargements suivants.

Pour qu’un navigateur propose « Installer l’application », le manifeste doit au moins contenir : name (nom complet), short_name (libellé de l’écran d’accueil, environ 12 caractères), start_url, display (généralement « standalone ») et un tableau icons contenant au moins une image PNG de 192x192 et une de 512x512.

L’URL ouverte lorsque l’utilisateur appuie sur l’icône de l’application installée. Il s’agit souvent de / pour la page d’accueil ; elle peut inclure des paramètres de requête pour l’analyse : "start_url": "/?source=pwa" identifie séparément les sessions issues d’une installation et celles du navigateur.

display peut être « browser » (interface normale du navigateur), « minimal-ui » (une partie de l’interface), « standalone » (sans interface du navigateur, comme une application) ou « fullscreen » (sans barre d’état). Le mode standalone est le choix habituel pour une PWA.

Incluez une icône dont le but est « maskable » afin qu’Android puisse l’adapter pour l’assortir aux autres icônes de l’écran d’accueil : { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }. Les icônes adaptables comportent une zone de sécurité permettant au système de les recadrer.

theme_color définit la teinte de la barre d’adresse lorsque l’application s’exécute dans un navigateur. background_color est affichée comme couleur d’arrière-plan de l’écran de démarrage avant le chargement de la page. Faites correspondre ces couleurs aux couleurs principales de votre système graphique pour obtenir une ouverture soignée.

"orientation": "portrait" verrouille l’application en mode portrait lorsqu’elle est installée. « any », « landscape » et « portrait-primary » sont d’autres possibilités. La plupart des PWA polyvalentes ne définissent pas cette propriété et laissent l’appareil choisir son orientation.

Pour que le navigateur affiche « Installer », la page doit être diffusée via HTTPS, enregistrer un agent de service qui gère les événements de récupération, associer un manifeste valide contenant les champs minimaux et respecter des critères d’engagement, par exemple lorsque l’utilisateur a interagi avec la page.

Les navigateurs mettent le manifeste en cache. Pour forcer son actualisation après des modifications, changez les URL des icônes, en utilisant si nécessaire un paramètre de requête pour contourner le cache, ou attendez : la plupart des navigateurs vérifient périodiquement les mises à jour. Il n’existe pas d’API de mise à jour forcée ; concevez votre application en partant du principe que les utilisateurs peuvent conserver un manifeste légèrement obsolète pendant un certain temps.

L’onglet Application de Chrome DevTools affiche le manifeste analysé, les valeurs calculées et les erreurs de validation. L’audit PWA de Lighthouse vérifie chaque condition d’installation et indique ce qui manque. Utilisez les deux outils pendant le développement pour confirmer que l’application peut être installée.

Que fait la valeur display : « standalone » dans le manifeste d’une application web ?

Le manifeste d’une application web (manifest.webmanifest) indique au navigateur comment installer votre page comme une application : name, short_name, start_url, display, theme_color et les icônes (192 et 512, avec en plus une icône adaptable pour Android). Associez-le via <link rel="manifest">, assurez-vous d’utiliser HTTPS et un agent de service pour permettre l’installation, puis testez avec Chrome DevTools et l’audit PWA de Lighthouse.