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 Créer une application React et permet à n'importe quel utilisateur 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.

Créer une application React (CRA) inclut un fichier manifeste d'application Web par défaut. Modification... vous permet de modifier l'affichage de votre application lorsqu'elle est installée sur l'appareil de l'utilisateur.

En quoi est-ce utile ?

Les fichiers manifestes des applications Web permettent de modifier la façon dont une l'application s'affichera sur l'ordinateur ou l'appareil mobile de l'utilisateur. En modifiant dans le fichier JSON, vous pouvez modifier un certain nombre d'informations dans votre application, y compris:

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

La documentation MMD couvre toutes les propriétés qui peuvent ê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 de voir certaines les détails par défaut de l'application. Le fichier HTML, public/index.html, inclut 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 Afficher l'application. Appuyez ensuite 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 (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 pointe vers elle.
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) des propriétés qui vous intéressent. La Documentation MMD décrit tous les attributs obligatoires et facultatifs.