Générateur de manifeste

Générateur de Web App Manifest - Créez votre manifest.json PWA

Un outil complet pour générer un fichier manifest.json destiné aux Progressive Web Apps. Configurez les métadonnées, icônes, couleurs, modes d'affichage et autres paramètres nécessaires pour rendre votre application web installable sur mobile et desktop.

Qu'est-ce qu'un manifeste Web App ?

Le Web App Manifest est un fichier JSON qui décrit votre Progressive Web App (PWA) et la façon dont elle doit se comporter une fois installée sur l'appareil de l'utilisateur.\n\n**Composants clés :**\n\n**Informations de base :**\n- name : nom complet (ex. « Mon App »)\n- short_name : nom court (12 caractères max)\n- description : rôle de l'app\n- start_url : URL chargée au lancement\n- scope : périmètre de navigation\n\n**Paramètres d'affichage :**\n- display : standalone, fullscreen, etc.\n- orientation : préférence d'orientation\n- lang : code de langue\n\n**Identité visuelle :**\n- theme_color : couleur de l'UI\n- background_color : couleur de l'écran de splash\n- icons : différentes tailles d'icônes\n- screenshots : aperçus de l'app\n\n**Exemple :**\n```json
{
"name": "Mon App",
"short_name": "MonApp",
"start_url": "/",
"display": "standalone",
"theme_color": "#2196F3",
"background_color": "#ffffff",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}
```\n\n**Pourquoi l'utiliser :**\n- Rend l'app installable\n- Offre une expérience quasi native\n- Contrôle l'écran de démarrage\n- Définit l'identité dans l'OS\n- Indispensable pour la PWA\n- Améliore l'engagement\n\n**Support navigateurs :** Chrome/Edge (complet), Firefox (bon), Safari iOS (partiel).\n\nPlacez le fichier à la racine et reliez-le :\n```html
<link rel="manifest" href="/manifest.json">
```

Comment utiliser le générateur de manifeste ?

**Étape 1 : Informations de base**\n1. **Nom de l'app (obligatoire)** : affiché dans l'invite d'installation.\n2. **Nom court** : version abrégée (12 caractères max) pour l'écran d'accueil.\n3. **Description** : courte phrase pour les stores et prompts.\n4. **Start URL** : page ouverte après installation (souvent « / »).\n5. **Scope** : limite de navigation (généralement « / » pour couvrir tout le site).\n\n**Étape 2 : Affichage**\n- **Display** : standalone (sans barre) recommandé, fullscreen, minimal UI ou browser.\n- **Orientation** : any, portrait, landscape, portrait/landscape primary.\n- **Langue** : code ISO (fr, en, es...).\n\n**Étape 3 : Thème et couleurs**\n- **Theme color** : couleur de la barre d'adresse/task switcher (hex).\n- **Background color** : couleur de l'écran splash, idéalement identique au fond principal.\n\n**Étape 4 : Icônes et captures**\n- Ajoutez des icônes 192x192 et 512x512 (PNG).\n- Ajoutez des captures 1280x720 ou 750x1334 pour l'invite d'installation.\n\n**Étape 5 : Métadonnées optionnelles**\n- Catégories séparées par des virgules (productivity, tools, etc.).\n- ID IARC si vous ciblez les stores nécessitant une classification.\n\nCliquez sur « Générer » pour obtenir le JSON prêt à l'emploi puis téléchargez ou copiez-le.

Quels champs sont obligatoires dans manifest.json ?

Les navigateurs exigent différents champs mais pour une PWA complète, prévoyez :\n\n**Obligatoires :**\n- name : nom complet\n- short_name : nom court\n- start_url : point de lancement\n- display : mode\n- icons : au moins une icône 192x192 et 512x512\n\n**Fortement recommandés :**\n- theme_color\n- background_color\n- description\n- scope\n- lang\n\n**Optionnels utiles :**\n- orientation\n- screenshots\n- categories\n- related_applications\n- shortcuts\n- share_target\n\nAssurez-vous aussi d'ajouter le service worker pour bénéficier du statut PWA complet.

Comment ajouter des icônes, captures et couleurs optimisées ?

**Icônes :**\n- Utilisez des PNG avec fond transparent\n- Fournissez 192x192 et 512x512 minimum\n- Ajoutez `type` avec `image/png`\n\n**Captures :**\n- Dimensions suggérées : 1280x720 (paysage) ou 750x1334 (portrait)\n- Format PNG ou JPG\n- Présentez les écrans clés (dashboard, onboarding, etc.)\n\n**Couleurs :**\n- theme_color = couleur de la barre d'adresse (Android)\n- background_color = couleur du splash screen\n- Utilisez des valeurs hex (#RRGGBB) cohérentes avec votre identité visuelle\n\n**Astuces :**\n- Harmonisez les couleurs pour éviter les flashs blancs\n- Testez sur Chrome DevTools > Application > Manifest\n- Vérifiez le rendu sur différents appareils

Quelles catégories et classifications dois-je renseigner ?

**Catégories :**\n- Liste séparée par des virgules (ex. « productivity, tools »)\n- Inspirez-vous des catégories du Play Store/App Store\n- Exemple : commerce = ["shopping", "lifestyle"], productivité = ["productivity", "business"]\n\n**Classification IARC :**\n- Requise pour certaines soumissions sur stores\n- Obtenez un ID via le questionnaire IARC\n- Ajoutez `"iarc_rating_id": "e84b072d-..."` si disponible\n\n**Autres métadonnées utiles :**\n- `related_applications` pour lier vos apps natives\n- `prefer_related_applications` (true/false) pour encourager l'installation native\n- `shortcuts` pour créer des actions rapides sur l'icône\n- `share_target` pour recevoir du contenu partagé\n- `protocol_handlers` pour gérer mailto:, tel:, etc.\n- `dir` pour définir la direction (ltr, rtl, auto)\n\n**Bonnes pratiques :**\n- Choisissez des catégories pertinentes\n- Ne surchargez pas la liste\n- Testez et validez votre manifest avec Lighthouse\n- Assurez-vous que les URLs d'icônes et captures sont accessibles