App Manifest : Démo HTML5
Mise à jour : 2017-11-14
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 :
- 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.
- 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.
- Ajout a l'écran d'accueil :
- Fonctionnalité intrinseque aux navigateurs.
- 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
- Nécessite d'utiliser le navigateur dédié a l'OS pour une intégration complete
- Manifeste :
- Décryptage : html5 Doctor
- Article complet : Mozilla Developper Network
- Icônes :
- Génération en ligne des icônes : Real Favicon Generator
- Spécifique Safari/iOS
- Ajout a l'écran d'accueil :
- Safari/iOS
- Chrome/Android
- Librairie permettant de détecter et d'inciter a ajouter l'application sur l'écran d'accueil : Add To Home Screen
- Limitations :
- IE 11/Windows 8.1 mobile ne supporte pas l'ouverture en plein écran.
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
- Ajouter ce site a l'écran d'accueil, en suivant le mode opératoire de How-To Geek.
- Réouvrir ce site en utilisant l'icône de l'écran d'accueil pour constater le lancement en plein écran.