Manifest d'application web

Ce que vérifie ce contrôle

Recherche <link rel="manifest" href="..."> dans le head du document, récupère le fichier JSON référencé, et valide qu’il s’analyse correctement et contient les champs requis par les navigateurs pour afficher une invite d’installation : name (ou short_name), start_url, des icons avec au moins une 192×192 et une 512×512, et display.

Pourquoi c’est important

Le manifest contrôle la manière dont le système d’exploitation traite votre site une fois que l’utilisateur l’ajoute à son écran d’accueil.

• Android (Chrome, Samsung Internet, Edge) : avec un manifest valide et un service worker, le navigateur affiche l’invite “Ajouter à l’écran d’accueil”. Sans cela, pas de bannière d’installation — les utilisateurs doivent trouver l’option cachée dans le menu.
• Chromebook / Chrome desktop / Edge : installable comme application autonome depuis l’icône de la barre d’adresse.
• iOS Safari : lit name, theme_color et apple-touch-icon (toujours un lien séparé). N’honore pas display: standalone du manifest — il vous faut aussi <meta name="apple-mobile-web-app-capable" content="yes">.
• Sélecteur d’onglets : Chrome utilise theme_color du manifest (et la balise méta correspondante) pour la couleur de fond de la barre d’adresse.

Même si vous ne voulez pas d’invite d’installation PWA, le manifest alimente toujours le favicon utilisé par Android quand les utilisateurs ajoutent un signet, ainsi que l’icône affichée par Chrome dans le menu de débordement d’onglets sur mobile.

Comment corriger

1. Liez le manifest depuis chaque page :

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0b0b0b" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

L’extension de fichier est conventionnellement .webmanifest, mais .json fonctionne aussi tant que la réponse est servie avec Content-Type: application/manifest+json (ou application/json).

2. Rédigez un manifest valide minimal :

{
  "name": "MetricSpot",
  "short_name": "MetricSpot",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b0b0b",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

L’icône maskable est celle qu’Android utilise pour l’écusson de l’écran d’accueil. Sans elle, Android rogne votre icône et vous obtenez un cercle d’espace blanc autour d’un logo. Testez avec maskable.app.

3. Servez le bon type de contenu :

location = /manifest.webmanifest {
  default_type application/manifest+json;
  add_header Cache-Control "public, max-age=3600";
}

Si votre hébergeur le sert en text/plain ou text/html, Chrome ignore le fichier silencieusement.

Astro : déposez manifest.webmanifest dans public/ — Astro le copie tel quel à la racine du site. Ajoutez le <link> à votre layout de base.

Next.js (App Router) : exportez un manifest typé depuis app/manifest.ts et Next émet le JSON au build :

// app/manifest.ts
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "MetricSpot",
    short_name: "MetricSpot",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#0b0b0b",
    icons: [
      { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
      { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
    ],
  };
}

Le <link rel="manifest"> est injecté automatiquement par Next quand ce fichier existe.

WordPress : le chemin le plus simple est un plugin PWA (PWA by 10up ou Super Progressive Web Apps). Ou rédigez le manifest vous-même, déposez-le à la racine du thème, et ajoutez la balise <link> via wp_head :

add_action('wp_head', function () {
  echo '<link rel="manifest" href="' . esc_url(get_template_directory_uri() . '/manifest.webmanifest') . '">';
});

4. Associez aux bonnes balises méta. Le manifest fait le gros du travail, mais iOS Safari et les crawlers anciens veulent encore les balises séparées :

<meta name="theme-color" content="#0b0b0b" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Voir aussi Apple touch icon et Favicon pour le reste du jeu d’icônes.

Questions fréquentes

Ai-je besoin d’un service worker pour passer ce contrôle ?

Non. Le contrôle du manifest ne vérifie que le <link> et le fichier JSON. Il vous faut un service worker pour être installable comme PWA sur Android — sans lui, l’invite d’installation ne s’affichera pas même avec un manifest parfait. Le manifest seul vous donne toujours une meilleure icône d’écran d’accueil et des métadonnées de sélecteur d’onglets.

Pourquoi mon invite d’installation ne s’affiche-t-elle pas sur Android ?

Trois choses sont requises : un manifest valide avec des icônes 192×192 et 512×512, un service worker qui gère les événements fetch, et un site servi en HTTPS. Vérifiez chrome://inspect → “Devices” → votre onglet → Application → Manifest dans DevTools — Chrome liste exactement quels critères d’installation manquent.

Quelle est la différence entre display: standalone et display: fullscreen ?

standalone masque le chrome du navigateur mais conserve la barre d’état de l’OS (notifications, heure, batterie) — ce que veulent la plupart des apps. fullscreen masque tout et n’est généralement approprié que pour les jeux. minimal-ui conserve une fine barre de navigateur avec précédent/suivant ; rarement utilisé. La plupart des apps installables veulent standalone.