Un fichier manifeste d'application Web est un fichier JSON qui indique au navigateur comment votre application Web progressive (PWA) doit se comporter lorsqu'elle est installée sur l'ordinateur de bureau ou l'appareil mobile de l'utilisateur. Un fichier manifeste type doit contenir au minimum les éléments suivants :
Nom de l'application
Les icônes que l'application doit utiliser
URL qui doit s'ouvrir lorsque l'application est lancée
Créer le fichier manifeste
Le fichier manifeste peut porter n'importe quel nom, mais il est généralement nommé
manifest.json
et diffusé à partir de la racine (répertoire de premier niveau de votre site Web). La spécification suggère que l'extension doit être
.webmanifest
, mais vous pouvez utiliser des fichiers JSON pour rendre vos fichiers manifestes plus lisibles.
Vous devez fournir au moins l'un des éléments
short_name
ou
name
dans votre fichier manifeste. Si vous fournissez les deux,
name
est utilisé lorsque l'application est installée, et
short_name
est utilisé sur l'écran d'accueil, le lanceur d'applications ou d'autres emplacements où l'espace est limité.
icons
Lorsqu'un utilisateur installe votre PWA, vous pouvez définir un ensemble d'icônes que le navigateur utilisera sur l'écran d'accueil, le lanceur d'applications, le sélecteur de tâches, l'écran de démarrage et ailleurs.
La propriété
icons
est un tableau d'objets image. Chaque objet doit inclure
src
, une propriété
sizes
et l'
type
de l'image. Pour utiliser des
icônes masquables
, parfois appelées icônes adaptatives sur Android, ajoutez
"purpose": "any maskable"
à la propriété
icon
.
Pour Chromium, vous devez fournir une icône d'au moins 192 x 192 pixels et une icône de 512 x 512 pixels. Si seules ces deux tailles d'icônes sont fournies, Chrome ajuste automatiquement les icônes pour qu'elles s'adaptent à l'appareil. Si vous préférez redimensionner vos propres icônes et les ajuster pour une précision au pixel près, fournissez des icônes par incréments de 48 dp.
start_url
est une propriété obligatoire. Il indique au navigateur où votre application doit démarrer lorsqu'elle est lancée et empêche l'application de démarrer sur la page sur laquelle l'utilisateur se trouvait lorsqu'il a ajouté votre application à son écran d'accueil.
Votre
start_url
doit rediriger directement l'utilisateur vers votre application, et non vers une page de destination de produit. Réfléchissez à ce que l'utilisateur voudra faire immédiatement après avoir ouvert votre application et placez-le à cet endroit.
background_color
La propriété
background_color
est utilisée sur l'écran de démarrage lorsque l'application est lancée pour la première fois sur un appareil mobile.
display
Vous pouvez personnaliser l'UI du navigateur qui s'affiche lorsque votre application est lancée. Par exemple, vous pouvez masquer la barre d'adresse et les éléments de l'interface utilisateur du navigateur. Les jeux peuvent même être lancés en plein écran. La propriété
display
prend l'une des valeurs suivantes :
standalone
Ouvre l'application Web pour qu'elle ressemble à une application autonome. L'application s'exécute dans sa propre fenêtre, distincte du navigateur, et masque les éléments d'interface utilisateur standards du navigateur, tels que la barre d'adresse.
Interface utilisateur autonome.
minimal-ui
Ce mode est semblable à
standalone
, mais fournit à l'utilisateur un ensemble minimal d'éléments d'interface utilisateur pour contrôler la navigation, tels que les boutons "Retour" et "Actualiser".
UI minimale.
display_override
Pour choisir l'affichage de votre application Web, définissez un mode
display
dans son fichier manifeste, comme
expliqué précédemment
. Les navigateurs ne sont pas obligatoires pour tous les modes d'affichage, mais ils
doivent
être compatibles avec la
chaîne de remplacement définie par les spécifications
(
"fullscreen"
→
"standalone"
→
"minimal-ui"
→
"browser"
). S'ils ne sont pas compatibles avec un mode donné, ils passent au mode d'affichage suivant dans la chaîne. Dans de rares cas, ces solutions de remplacement peuvent entraîner des problèmes. Par exemple, un développeur ne peut pas demander
"minimal-ui"
sans être forcé de revenir au mode d'affichage
"browser"
lorsque
"minimal-ui"
n'est pas pris en charge. Le comportement actuel rend également impossible l'introduction de nouveaux modes d'affichage de manière rétrocompatible, car ils n'ont pas leur place dans la chaîne de remplacement.
Vous pouvez définir votre propre séquence de remplacement à l'aide de la propriété
display_override
, que le navigateur considère
avant
la propriété
display
. Sa valeur est une séquence de chaînes qui sont prises en compte dans l'ordre indiqué, et le premier mode d'affichage compatible est appliqué. Si aucun n'est compatible, le navigateur évalue le champ
display
. Si aucun champ
display
n'est défini, le navigateur ignore
display_override
.
Voici un exemple d'utilisation de
display_override
. Les détails de
"window-control-overlay"
ne sont pas concernés par cette page.
Lors du chargement de cette application, le navigateur tente d'utiliser
"window-control-overlay"
en premier. Si elle n'est pas disponible, la propriété
"minimal-ui"
est utilisée à la place, puis
"standalone"
à partir de la propriété
display
. Si aucune de ces options n'est disponible, le navigateur revient à la chaîne de remplacement standard.
scope
Le
scope
de votre application est l'ensemble des URL que le navigateur considère comme faisant partie de votre application.
scope
contrôle la structure des URL qui inclut tous les points d'entrée et de sortie vers l'application. Le navigateur l'utilise pour déterminer quand l'utilisateur a quitté l'application.
Quelques remarques supplémentaires sur
scope
:
Si vous n'incluez pas de
scope
dans votre fichier manifeste, l'
scope
implicite par défaut est l'URL de démarrage, mais son nom de fichier, sa requête et son fragment ont été supprimés.
L'attribut
scope
peut être un chemin d'accès relatif (
../
) ou tout chemin de niveau supérieur (
/
) permettant d'accroître la couverture des navigations dans votre application Web.
Le
start_url
doit être inclus dans le champ d'application.
start_url
est relatif au chemin d'accès défini dans l'attribut
scope
.
Un
start_url
commençant par
/
sera toujours la racine de l'origine.
theme_color
theme_color
définit la couleur de la barre d'outils et peut être reflétée dans l'aperçu de l'application dans les sélecteurs de tâches.
theme_color
doit correspondre à la couleur du thème
meta
spécifiée dans la section "head" du document.
Vous pouvez ajuster
theme_color
dans une requête multimédia à l'aide de l'attribut
media
de l'élément de couleur de thème
meta
. Par exemple, vous pouvez définir de cette manière une couleur pour le mode clair et une autre pour le mode sombre. Toutefois, vous ne pouvez pas définir ces préférences dans votre fichier manifeste. Pour en savoir plus, consultez le
problème GitHub w3c/manifest#975
.
La propriété shortcuts est un tableau d'objets de raccourcis d'application qui permettent d'accéder rapidement aux tâches clés de votre application. Chaque membre est un dictionnaire contenant au moins un name et un url.
description
La propriété description décrit l'objectif de votre application.
Dans Chrome, la longueur maximale de la description est de 300 caractères sur toutes les plates-formes.
Si la description est plus longue, le navigateur la tronque avec des points de suspension. Sur Android, la description ne doit pas dépasser sept lignes de texte.
screenshots
La propriété screenshots est un tableau d'objets Image représentant votre application dans des scénarios d'utilisation courants. Chaque objet doit inclure le src, une propriété sizes et le type de l'image. La propriété form_factor est facultative.
Vous pouvez le définir sur "wide" pour les captures d'écran applicables uniquement aux écrans larges ou sur "narrow" pour les captures d'écran étroites uniquement.
Dans Chrome, l'image doit respecter les critères suivants :
La largeur et la hauteur doivent être d'au moins 320 pixels et de 3 840 pixels maximum.
La dimension maximale ne peut pas être plus de 2,3 fois plus grande que la dimension minimale.
Toutes les captures d'écran correspondant au facteur de forme approprié doivent avoir le même format.
À partir de Chrome 109, seules les captures d'écran pour lesquelles form_factor est défini sur "wide" s'affichent sur ordinateur.
À partir de Chrome 109, les captures d'écran avec form_factor défini sur "wide" sont ignorées sur Android. Les captures d'écran sans form_factor sont toujours affichées pour assurer la rétrocompatibilité.
Chrome sur ordinateur affiche au moins une et au maximum huit captures d'écran qui répondent à ces critères. Les autres sont ignorées.
Chrome sur Android affiche au moins une et au plus cinq captures d'écran qui répondent à ces critères. Les autres sont ignorées.
Ajouter le fichier manifeste de l'application Web à vos pages
Après avoir créé le fichier manifeste, ajoutez une balise <link> à toutes les pages de votre application Web progressive. Par exemple :
<link rel="manifest" href="/manifest.json">
Tester votre fichier manifeste
Pour vérifier que votre fichier manifeste est correctement configuré, utilisez le volet Manifeste dans le panneau Application des outils pour les développeurs Chrome.
Ce volet fournit une version lisible de nombreuses propriétés de votre fichier manifeste et vous permet de vérifier que toutes les images se chargent correctement.
Écrans de démarrage sur mobile
Lorsque votre application se lance pour la première fois sur mobile, le navigateur peut mettre un certain temps à démarrer et le contenu initial à commencer à s'afficher. Au lieu d'afficher un écran blanc qui pourrait faire penser à l'utilisateur que l'application ne fonctionne pas, le navigateur affiche un écran de démarrage jusqu'à la première peinture.
Chrome crée automatiquement l'écran de démarrage à partir des éléments name, background_color et icons spécifiés dans votre fichier manifeste. Pour créer une transition fluide entre l'écran de démarrage et l'application, utilisez la même couleur pour background_color que pour la page de chargement.
Chrome choisit l'icône qui correspond le mieux à la résolution de l'appareil pour les écrans de démarrage. Dans la plupart des cas, il suffit de fournir des icônes de 192 pixels et de 512 pixels, mais vous pouvez fournir des icônes supplémentaires pour une meilleure correspondance.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/09/18 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2024/09/18 (UTC)."],[],[],null,[]]
