Configurer le manifest.json avec Atomic

Pour configurer le fichier manifest.json et l’application web progressive de votre site, ouvrez le menu “Settings” de Atomic, puis cliquez sur "PWA".

Une fois l'option "Enable Manifest.json" activée, vous pouvez commencer la configuration.

Si vous disposez d'un site en multi-boutique, la configuration de cette section pourrait être différente pour chaque boutique. Il est donc important de définir le manifeste pour chaque boutique : la configuration en mode "Toutes les boutiques" n'est pas possible.

1) Définition du short name

Le short name fournit un nom court pour l'application, destiné à être affiché lorsque le nom est trop long pour le contexte courant. Ce nom sera affiché sur les écrans mobiles comme le nom de l’application.

2) Définition de la description

Utilisez ce champ pour fournir une description générale de l’application de votre e-commece.

Par exemple : “L'application qui vous aide à acheter les meilleurs croissants dans votre ville !.”

3) Définition de la couleur du thème

Ce paramètre définit une couleur du thème de l'application. Celle-ci est notamment utilisée comme couleur de contour lors de l'affichage multi-tâches sur Android et dans la barre d'adresse après le lancement de votre PWA à partir de l'écran d'accueil.

Définissez la propriété sur n'importe quelle valeur de couleur CSS valide, par exemple : #2A3443".

4) Définition de la couleur de l'arrière-plan (Background color)

Cette option est utilisée afin que le navigateur puisse afficher une couleur de fond avant que les feuilles de style soient chargées. Cela permet une transition plus douce lors du chargement de l'application. L’utilisateur verra cette couleur généralement au lancement de la PWA sur une très courte durée.

Définissez la propriété sur n'importe quelle valeur de couleur CSS valide, par exemple : #2A3443".

5) Définition de l’URL de démarrage (Start URL)

Dans le champ “start_url” il faut renseigner l’url de démarrage de la PWA. Cela définit l'url chargée lorsque l'utilisateur lance l'application depuis la page d'accueil.

Astuce : Vous pouvez créer une URL de contrôle pour monitorer, avec Google Analytics, les nombre d'utilisateurs de votre site via webApp. Pour créer une URL de contrôle, utiliser l'URL Builder: https://ga-dev-tools.web.app/campaign-url-builder/

6) Définition du type d’affichage (display)

Ce champ permet de spécifier comment la PWA va être présentée.

• L’option “Fullscreen” permet d’ouvrir l’application en plein écran,

• L’option “Stand-Alone” permet d’ouvrir l'application Web comme une application native autonome. L'application s'exécute dans sa propre fenêtre, distincte du navigateur et masque les éléments d'interface utilisateur standard du navigateur comme la barre de recherche.

• L’option “Minimal-UI” est similaire au mode Stand-Alone, mais fournit à l'utilisateur un ensemble minimal d'éléments d'interface pour contrôler la navigation (comme le rechargement de la page).

• L’option Browser permet d’offrir une expérience de navigateur standard.

7) Définition du Scope

Ceci limite les pages Web pouvant être visualisées pendant que le manifeste est appliqué. Si l'utilisateur navigue en dehors du "scope" de l'application, il revient à une page Web normale.

Si le "scope" est une URL relative, l'URL de base est celle du manifeste.

Le scope indique, donc, au navigateur les pages à afficher dans l’application.

Par exemple, définissons le scope sur “/monapp/” :

Si l'utilisateur navigue vers une url ne commençant pas par /monapp/, (par exemple /monapp/mapage), l'affichage traditionnel reprendra la main. Pour que toute l'application web soit en dehors du contexte du navigateur, il suffit de remplir cette propriété avec la valeur "/" ou encore ne pas l'affecter du tout ("/" étant sa valeur par défaut).

La start_url doit être incluse dans le scope.

8) Définition de l’icône de l’application

Choisissez l'icône que le navigateur utilisera dans différents contextes. Par exemple, elles peuvent être utilisées pour représenter l'application web dans une liste d'autres applications, ou pour intégrer l'application web dans les tâches d'un OS et/ou dans les préférences du système.

Les fichiers de type .jpeg ou .png sont acceptés.

9) Le JSON supplémentaire

Dans ce champ vous pouvez ajouter une application associée. Il s'agit d'une application accessible à la plate-forme d'application sous-jacente qui a une relation avec l'application Web associée à un manifeste.

N'oubliez pas d'enregistrer les modifications. Attention, il n'est pas possible de tester la fonction PWA dans des environnements de pre-prod.