Supporté par ChromeNon supporté par FirefoxSupporté par EdgeSupporté par Safari/iOS App Manifest : Démo HTML5

Mise à jour : 2017-11-14
HTML5 permet de réaliser des applications Web de plus en plus proche des applications natives.
Pour finaliser cette similitude on ajoute les apllications Web sur l'écran d'accueil.
Cette action revient a réaliser "l'installation" de l'application Web.

Manifest for a web application


Le manifeste permet d'intégrer les applications Web a l'OS, comme des applications natives (icônes spécifiques, splash screen, fullscreen, orientation etc.)

Cet exemple illustre les possibilités suivantes :

  1. Icônes spécifiques :
    • Liens de la section <head>, pour iOS et anciennes versions.
    • Fichier manifeste au format JSON, pour Android.
    • Fichier au format XML, pour Windows mobile.
  2. Nommage spécifique de l'application :
    • Métadonnées de la section <head>, pour iOS, Windows mobile et anciennes versions.
    • Fichier manifeste au format JSON, pour Android.
  3. Ajout a l'écran d'accueil :
    • Fonctionnalité intrinseque aux navigateurs.
  4. Lancement en plein écran, sans splash screen ni orientation prédéfnie :
    • Métadonnées de la section <head>, pour iOS et anciennes versions.
    • Fichier manifeste au format JSON, pour Android.

Notes sur le tuto


Exemple de code HTML5

<!--../manifest.json
{"name": "<html5> D\u00e9mo",
 "icons": [{"src": "\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"},
           {"src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"},
           {"src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"},
           {"src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"},
           {"src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"},
           {"src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"}],
 "display": "fullscreen"}
-->
<!--
<head>
	...
-->
<!-- App Mode : Home screen icons & name + Fullscreen -->
	<link rel="manifest" href="/manifest.json">

	<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
	<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
	<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
	<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
	<meta name="apple-mobile-web-app-title" content="<html5> Démo">
	<meta name="application-name" content="<html5> Démo">
	<meta name="msapplication-TileColor" content="#603cba">
	<meta name="msapplication-TileImage" content="/mstile-144x144.png">
	<meta name="theme-color" content="#ffffff">
<!-- Fullscreen App Mode : No Manifest -->
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Old browser support (deprecated)
	<link rel="shortcut icon" type="image/x-icon" href="../img/html5.ico">
-->
<!--
	...
</head>
-->
<ol>
<li>Ajouter ce site a l'écran d'accueil, en suivant le mode opératoire de
	<a href="http://www.howtogeek.com/196087/how-to-add-websites-to-the-home-screen-on-any-smartphone-or-tablet/"
		title="How to Add Websites to the Home Screen on Any Smartphone or Tablet">How-To Geek</a>.</li>
<li>Réouvrir ce site en utilisant l'icône de l'écran d'accueil pour constater le lancement en plein écran.</li>
</ol>
<a href="/favicons.zip" title="Archive App Manifest">Archive des fichiers déclarés ci-dessus.</a>

Démonstration du résultat HTML5


  1. Ajouter ce site a l'écran d'accueil, en suivant le mode opératoire de How-To Geek.
  2. Réouvrir ce site en utilisant l'icône de l'écran d'accueil pour constater le lancement en plein écran.
Archive des fichiers déclarés ci-dessus.

Can I Use web-app-manifest? Data on support for the web-app-manifest feature across the major browsers from caniuse.com.