Un fichier manifeste d'application Web est inclus par défaut dans "Créer une application React" et permet à n'importe qui d'installer votre application React sur son appareil.
La création d'applications React (CRA) inclut un fichier manifeste d'application Web par défaut. Modifier ce fichier vous permettra de modifier la façon dont votre application s'affiche lorsqu'elle est installée sur l'appareil de l'utilisateur.
En quoi est-ce utile ?
Les fichiers manifestes d'application Web permettent de modifier l'apparence d'une application installée sur l'ordinateur ou l'appareil mobile de l'utilisateur. En modifiant les propriétés du fichier JSON, vous pouvez modifier un certain nombre d'informations dans votre application, y compris les suivantes:
- Nom
- Description
- Icône de l'application
- Couleur du thème
La documentation MN couvre toutes les propriétés pouvant être modifiées en détail.
Modifier le fichier manifeste par défaut
Dans CRA, un fichier manifeste par défaut, /public/manifest.json est inclus automatiquement lorsqu'une application est créée:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Cela permet à n'importe quel utilisateur d'installer l'application sur son appareil et d'afficher les détails par défaut de l'application. Le fichier HTML public/index.html inclut également un élément <link> pour charger le fichier manifeste.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Voici un exemple d'application créée avec CRA, dont le fichier manifeste est modifié:
Pour savoir si toutes les propriétés de cet exemple fonctionnent correctement:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Application.
- Dans le panneau Application, cliquez sur l'onglet Manifest (Fichier manifeste).
Conclusion
- Si vous créez un site qui, selon vous, n'a pas besoin d'être installé sur un appareil, supprimez le fichier manifeste et l'élément
<link>du fichier HTML qui pointe vers celui-ci. - Si vous souhaitez que les utilisateurs installent l'application sur leur appareil, modifiez le fichier manifeste (ou créez-en un si vous n'utilisez pas CRA) avec les propriétés de votre choix. La documentation MN décrit tous les attributs obligatoires et facultatifs.