Manifeste des applications web

Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (link) dans l'entête (head) de votre document :

<link rel="manifest" href="/manifest.webmanifest" />

Définit la couleur de fond attendue pour l'application web. Cette valeur répète ce qui est déjà disponible dans la feuille de style de l'application, mais peut être utilisée par le navigateur pour dessiner le fond de l'application web quand le manifeste est disponible avant que la feuille de style ne soit chargée. Cela permet une transition douce pendant le lancement de l'application web et le chargement du contenu de l'application.

"background_color": "red"

Fournit une description générale de ce que fait l'application web.

"description": "L'application qui vous aide à trouver la meilleure nourriture en ville !"

Spécifie la direction du texte pour le nom, le nom court et les membres de description. Ensemble avec le membre lang, il peut aider à afficher correctement les langues de droite à gauche.

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

Il peut contenir l'une des valeurs suivantes :

• ltr (de gauche à droite)
• rtl (de droite à gauche)
• auto (conseille au navigateur d'utiliser l'algorithme bidirectionnel Unicode pour mieux comprendre la direction du texte.)

Définit le mode d'affichage préféré du développeur pour l'application web.

"display": "standalone"

Les valeurs valides sont :

Un ensemble d'images qui peuvent servir d'icônes pour l'application dans différents contextes. Par exemple, elles peuvent être utilisées pour répré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.

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },{
    "src": "icon/lowres",
    "sizes": "48x48"
  },{
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },{
    "src": "icon/hd_hi.svg",
    "sizes": "72x72",
    "density": 2
  }]

Les objets image peuvent contenir les valeurs suivantes :

Définit la langue principale pour les valeurs des membres name et short_name. Cette valeur est une chaîne de caractères contenant une balise de langue unique

"lang": "fr"

Fournit un nom pour l'application, lisible pour un humain, car il est destiné à être affiché à l'utilisateur, par exemple parmi une liste d'autres applications ou comme étiquette d'une icône.

"name": "Google I/O 2017"

Définit l'orientation par défaut pour tout le premier niveau d'applications web browsing contexts.

"orientation": "portrait-primary"

L'orientation peut être l'une des valeurs suivantes:

• any
• natural
• landscape
• landscape-primary
• landscape-secondary
• portrait
• portrait-primary
• portrait-secondary

Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire.

"prefer_related_applications": "false"

Spécifie un ensemble d'objets d'application représentant des applications natives installables par la plate-forme sous-jacente ou accessibles à cette plate-forme, par exemple une application Android native pouvant être obtenue via Google Play Store. De telles applications sont destinées à être des alternatives à l'application Web qui fournissent une fonctionnalité similaire ou équivalente, comme la version native de l'application Web.

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789",
  }]

Les objets d'application peuvent contenir les valeurs suivantes:

Definit le "scope" de navigation du contexte applicatif de cette application web. Ceci limite essentiellement 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.

"scope": "/myapp/"

Un nom court pour l'application web, compréhensible pour un humain. Il est destiné à être utilisé quand il n'y a pas suffisamment de place disponible pour afficher le nom complet de l'application.

"short_name": "I/O 2017"

Spécifie l'URL qui se charge lorsque l'utilisateur lance une application à partir d'un périphérique. Si elle est donnée comme une URL relative, l'URL de base sera celle du manifeste

"start_url": "./?utm_source=web_app_manifest"

Définit la couleur du thème par défaut pour une application. Cela affecte parfois la façon dont l'application est affichée par le système d'exploitation (par exemple, sur le commutateur de tâches d'Android, la couleur du thème entoure l'application).

"theme_color": "aliceblue"

Dans Chrome 47 et supérieur, un écran de lancement (splashscreen) est affiché pour une appplication lancée depuis l'écran d'accueil. Cet écran est généré automatiquement en utilisant les propriétés du manifeste de l'application web, particulièrement: name, background_color, et l'icône du tableau icons qui est la plus proche de 128dp pour l'appareil.

Les manifestes doivent être servies en utilisant l'application/manifest+json MIME type. Cependant, c'est facultatif.

• Progressive Web Apps (PWAs)