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

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

Houssein Djirdeh

Create React App (CRA) inclut un fichier manifeste d'application Web par défaut. La modification de ce fichier vous permettra de changer 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 manifest de l'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 de détails de votre application, y compris :

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

La documentation MDN couvre en détail toutes les propriétés qui peuvent être modifiées.

Modifier le fichier manifeste par défaut

Dans CRA, un fichier manifeste par défaut, /public/manifest.json, est inclus automatiquement 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" />

Pour vérifier que toutes les propriétés fonctionnent correctement dans cet exemple :

• 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 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.