Ajouter un fichier manifeste d'application Web avec Créer une application React

Un fichier manifeste d'application Web est inclus dans Create React App par défaut et permet à n'importe qui d'installer votre application React sur son appareil.

Houssein Djirdeh

Remarque : Si vous ne savez pas comment fonctionnent les fichiers manifestes d'application Web, consultez d'abord le guide Ajouter un fichier manifeste d'application Web.

Create React App (CRA) inclut un fichier manifeste d'application Web par défaut. La modification de ce fichier vous permet de changer la manière 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 de bureau ou l'appareil mobile de l'utilisateur. En modifiant les propriétés du fichier JSON, vous pouvez modifier un certain nombre de détails de votre application, y compris les suivants:

• Nom
• Description
• Icône de l'application
• Couleur du thème

La documentation MDN décrit en détail toutes les propriétés pouvant être modifiées.

Modifier le fichier manifeste par défaut

Dans CRA, un fichier manifeste par défaut, /public/manifest.json, est automatiquement inclus lorsqu'une nouvelle 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 qui d'installer l'application sur son appareil et de voir certains 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 avec un fichier manifeste modifié :

Pour savoir si toutes les propriétés fonctionnent correctement dans cet exemple :

• Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) .
• Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
• Cliquez sur l'onglet Application.
• Dans le panneau Application, cliquez sur l'onglet Manifest (Manifeste).

Conclusion

1. 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> dans le fichier HTML qui y fait référence.
2. 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 MDN explique tous les attributs obligatoires et facultatifs.