Que fait cette recette ?

Cette recette est une aide pour servir un fichier de "Web App Manifest" sur votre site web. Elle crée une règle redirection.io pour exposer le fichier Web App Manifest, avec tous les paramètres correctement configurés. Cette règle sera créée en mode "brouillon", afin que vous puissiez la modifier si nécessaire avant de la publiersur votre site.

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

Un manifeste d'application web est un fichier au format 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", qui est habituellement exposé à la racine du site à l'adresse /website.manifest, est utilisé par les navigateurs pour fournir aux visiteurs d'un site Web une expérience utilisateur proche de celle d'une application (mobile ou desktop). Par exemple, le fichier de manifeste peut être utilisé pour ajouter le site web à l'écran d'accueil de l'utilisateur, personnaliser l'interface utilisateur du navigateur, fournir un accès hors ligne au site web, paramétrer des notifications, etc.

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

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

Ce fichier fournit au navigateur web plusieurs informations sur le site web et sur la manière de l'utiliser en dehors du navigateur, un peu comme une application native. On y trouve 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 devrait-il servir un manifeste d'application web ?

Si vous souhaitez offrir à vos utilisateurs une expérience immersive, vous devriez envisager de servir un fichier Web App Manifest sur votre site web. Ce n'est pas une étape très compliquée et ne comporte aucun risque. Par ailleurs, 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.

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. En bref, en général il n'y a aucune raison de se priver d'un manifeste d'application Web.

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

Différentes sources fournissent une référence complète sur le fichier Web App Manifest et ses propriétés, comme pas exemple le Mozilla Developer Network. 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.

Nous proposons un validateur gratuit de Web App Manifest afin de vérifier la conformité de votre fichier de manifeste.

Comment installer cette recette sur mon site ?

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

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 la documentation MDN comme référence pour définir les propriétés du fichier Web App Manifest.
3. Cliquez sur le bouton d'installation : Installez la recette afin de créer deux règles en mode "brouillon" : la première pour exposer le fichier de manifeste, et la deuxième pour insérer une balise <link> dans vos pages Web afin d'indiquer au navigateur l'existence de ce manifeste.
4. Publier les règles : après avoir vérifié les deux règles, vous pouvez les publier sur votre site. Le manifeste sera fonctionnel quelques secondes plus tard.