web-dev-qa-db-fra.com

Comment détecter si une application Web fonctionnant de manière autonome sur Chrome mobile

Chrome mobile a récemment ajouté la possibilité d'ajouter à l'écran d'accueil, similaire à iOS. C'est cool mais il ne le supporte pas aussi bien qu'iOS - il ne supporte pas window.navigator.standalone afin que vous ne puissiez pas détecter si vous utilisez une application autonome.

La référence dit:

Comment puis-je détecter si l'application s'exécute en tant qu'application installée?

Vous ne pouvez pas, directement.

Notez qu'il dit "directement". Ma question est: pouvons-nous le faire indirectement ? Existe-t-il un moyen délicat de faire une supposition éclairée?

javascriptandroidgoogle-chromemobilemobile-safari
37
mike nelson

Cette réponse vient avec un énorme retard, mais je la poste ici juste pour les autres personnes qui ont du mal à trouver une solution.

Récemment, Google a implémenté le CSS conditionnel display-mode: standalone, il existe donc deux façons de détecter si une application est exécutée de manière autonome:

Utilisation de CSS:

@media all and (display-mode: standalone) {
    /* Here goes the CSS rules that will only apply if app is running standalone */
}

En utilisant à la fois CSS et Javascript:

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

Si vous avez besoin de plus d'informations, Google Developers a une page dédiée à ce sujet: https://developers.google.com/web/updates/2015/10/display-mode

47
josemmo

iOS et Chrome WebApp se comporte différemment, c'est la raison pour laquelle je suis venu à la suite:

isInWebAppiOS = (window.navigator.standalone == true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

Identique ici: Détecter si iOS utilise webapp

17
Javan R.

Pour le IOS nous avons window.navigator.standalone propriété à vérifier ..

Mais pour Chrome sur Android, il ne prend pas en charge cette propriété. La seule façon de le vérifier est de calculer la largeur et la hauteur de l'écran.

Voici le code pour vérifier que:

navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

J'ai obtenu la référence du lien ci-dessous:

Applications Web de l'écran d'accueil pour Android Merci à Chrome 31

13
murli2308

Une vieille question mais des solutions nettement meilleures disponibles aujourd'hui pour Chrome Android.

L'une des façons (l'OMI la plus propre). Vous pouvez ajouter un manifeste d'application Web avec une clé 'start_url' avec une valeur qui ajoute un paramètre de chaîne de requête à votre page d'accueil habituelle.

ex: - si l'URL de la page d'accueil est https://www.example.com . dans l'ensemble de manifestes de l'application Web

    "start_url": "https://www.example.com/?user_mode=app"

Guide de Google sur le manifeste de l'application Web: https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

5
utkarshmail2052

Avec IOS, le stockage local pour le mode autonome et le mode Web sont différents. Avec Android KitKat et Chrome, lorsque vous enregistrez une valeur dans localstorage sur la version Web, vous pouvez la récupérer en mode autonome.

Ainsi, il vous suffit d'enregistrer document.documentElement.clientHeight sur localstorage lorsque l'utilisateur navigue sur la version Web (avant d'ajouter à l'écran d'accueil). Ensuite, comparez simplement la valeur actuelle de document.documentElement.clientHeight avec la valeur localstorage. Si la valeur actuelle est>, c'est le mode autonome.

Je l'ai essayé sur plusieurs appareils.

4
yoandm

Pour Google Chrome (Android) à partir de la version 39 avec le manifeste d'application Web (json) et dans le cas, il s'agit d'une application d'une seule page, j'utilise cette `` astuce '':

Dans le manifest.json je mets: "start_url": "standalone.html".

Normalement c'est le cas (dans mon cas index.html), mais à partir d'index.html je fais un clone identique: standalone.html (ou tout ce que vous voulez).

Ensuite, pour vérifier, j'utilise Javascript comme ceci:

var locurl = document.location.href;
if (locurl.indexOf("standalone.html") != -1) {
    console.log("app is running standalone");
} else {
    console.log("app is running in normal browser mode");
}

Ça marche.

Cela pourrait également fonctionner dans Google Chrome (mobile) version 31-38 avec cette balise Meta:

<meta name="application-url" content="http://my.domain.com/standalone.html">. Pas encore testé.

1
Klaus

Pour détecter s'il fonctionne sur MIT AI2 webview:

if (typeof window.AppInventor!="undefined") { return true; }
0
Nezumi