Le manifeste d’application web
Rédigez un manifest.json avec name, icons, start_url, display et theme_color afin que les navigateurs proposent l’invite d’ajout à l’écran d’accueil.
Le manifeste d’application web est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce qu'une application web progressive ?
Une application web progressive est un site web doté de capacités d'application native : elle peut être installée sur l'écran d'accueil, fonctionner hors connexion et recevoir des notifications push. Ses trois éléments essentiels sont un manifeste d'application web, un agent de service et HTTPS.
Le fichier manifeste
Le fichier manifest.json (ou .webmanifest) est un fichier JSON qui décrit les métadonnées de votre application. Les navigateurs le lisent pour activer l'option « Ajouter à l'écran d'accueil » et lancer votre application comme une application native.
Manifeste de base
Un manifeste minimal contient le nom, les icônes, l'URL de démarrage et le mode d'affichage.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Lier le manifeste
Liez-le depuis votre élément HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Modes d'affichage
"display" contrôle les éléments de fenêtre de l'application : "standalone" (aucune interface de navigateur, aspect d'application), "fullscreen" (mode immersif, barre d'état masquée), "minimal-ui" (quelques commandes du navigateur), "browser" (onglet normal).
Icônes — plusieurs tailles
Fournissez des icônes de plusieurs tailles. Android moderne attend les tailles 192 et 512 ; Apple en nécessite d'autres. Utilisez "purpose": "maskable" pour les icônes Android adaptatives.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Balises propres à Apple
iOS ne prend pas entièrement en charge le manifeste. Ajoutez des balises meta propres à Apple pour l'installation sur l'écran d'accueil d'iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Invite d'installation
Les navigateurs déclenchent un événement beforeinstallprompt lorsque les conditions sont réunies (manifeste, agent de service, HTTPS et engagement de l'utilisateur). Vous pouvez le différer et le déclencher depuis votre propre interface.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Raccourcis d'application
Le manifeste peut déclarer des raccourcis qui apparaissent lorsque l'utilisateur appuie longuement sur l'icône de l'application installée.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Catégories et captures d'écran
Ajoutez categories et screenshots pour enrichir l'interface d'installation dans Chrome sur Android et dans Windows.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Tester le manifeste
Ouvrez DevTools → Application → Manifeste. Chrome affiche les champs analysés du manifeste, des aperçus des icônes et des avertissements (icônes manquantes, contraste insuffisant, etc.).
Les frameworks simplifient la tâche
Next.js : placez manifest.webmanifest dans public/. Nuxt : installez le module PWA pour Nuxt. Vite : vite-plugin-pwa génère automatiquement le manifeste et l'agent de service.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Vérification rapide
Quelle valeur de display dans un manifeste d'application web permet à l'AWP installée de s'ouvrir sans aucune interface de navigateur, comme une application native ?
Récapitulatif : le manifeste d'application web
Fichier JSON décrivant les métadonnées de l'AWP. Incluez le nom, le nom court, l'URL de démarrage, le mode d'affichage, la couleur du thème et des icônes (de plusieurs tailles et adaptatives). Liez le manifeste dans le HTML avec rel=manifest. iOS nécessite des balises meta propres à Apple. Utilisez l'événement beforeinstallprompt pour une interface d'installation personnalisée. Les raccourcis et les captures d'écran enrichissent l'installation. Les frameworks (Vite PWA, Next, Nuxt PWA) automatisent la génération.
Questions Fréquemment Posées
La leçon « Le manifeste d’application web » est-elle gratuite ?
Oui — le texte complet de « Le manifeste d’application web » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le manifeste d’application web » ?
Rédigez un manifest.json avec name, icons, start_url, display et theme_color afin que les navigateurs proposent l’invite d’ajout à l’écran d’accueil. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Le manifeste d’application web » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le manifeste d’application web
- Enregistrement et cycle de vie d’un Service Worker
- Stratégies de mise en cache hors ligne : CacheFirst et NetworkFirst
- Notifications push