Manifeste des application web

Cet article nécessite une relecture rédactionnelle. Voici comment vous pouvez aider.

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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.

Important: Ce document fait référence au manifeste des applications web du W3C. Le manifeste propriétaire de Firefox OS est documenté ailleurs.

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 :

Mode d'affichage Description Affichage de rattrapage
fullscreen Toute la zone d'affichage disponible est utilisée et aucun user agent chrome n'est montré. standalone
standalone L'application va ressembler et se comporter comme une application autonome. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'user agent va exclure les élements d'interface qui permettent la navigation mais peut inclure d'autre élements comme une barre de statut. minimal-ui
minimal-ui L'application va ressembler et se comporter comme une application autonome, mais elle aura quelques élements d'interface permettant de contrôler la navigation. Les éléments varient en fonction du navigateur web. browser
browser L'application s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur, en fonction du navigateur et de la plateforme. (None)
"display": "standalone"

Note: Vous pouvez appliquer les CSS de manière séléctive à votre application en fonction du mode d'affichage en utilisant  la fonction display-mode.

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 :

Membre Description
density La densité en pixel de l'appareil pour laquelle l'image est destinée.
sizes Une chaîne de caractères contenant les dimensions des images, séparées par des espaces. 
src Une URL qui retourne l'image.
type Indication concernant le type de l'image. L'objectif de ce membre est de permettre à l'user agent d'ignorer les images des types de média qu'il ne supporte pas.
"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"

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"

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:

Membre Description
platform La plateforme sur laquelle l'application est disponible.
url L'URL à laquelle l'application peut être trouvée.
id L'ID utilisé pour représenter l'application sur la plateforme spécifique.
"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:

Membre Description
density La densité en pixel de l'appareil pour laquelle l'image est destinée.
sizes Une chaîne de caractères contenant les dimensions des images, séparées par des espaces. 
src Une URL qui retourne l'image.
type Indication concernant le type de l'image. L'objectif de ce membre est de permettre à l'user agent d'ignorer les images des types de média qu'il ne supporte pas.
"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

Spécification Statut Commentaire
Web App Manifest Standard évolutif Définition initiale

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base Pas de support ? ? ? ?
background_color et theme_color Pas de support ? ? ? ?
Fonctionnalité Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Support de base Pas de support 39.0 ? ? ? 32.0 ? 39.0
background_color et theme_color Pas de support 46.0 [1] ? ? ? ? ? 46.0 [1]

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : JeffD
 Dernière mise à jour par : JeffD,