Manifeste des application web

Le manifeste des applications web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un simple document, utilisable autant par les utilisateurs que par les plateformes de marché d'applications (app-store). Les manifestes doivent utiliser le type MIME application/manifest+json.

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.

Example de manifeste

{
  "name": "Google I/O 2015",
  "short_name": "I/O 2015",
  "start_url": "./?utm_source=web_app_manifest",
  "display": "standalone",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
  }]
}

Membres

background_color

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 la feuille de style. Le membre background_color est seulement proposé pour améliorer l'expérience utilisateur pendant le chargement de l'application et ne doit pas être utilisé par le user agent en tant que couleur de fond quand la feuille de style de l'application est disponible.

"background_color": "red"

display

Le mode d'affichage préféré des développeurs pour cette application web. Ce membre a une correspondance avec la propriété CSS Media Query appelée display-mode qui peut être utilisée pour fournir une expérience utilisateur cohérente entre le lancement du site depuis une URL et son lancement depuis une icône sur le bureau.

Les valeurs valides sont :

"display": "standalone"

icons

Un tableau 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 dans une liste d'autres applications, ou pour intégrer l'application web dans changeur d'application de l'OS et/ou dans les préférences du système. Les images peuvent avoir les propriétés suivantes :

"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
  }]

lang

Définit la langue primaire pour les valeurs des membres name et short_name. Cette valeur est une chaine de caractère contenant une des langues définies par la spécification BCP47.

"lang": "en-US"

name

Le nom de l'application, compréhensible pour un humain, comme elle est généralement affichée à l'utilisateur, au niveau d'une liste de différente application ou comme label pour une icône.

"name": "Google I/O 2015" 

orientation

Définit l'orientation par défaut pour tout le premier niveau d'applications web browsing contexts. L'orientation peut être une des valeurs suivantes:

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

​​"orientation": "portrait-primary"

prefer_related_applications

Une valeur boléenne qui indique à l'user agent si une application liée doit être préférée à l'application web. L'absence de valeur équivaut à false.

"prefer_related_applications": "false"

related_applications

Définit un tableau d'applications disponibles, sur la plateforme sous-jacente, qui ont une relation avec l'application spécifiée par l'application courante. Par exemple, une application web qui contient la même fonctionnalité, ou une fonction similaire, à une application native, peut spécifier de l'utiliser grâce à ce membre. Les applications peuvent contenir les valeurs suivantes:

"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",
  }]

start_url

Définit l'URL de chargement lorsque l'utilisateur lance l'application web depuis un appareil.

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

scope

Defines the navigation scope of this web application's application context.

"scope": "/myapp/"

short_name

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 2015"

splash_screens

Un tableau d'images qui peuvent servir comme écrans de chargement pour l'application web. C'est un tableau donc les développeurs peuvent viserles images pour des tailles d'écran et des résolutions spécifiques. Les image peuvent avoir les valeurs suivantes:

"splash_screens": [{
      "src": "splash/lowres",
      "sizes": "320x240"
    }, {
      "src": "splash/hd_small",
      "sizes": "1334x750"
    }, {
      "src": "splash/hd_hi",
      "sizes": "1920x1080",
      "density": 3
    }]

theme_color

Définit la couleur par défaut pour l'application.

"theme_color": "aliceblue"

Spécification

Compatibilité des navigateurs

[1] Does not support lang, scope, or splash_screens.