Qu'est-ce qu'un manifeste d'application Web ?

Un manifeste d'application web est un fichier JSON qui fournit des métadonnées sur une application web. Il contient des informations telles que le nom de l'application, son auteur, sa couleur de fond et son icône. Le fichier Web App Manifest est utilisé par les navigateurs et d'autres agents utilisateurs pour fournir une expérience plus proche de l'application lorsque les utilisateurs visitent un site web. Par exemple, le fichier manifeste peut être utilisé pour ajouter le site web à l'écran d'accueil de l'utilisateur, personnaliser l'interface utilisateur du navigateur et fournir un accès hors ligne au site web.

Par exemple, voici un extrait du fichier Web App Manifest pour le site web redirection.io :

{
  "name": "redirection.io",
  "short_name": "redirection",
  "icons": [
    ...
  ],
  "theme_color": "#1eaaf1",
  "background_color": "#1eaaf1"
}

Il fournit au navigateur web plusieurs informations sur le site web et sur la manière de l'utiliser en dehors du navigateur, comme une application native. Il fournit également des informations sur la conception du site web, comme la couleur d'arrière-plan ou l'icône à utiliser lors de l'ajout du site web à l'écran d'accueil - certains navigateurs utilisent même ces informations pour personnaliser la façon dont le site web est intégré à l'interface utilisateur du navigateur :

Mon site web doit-il servir un manifeste d'application web ?

Si vous souhaitez offrir à vos utilisateurs une expérience plus proche de celle d'une application, vous devriez envisager de servir un fichier Web App Manifest sur votre site web. Ce fichier peut vous aider à personnaliser l'affichage de votre site web dans le navigateur, à l'ajouter à l'écran d'accueil de l'utilisateur et à fournir un accès hors ligne au site web. Servir un fichier Web App Manifest est particulièrement utile si votre site web est une Progressive Web App (PWA) ou si vous souhaitez offrir une expérience plus immersive à vos utilisateurs.

En tout cas, l'ajout d'un fichier Web App Manifest à votre site web est une bonne pratique, car il fournit des informations utiles aux navigateurs et autres agents utilisateurs sur votre application web. Cela peut contribuer à améliorer l'expérience de l'utilisateur et à rendre votre site web plus proche d'une application - voyez-le comme un signet sur l'écran d'accueil de l'utilisateur, avec une icône et une couleur personnalisées.

Quelles sont les informations partagées dans un manifeste d'application web ?

D'autres sites Web fournissent une référence complète sur le fichier Web App Manifest et ses propriétés, comme le [MDN Web Docs] (https://developer.mozilla.org/en-US/docs/Web/Manifest). Voici une liste des propriétés les plus courantes que l'on peut trouver dans un fichier Web App Manifest :

• name : Le nom de l'application web.
• short_name : Un nom court pour l'application web. Il doit généralement comporter moins de 12 caractères pour tenir sur l'écran d'accueil de l'utilisateur.
• description : Une description de l'application web.
• icons : Un tableau d'icônes à utiliser pour l'application web.
• theme_color : La couleur de l'interface utilisateur du navigateur lorsque l'application web est lancée.
• background_color : La couleur de l'écran d'accueil au lancement de l'application web.
• display : Le mode d'affichage de l'application web (par exemple, fullscreen, standalone, minimal-ui, browser).
• start_url : L'URL à charger lors du lancement de l'application web.
• scope : La portée de navigation de l'application web, c'est-à-dire l'ensemble des URL vers lesquelles l'application web peut naviguer.
• orientation : L'orientation par défaut de l'application web (par exemple, portrait, landscape).
• related_applications : Une liste d'applications connexes qui fournissent des fonctionnalités similaires à l'application web, telles que des applications natives.

Ce qui est génial, c'est que la définition d'un fichier Web App Manifest est une tâche assez simple, puisqu'il s'agit simplement d'un fichier JSON que vous devez créer et diffuser sur votre site web. Le plus difficile est de définir les bonnes propriétés pour offrir la meilleure expérience à vos utilisateurs.

Qu'est-ce que redirection.io Recipe ?

Cette recette est une aide pour servir un fichier Web App Manifest sur votre site web. Elle créera une règle redirection.io qui servira le fichier Web App Manifest lorsqu'un navigateur le demandera, avec tous les paramètres correctement configurés. Cette règle sera créée en mode brouillon, afin que vous puissiez la réviser, la modifier si nécessaire, et la publier pour ajouter le Web App Manifest sur votre site web.

Comment installer cette recette sur mon site ?

Pour installer cette recette sur votre site web, suivez les étapes suivantes :

Afin d'installer cette recette, vous devez :

1. Configurer le chemin du fichier Web App Manifest : Définissez le chemin du fichier Web App Manifest sur votre site web. Ce fichier est généralement nommé manifest.webmanifest ou site.webmanifest. Vous pouvez utiliser n'importe quel autre nom et héberger le fichier dans un sous-dossier, mais il est préférable d'utiliser l'extension .webmanifest.
2. Définir le contenu du manifeste : Dans le champ "Web App Manifest content", vous pouvez définir le contenu à servir pour le fichier Web App Manifest. Ce contenu doit être un objet JSON valide qui contient les propriétés que vous souhaitez définir pour votre application web. Vous pouvez utiliser les [MDN Web Docs] (https://developer.mozilla.org/en-US/docs/Web/Manifest) comme référence pour définir les propriétés du fichier Web App Manifest.
3. Cliquez sur "Installer sur mon site web " : Exécutez le processus d'installation en cliquant sur le bouton "Installer sur mon site web". Cette action créera la règle redirection.io associée en mode brouillon, afin que vous puissiez la réviser, la modifier si nécessaire, et la publier pour activer le manifeste de l'application Web sur votre site Web.

En option, vous pouvez utiliser notre [Web App Manifest validator] (/tools/web-app-manifest/validator) pour vérifier la validité de votre fichier Web App Manifest.