web-dev-qa-db-fra.com

Comment détecter si je suis dans un navigateur (développement local) dans Ionic 2

Je veux m'assurer de lancer inappbrowser uniquement si je suis sur des appareils (iOs, Android ...), mais si je suis dans un navigateur (mode de développement local ou tout simplement une application Web avec gulp build), je souhaite simplement créer un lien vers celui page avec target = "_ blank". 

J'essaie de réutiliser le code Ionic 2 en tant qu'application Web. Ainsi, lorsque je construirai l'application, cela fonctionnera également dans le bureau du navigateur. Donc platform.ready () ne me suffit pas. Comme j'ai besoin de savoir si l'utilisateur est sur le navigateur de bureau et je peux faire quelque chose de différent. 

cordovaionic-frameworkionic2
27
Hugh Hou

Ici, vous pouvez utiliser la fonction suivante en remplacement de votre fonction de clic.

onClickOfButton(){
      // Check If Cordova/Mobile
   if (this.platform.is('cordova')) {
        window.location.href = url;
   }else{
        window.open(url,'_blank');
   }
}

Cela peut être utile :)

51
gsthina

Vous pouvez utiliser platform.is('core'), true lorsque vous êtes sur le navigateur. Liste de plate-forme:

  • Android: sur un appareil fonctionnant sous Android.
  • cordova: sur un appareil sous Cordova.
  • noyau: sur un appareil de bureau.
  • iOS: un appareil sous iOS.
  • ipad: sur un appareil iPad.
  • iphone: sur un appareil iPhone.
  • mobile: sur un appareil mobile.
  • mobileweb: dans un navigateur sur un appareil mobile.
  • phablet: sur un appareil phablet.
  • tablette: sur une tablette.
  • windows: sur un appareil fonctionnant sous Windows.

Voir http://ionicframework.com/docs/v2/api/platform/Platform/ pour plus de détails.

20
Hung Hoang

Base sur hhung, car core ne détecte que si vous utilisez un navigateur Windows ouvrant l’application, mais si vous utilisez une émulation mobile Chrome, core renverra false, mais mobileweb renverra true . Par conséquent, vous devez utiliser les éléments suivants:

if(this.platform.is('core') || this.platform.is('mobileweb')) {
  this.isApp = false;
} else {
  this.isApp = true;
}
5
TriDiamond

Avec cela, vous pouvez détecter si vous êtes dans un navigateur:

if(window.hasOwnProperty('cordova')){ /* use webview */ }
else { /* use browser link */ }
4
Luca C.

J'ai rencontré le même problème dans une application Ionic 3 et trouvé ici une méthode intéressante pour vérifier si l'application s'exécute dans un navigateur par rapport à un périphérique/émulateur réel:

isApp = !document.URL.startsWith('http');

Fondamentalement, cela repose sur le fait que de vrais périphériques ou émulateurs servent des ressources en utilisant le protocole ftp au lieu de http, utilisé par les navigateurs.

3
Alexei

La solution la plus fiable pour moi était une combinaison de la méthode .is () de Platform et de son résultat prometteur. J'ai utilisé le chèque dans un fournisseur pour pouvoir l'utiliser de manière globale. Peut-être que l'approche est utile à quelqu'un qui a épuisé les autres chemins.

import { Platform } from 'ionic-angular';

constructor(public platform: Platform) { 

  public env:string = 'dev';

  this.platform.ready().then((readySource) => {

    if (readySource) {
      if (platform.is('core') || readySource.toLowerCase() !== 'cordova') {
        this.env = 'dev';
      }
      else {
        this.env = 'production';
      }
    }
1
Martin Carstens

Nous avons un moyen simple de savoir si nous exécutons le dossier '/ www' du projet dans un navigateur ou dans un périphérique (emulate/build).

Dans les projets locaux de Cordova/Phonegap, le fichier index.html porte cette étiquette:

<script type="text/javascript" src="cordova.js"></script>

Mais ce fichier n'existe pas car Cordova/Phonegap injectera phonegap.js ou cordova.js lorsque nous émulerons ou construirons. Et si nous exécutons le dossier www dans le navigateur, nous pouvons toujours voir une erreur comme celle-ci:

GET file:///D:/Cordova/Workspace/TestProject/www/cordova.js net::ERR_FILE_NOT_FOUND

Ensuite, nous pouvons vérifier dans l’étiquette index.html si ce fichier est chargé ou non. Si les charges, nous sommes dans App, sinon, nous sommes dans le navigateur (local):

<script type="text/javascript" src="cordova.js" onload="alert('app!');"></script>

Nous pensons que c'est le moyen le plus rapide de savoir où nous en sommes.

0
CAPSULE DESARROLLO