web-dev-qa-db-de.com

Erkennung zwischen einem mobilen Browser oder einer PhoneGap-Anwendung

Kann man erkennen, ob der Benutzer über JavaScript oder Browser über den Browser oder die Anwendung zugreift? 

Ich entwickle eine Hybridanwendung für mehrere mobile Betriebssysteme über eine Webseite und eine PhoneGap-Anwendung. Das Ziel wäre:

  1. Verwenden Sie denselben Code unabhängig vom Implementierungsziel
  2. Fügen Sie die PhoneGap.js-Datei nur hinzu, wenn der Benutzeragent eine Anwendung ist
javascriptjquerymobilecordova
61
Diogo Cardoso

Sie können überprüfen, ob die aktuelle URL das Protokoll http enthält.

var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
    // PhoneGap application
} else {
    // Web page
}
58
EricL

Schnelle Lösung kommt in den Sinn,

onDeviceReady

soll dir helfen Da dieser JS-Aufruf nur von der Native Bridge (objC oder Java) aufgerufen wird, kann der mobile Safari-Browser dies nicht erkennen. Daher wird Ihre Quellgerätebasis auf der Geräte-App (Telefonlücke) von onDeviceReady aus initiiert.

Und wenn einer der JS-Aufrufe von Phonegap wie Device.platform oder Device.name NaN oder NULL ist, ist es offensichtlich ein mobiler Web-Aufruf.

Bitte überprüfen Sie und lassen Sie mich die Ergebnisse wissen. 

15
Futur

Ich habe einen Weg gefunden, dies zu tun und nicht auf deviceready -Ereignisse angewiesen, so dass die Web-Codebase intakt bleibt ...

Das derzeitige Problem bei der Verwendung des eingebauten Geräteereignisses besteht darin, dass Sie beim Laden der Seite keine Möglichkeit haben, der App mitzuteilen: "Hey, das läuft NICHT auf einem mobilen Gerät, Sie müssen nicht warten, bis das Gerät bereit ist anfangen".

1.- Im nativen Teil des Codes, zum Beispiel für iOS, in MainViewController.m gibt es eine Methode viewDidLoad. Ich sende eine Javascript-Variable, die ich später im Web-Code überprüfe. Wenn diese Variable vorhanden ist, warte ich ab So starten Sie den Code für meine Seite, bis alles bereit ist (z. B. Geolocation des Navigators)

Unter MainViewController.m:

- (void) viewDidLoad
{
    [super viewDidLoad];
    NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"];
    [self.webView stringByEvaluatingJavaScriptFromString:jsString];
}

2.-index.html Der Code sieht folgendermaßen aus:

function onBodyLoad()
{
    document.addEventListener("deviceready", onDeviceReady, false);
}

function onDeviceReady(){;
    myApp.run();
}

try{
    if(isAppNative!=undefined);
}catch(err){
    $(document).ready(function(){
        myApp.run();
    });
}
11
Juan Carlos Moreno

PhoneGap hat window.PhoneGap (oder in Cordova, es ist window.cordova oder window.Cordova) Objekt festgelegt. Überprüfe, ob das Objekt existiert und mache die Magie.

7
zvona

Ich verwende denselben Code sowohl für die Phonegap-App als auch für unseren Webclient. Hier ist der Code, mit dem ich erkenne, ob Phonegap verfügbar ist:

window.phonegap = false;
$.getScript("cordova-1.7.0.js", function(){
    window.phonegap = true;
});

Denken Sie daran, dass die phonegap-Datei js asynchron geladen wird. Sie können es synchron laden, indem Sie die richtige Option einer praktischen Jquery $ .getScript-Funktion einstellen. 

Beachten Sie, dass der Ansatz eine zusätzliche GET-Anforderung ausgibt, um die JS-Datei von Phonegap auch in Ihrem Webclient abzurufen. In meinem Fall hatte dies keinen Einfluss auf die Leistung meines Webclients. So war es eine schöne/saubere Möglichkeit, dies zu tun. Zumindest so lange, bis jemand anderes eine schnelle einzeilige Lösung findet :)

4
Aki

Es klingt, als würden Sie eine andere Webseite laden, sobald der Webview in der Phonegap-App gestartet wird. Ist das richtig? Wenn dies der Fall ist, können Sie der Anforderungs-URL basierend auf der Konfiguration einen Parameter hinzufügen.

Angenommen, PHP,

App.Config = {
  target: "phonegap"
};

<body onload="onbodyload()">

var onbodyload = function () {
  var target = App.Config.target;
  document.location = "/home?target=" + target;
};

Fügen Sie auf der Serverseite die Phonegap-js hinzu, wenn das Ziel Phonegap ist.

Es ist nicht möglich, den Unterschied mithilfe des Benutzeragenten zu erkennen. 

4
sciritai

Ich kämpfte auch mit diesem Problem, und ich weiß, dass dies ein alter Faden ist, aber ich habe meine Annäherung nirgendwo gesehen, also dachte ich, dass es jemandem helfen könnte.

ich habe einen benutzerdefinierten Useragent nach dem eigentlichen Useragent eingestellt: 

String useragent = settings.getUserAgentString();
settings.setUserAgentString(useragent + ";phonegap");

dadurch wird lediglich die Phonegap-Zeichenfolge hinzugefügt, sodass andere Websites, die auf die Erkennung Ihres mobilen User-Agenten angewiesen sind, weiterhin funktionieren.

Dann kannst du Phonegap wie folgt laden: 

if( /phonegap/i.test(navigator.userAgent) ) 
{
//you are on a phonegap app, $getScript etc
} else {
alert("not phonegap");
}
4
Havihavi

was ist, wenn Sie Folgendes versuchen: 

if(window._cordovaNative) {
  alert("loading cordova");
  requirejs(["...path/to/cordova.js"], function () { 
         alert("Finished loading cordova");
  });
}
4
user3415370

So mache ich es mit einer globalen Variablen, die von einer Browser-Version von cordova.js überschrieben wird. In Ihrer HTML-Hauptdatei (normalerweise index.html) habe ich die folgenden Skripts, die auftragsabhängig sind:

    <script>
        var __cordovaRunningOnBrowser__ = false
    </script>
    <script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
    <script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->

Und in cordova.js habe ich einfach:

__cordovaRunningOnBrowser__ = true

Beim Erstellen für ein mobiles Gerät wird die Datei cordova.js nicht verwendet (stattdessen wird die plattformspezifische Datei cordova.js verwendet). Diese Methode hat den Vorteil, dass sie unabhängig von Protokollen, Benutzeragenten oder Bibliothek zu 100% korrekt ist Variablen (die sich ändern können). Es gibt andere Dinge, die ich in cordova.js aufnehmen sollte, aber ich weiß noch nicht, was sie sind. 

4
B T

Meiner Meinung nach versuchst du, ein Problem für dich selbst zu machen. Sie haben Ihre Entwicklungsplattform nicht erwähnt, aber die meisten von ihnen haben unterschiedliche Bereitstellungskonfigurationen. Sie können zwei Konfigurationen definieren. Setzen Sie eine Variable, die angibt, auf welche Weise Code bereitgestellt wurde .. In diesem Fall brauchen Sie sich nicht um die Geräte zu kümmern, auf denen Sie Ihre App implementiert haben.

1
RredCat

Ähnlich wie BTs Lösung , aber einfacher:

Ich habe eine leere cordova.js in meinem Ordner www, die beim Erstellen von Cordova überschrieben wird. Vergessen Sie nicht, cordova.js vor Ihrer App-Skriptdatei einzuschließen.

Sie können dann nach dem Cordova-Objekt suchen:

document.addEventListener('DOMContentLoaded', function(){
    if (window.Cordova) {
        document.addEventListener('DeviceReady', bootstrap);
    } else {
        bootstrap();
    }
});

function bootstrap() {
   do_something()
}
1
user5924996

Kurz und effektiv: 

if (document.location.protocol == 'file:') { //Phonegap is present }
1
AmpT

Neue Lösung:

var isPhoneGapWebView = location.href.match(/^file:/); // returns true for PhoneGap app

Alte Lösung:
Verwenden Sie jQuery, und führen Sie es so aus

$(document).ready(function(){
   alert(window.innerHeight);
});

Nehmen Sie das iPhone als Beispiel für Ihre mobile Anwendung,

Wenn Sie PhoneGap oder Cordova verwenden, erhalten Sie 460px WebView. In Safari verlieren Sie jedoch aufgrund der Standardkopf- und -fußzeile des Browsers an Höhe.

Wenn window.innerHeight gleich 460 ist, können Sie phonegap.js laden und onDeviceReady function </ S> aufrufen

0
Ranganadh Paramkusam

Lösung: Korrigieren Sie index.html in Cordova und fügen Sie cordova-platform="Android" zum <html>-Tag hinzu, sodass das Cordova-Plattform-Attribut nur im Cordova-Build vorhanden ist und in der ursprünglichen index.html für das Web außerhalb von Cordova fehlt.

Vorteile: Verlassen Sie sich nicht auf Benutzeragenten, URL-Schemas oder die Cordova-API. Muss nicht auf ein Ereignis warten. Kann auf verschiedene Arten erweitert werden, z. B. kann cordova-platform = "browser" enthalten sein oder nicht, um zwischen Web-Apps außerhalb von Cordova mit der Browser-Plattform von Cordova zu unterscheiden.

Zusammenführen mit config.xml

    <platform name="Android">
        <hook src="scripts/patch-Android-index.js" type="after_prepare" />
    </platform>

Fügen Sie Dateiscripts/patch-Android-index.js hinzu

module.exports = function(ctx) {
    var fs = ctx.requireCordovaModule('fs');
    var path = ctx.requireCordovaModule('path');

    var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/Android');
    var indexPath = platformRoot + '/app/src/main/assets/www/index.html';

    var indexSource = fs.readFileSync(indexPath, 'utf-8');

    indexSource = indexSource.replace('<html', '<html cordova-platform="Android"');

    fs.writeFileSync(indexPath, indexSource, 'utf-8');
}

Hinweise: Für Android sollten die Pfade platforms/Android und /app/src/main/assets/www/index.html angepasst werden.

App kann nach Cordova-Plattform mit suchen

if (! document.documentElement.getAttribute('cordova-platform')) {
  // Not in Cordova
}

oder

if (document.documentElement.getAttribute('cordova-platform') === 'Android') {
  // Cordova, Android
}
0
Ventzy Kunev

Bisher hat das noch niemand erwähnt, aber es scheint, dass Cordova jetzt das Hinzufügen des Browsers als Plattform unterstützt:

cordova platforms add browser

Dadurch wird zur Laufzeit automatisch cordova.js hinzugefügt, das das Ereignis onDeviceReady enthält, sodass Sie es nicht fälschen müssen. Viele Plugins unterstützen auch den Browser, so dass keine Browser-Hacks mehr in Ihrem Code vorhanden sind.

Um Ihre App im Browser zu verwenden, sollten Sie cordova run browser verwenden. Wenn Sie es bereitstellen möchten, können Sie dieselben Befehle wie für die anderen Plattformen verwenden.

EDIT: Ich habe vergessen zu erwähnen meine Quelle .

0
Ricardo Cruz