Transformer votre site web en appli mobile

Classé dans : Web | 2 commentaires

vendredi 05 juin 2015

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

Le 19 janvier 2017 Hervé a dit :

Bonjour,
Je suppose que l'objectif est que l’icône s'affiche sur la page d'accueil, malheureusement je viens de tester sur Android et l'icône qui s'affiche est le petit drapeau des favoris et non pas l'icône créée.

Le 19 janvier 2017 Hervé a dit :

Je reviens sur mon commentaire précédent ou j'indiquais que ça ne fonctionnait pas sur Android mais en fait ça fonctionne bien mais il faut créer le raccourci avec Chrome et pas avec un autre navigateur.

Fil RSS des commentaires de cet article