Voici une petite astuce pour transformer son site web en appli mobile, très simplement.
Le titre est un peu racoleur, car en réalité, nous allons configurer le site pour qu'il s'affiche comme une appli mobile sur Smartphone et tablette :
- Icone spécifique sur le bureau
- Affichage dans le navigateur sans la barre d'adresse et autre menu.
Pour cela, vous aurez besoin :
- D'une icone en png de 192x192 (pour un affichage propre sur les écrans Retina d'Apple), comme celle-ci par exemple :
- D'un peu de HTML.
Pour la partie HTML, tout se passe dans le HEAD.
Voici un exemple de ce que ça donne :
<html>
<head>
<meta charset="utf-8">
<!-- Configure Android webapp -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="icon.png">
<!-- Configure IOS webapp -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Mon appli web pour iOS">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png"/>
<title>Mon appli web</title>
</head>
<body>
<h1>Mon appli web</h1>
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. </p>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>
</html>
Ensuite, il suffit d'afficher la page dans le navigateur par défaut (Chrome pour Android et Safari pour iOS), de demander d'ajouter la page à l'écran d'accueil et le tour est joué.
Commentaires