Comment détecter si le web application 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 gère pas aussi bien que iOS ne prend pas en charge window.navigator.standalone de sorte que vous ne pouvez pas détecter si vous êtes en cours d'exécution comme une application autonome.

La référence dit:

Comment puis-je détecter si l'application s'exécute comme une application installée?

Vous ne pouvez pas, directement.

Remarquez qu'il dit "directement". Ma question est peut-on faire indirectement? Est-il une façon délicate de faire une supposition éclairée?

InformationsquelleAutor mike nelson | 2014-01-14
  1. 48

    Cette réponse est livré avec un énorme retard, mais je l'ai poster ici, seulement pour d'autres gens qui ont du mal à trouver une solution.

    Récemment, Google a mis en place le CSS conditionnelles display-mode: standalone, il y a donc deux façons de détecter si une application est en cours d'exécution autonome:

    À l'aide de CSS:

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

    À l'aide de 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, les Développeurs de Google a une page dédiée à ce sujet: https://developers.google.com/web/updates/2015/10/display-mode

    • Chrome avait apparemment soutien pour display-mode: standalone depuis Nov 2014 mais mieux vaut tard que jamais 🙂
    • bizarrement, cela fonctionne pour moi, seulement si la webapp a été réellement ouvert via l'écran d'accueil. si l'utilisateur ouvre la page via le "Ouvrir avec..." dans Chrome, il semble ne pas considé-il autonome. des idées pourquoi?
    • Pour toute personne qui pourrait avoir lutté pour obtenir que cela fonctionne, n'oubliez pas que le manifeste.json doit avoir l'entrée display: standalone (pas display: fullscreen) stackoverflow.com/a/54652992/2833684
    InformationsquelleAutor josemmo
  2. 18

    iOS et Chrome WebApp se comporte de façon différente, c'est la raison pour laquelle je suis à la suivante:

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

    Même comme ici: Détecter si iOS est l'aide de l'application web

    • Merci! Simple mais élégant, et toujours d'actualité en 2019.
    InformationsquelleAutor Javan R.
  3. 13

    Pour IOS, nous avons window.navigator.standalone de la propriété à vérifier..

    Mais pour Chrome sur Android, il ne gère pas cette propriété. Seul moyen de vérifier par le calcul de la largeur de l'écran et de la hauteur.

    Ci-dessous est le code pour vérifier que:

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

    J'ai eu référence à partir du lien ci-dessous:

    L'Écran d'accueil des Applications Web pour Android Grâce à google Chrome 31

    • Si l'utilisateur démarre en mode paysage, vous aurez besoin d'un peu plus de code comme ceci: if ((navigator.standalone = navigator.autonome) || (de l'écran.la hauteur du document.documentElement.clientHeight<40 || écran.la largeur du document.documentElement.clientHeight<40))
    • 40px ne fonctionne pas sur les appareils récents, avec le supplément de l'INTERFACE utilisateur barre en bas (au lieu de physiquement sur le téléphone)... besoin de l'autre ~80, et je ne suis pas sûr que l'INTERFACE utilisateur est une constante de la hauteur de l'appareil à l'autre.
    • Il est plus fiable et conforme aux normes façon de le faire maintenant: display-mode: standalone.
    InformationsquelleAutor murli2308
  4. 5

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

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

    ex:- si la page d'accueil url est https://www.example.com.
    dans le Manifeste de l'Application Web jeu

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

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

    InformationsquelleAutor utkarshmail2052
  5. 4

    Avec IOS, localstorage pour l'autonome et en mode web sont différents. Avec android KitKat et Chrome, lorsque vous enregistrez une valeur dans localstorage sur la version web, vous êtes en mesure de le récupérer en mode autonome.

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

    Je l'ai essayé sur plusieurs appareils.

    • Réponse intéressante. Ce serait cool de voir un exemple de code. 🙂
    • Il est plus fiable et conforme aux normes façon de le faire maintenant: display-mode: standalone.
    InformationsquelleAutor yoandm
  6. 1

    Pour Google Chrome (Android) à partir de la version 39 à compter avec manifeste de l'application web (json) et dans ce cas, il est une simple page de l'application, j'utilise ce "truc":

    Dans le manifeste.json j'ai mis: "start_url": "standalone.html".

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

    Puis, à vérifier, j'ai utiliser du 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");
}

    Qui fonctionne.

    Il pourrait fonctionner aussi sous Google Chrome (mobile) la version 31-38 avec cette méta-tag:

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

    • - Je prendre ce retour. Ce n'est pas fiable. Firefox et Google Chrome (pc de bureau) semblent suivre la start_url directive dans le manifeste.json ainsi et passer à standalone.html. Désolé.
    • Cette astuce a été documentée officiellement par Google dans Détecter si vous êtes lancé à partir de l'écran d'accueil. Avez-vous essayé d'ajouter le paramètre de requête au lieu de renommer le fichier?
    InformationsquelleAutor Klaus
  7. 0

    Pour détecter si elle est en cours d'exécution sur MIT AI2 webview:

    if (typeof window.AppInventor!="undefined") { return true; }
    InformationsquelleAutor Nezumi
  8. -1

    Il n'y a pas de " bon " moyen de le faire sur Android, donc pas de prise en charge des API encore.
    La solution de contournement que nous avons utilisé dans mon entreprise -

    1. Lors de la première connexion, magasin screenheight dans localstorage.
      Par screenHeight je veux dire le document.documentElement.clientHeight avant le chargement de la page, depuis doc grandit et ce n'est pas la mesure exacte de réel disponible la hauteur de l'écran.

    2. Chaque fois que l'utilisateur se connecte au prochain poste de contrôle actuel screenheight vs stockées - si elle devient plus grande, l'utilisateur a disparu en plein écran.

    Il n'y a pas de scénario sur lequel il peut devenir plus petit, SI VOUS entrez la PREMIÈRE valeur de TEMPS pour la hauteur de l'écran.

    Mise en garde de l'utilisateur qui permettra de nettoyer en espèces.
    Nous avons choisi d'ignorer que, comme la plupart des utilisateurs ne le font pas ou le font relativement rares, et il suffit(à notre avis), pour un certain temps jusqu'à ce qu'il y aura des API pour résoudre ce problème( j'espère qu'il y aura 🙂 )

    Option b - vérifier les screenheight vs périphérique à la hauteur de l'écran, le match pour quelques appareils de test & modes navigateur a montré un modèle( hauteur disponible < 70 dans webapp) - je crois fermement à un plus large comparaison peut obtenir les valeurs à cela suffit pour 90% des appareils dans 90% des cas.

    Tout cela est une solution de contournement, bien sûr, je ne suis pas feignant de son un solide stable de façon à obtenir pour les fonctionnalités souhaitées, - mais pour nous, cela a fonctionné, donc j'espère que cela aide quelqu'un d'autre qui ont combattu ce bug(cant appel manquant cruciales telles api fonctionnalité d'autre moyen). Bonne chance 🙂Comment détecter si le web application autonome sur Chrome mobile

    • Il est plus fiable et conforme aux normes façon de le faire maintenant: display-mode: standalonerépondu par @josemmo ci-dessus.
    InformationsquelleAutor Sergey Sob