web-dev-qa-db-fra.com

Application Web plein écran pour Android

Je veux exécuter ma Web App, que j'ai programmée avec HTML5, en mode plein écran sur Android. (masquer la barre d'état et la barre d'adresse/de navigation)

pour iOS, vous écrivez uniquement:

<meta name="Apple-mobile-web-app-capable" content="yes" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mais cela n'a pas fonctionné sur Android.

Il existe de nombreuses solutions avec Javascript, mais toutes les solutions que j'ai essayées ne fonctionnent pas.

Quelqu'un connaît la solution?

javascriptandroidhtml5web-applications
37
user959456

Je ne pense pas que vous trouverez une solution globale pour cela, car tout le monde n'utilise pas le navigateur Web par défaut Android (par exemple, je préfère Dolphin).

Face à ce fait, vous devrez essayer chaque hack javascript sale pour forcer ce comportement.

La seule raison pour laquelle cela fonctionne pour les appareils Apple Apple est le fait que Apple est très restrictif quant au développement d'un navigateur personnalisé et tout le monde s'en tient à l'application par défaut.

3
Knickedi

Cela a fonctionné pour moi sur Chrome pour Android.

Ajoutez ceci aux balises head:

<meta name="mobile-web-app-capable" content="yes">

Ensuite, dans le menu du navigateur chrome, Aller à la page d'accueil. Cette icône ouvrira maintenant votre site Web en plein écran.

30
jason

J'utilise un mélange de la balise meta HTML pour iOS et une solution JavaScript. Il supprime la barre d'adresse sur iOS et les appareils Android. Il ne supprime pas la barre inférieure sur iOS car cela ne disparaîtra que lorsque l'utilisateur installera la page Web en tant qu'application HTML5 sur son domicile écran.

<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) {
        setTimeout(function() { window.scrollTo(0, 1); }, 1);
      }, false);
</script>

J'utilise PHP dans le backend pour rendre uniquement le JavaScript pour navigateur mobile avec la détection de navigateur mobile suivante

if (preg_match('/iphone|iPod|Android/',strtolower($_SERVER['HTTP_USER_AGENT'])))
9
philipp

Vous pouvez y parvenir avec la nouvelle application Web progressive googles en ajoutant le travailleur de service. Jetez un œil ici: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ et https://developers.google.com/web/progress-web-apps / .

Vous pouvez ajouter une icône dans l'écran d'accueil pour votre application Web, obtenir le plein écran, utiliser la notification Push, etc.

2
crystalthinker
<meta name="Apple-mobile-web-app-capable" content="yes" />

Cette balise est conçue pour afficher un environnement sans chrome après avoir ajouté votre site à l'écran d'accueil de l'iPhone.

Je ne compterais pas sur cela pour travailler sur Android.

Pour faire défiler la barre du navigateur une fois votre page chargée, voyez la réponse à cette question: Suppression de la barre d'adresse du navigateur (pour afficher sur Android)

1
m6tt

Comme indiqué par Google

Depuis Chrome M31, vous pouvez configurer votre application Web pour qu'une icône de raccourci d'application soit ajoutée à l'écran d'accueil d'un appareil, et que le lancement de l'application se fasse en "mode d'application" plein écran en utilisant Chrome pour l'élément de menu "Ajouter à l'écran d'accueil" d'Android.

Voir https://developer.chrome.com/multidevice/Android/installtohomescreen

1
Alex Nolasco