> For the complete documentation index, see [llms.txt](https://atomic-suite.gitbook.io/atomic-suite/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atomic-suite.gitbook.io/atomic-suite/documentation-atomic/documentation-utilisateur/progressive-web-app/comment-configurer-le-manifest.json-avec-atomic.md).
# 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:
**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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://atomic-suite.gitbook.io/atomic-suite/documentation-atomic/documentation-utilisateur/progressive-web-app/comment-configurer-le-manifest.json-avec-atomic.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.