Wie überprüfe ich, ob eine App von einer Webseite auf einem iPhone installiert ist?

Ich möchte eine Webseite erstellen, eine Seite, die ein iPhone zum App-Store umleitet, wenn auf dem iPhone die Anwendung nicht installiert ist, aber wenn auf dem iPhone die App installiert ist, soll die Anwendung geöffnet werden.

Ich habe bereits eine benutzerdefinierte URL in der iPhone-Anwendung implementiert, sodass ich eine URL für die Anwendung habe, die ungefähr so ​​lautet:

myapp://

Und wenn diese URL ungültig ist, soll die Seite zum App Store weitergeleitet werden. Ist das überhaupt möglich?

Wenn ich die Anwendung nicht auf dem Telefon installiert habe und die myapp: // url in Safari schreibe, erhalte ich nur eine Fehlermeldung.

Auch wenn es einen hässlichen Hack mit Javascript gibt, den ich wirklich gerne wissen würde?

Soweit ich weiß, können Sie in einem Browser nicht überprüfen, ob eine App installiert ist oder nicht.

Sie können jedoch versuchen, das Telefon zur App umzuleiten. Wenn nichts passiert, leiten Sie das Telefon wie folgt auf eine bestimmte Seite um:

setTimeout(function () { window.location = "https://itunes.apple.com/appdir"; }, 25);
window.location = "appname://";

Wenn die zweite Codezeile ein Ergebnis liefert, wird die erste Zeile niemals ausgeführt.

Hoffe das hilft!

Ähnliche Frage:

• iPhone-Browser: Überprüfen, ob die iPhone-App über den Browser installiert ist
• Ist es möglich, ein http + Domain-basiertes URL-Schema für iPhone-Apps wie YouTube und Maps zu registrieren?

Um die akzeptierte Antwort zu fördern, müssen Sie manchmal zusätzlichen Code hinzufügen, um Personen zu behandeln, die den Browser nach dem Start der App zurückgeben. Die Funktion setTimeout wird immer ausgeführt, wenn sie dies tun. Also mache ich so etwas:

var now = new Date().valueOf();
setTimeout(function () {
    if (new Date().valueOf() - now > 100) return;
    window.location = "https://itunes.apple.com/appdir";
}, 25);
window.location = "appname://";

Auf diese Weise wird der Code nicht ausgeführt, wenn die Codeausführung eingefroren ist (z. B. das Wechseln der App).

iOS Safari verfügt über eine Funktion, mit der Sie Ihrer Webseite ein "intelligentes" Banner hinzufügen können, das entweder mit Ihrer App, falls installiert, oder mit dem App Store verknüpft ist.

Sie tun dies, indem Sie metader Seite ein Tag hinzufügen . Sie können sogar eine detaillierte App-URL angeben, wenn die App beim Laden etwas Besonderes tun soll.

Details finden Sie auf der Seite " Apps mit Smart App-Bannern bewerben" von Apple .

Der Mechanismus hat den Vorteil, einfach zu sein und ein standardisiertes Banner zu präsentieren. Der Nachteil ist, dass Sie nicht viel Kontrolle über das Aussehen oder den Ort haben. Außerdem sind alle Wetten deaktiviert, wenn die Seite in einem anderen Browser als Safari angezeigt wird.

Ab 2017 scheint es keine zuverlässige Möglichkeit zu geben, zu erkennen, dass eine App installiert ist, und der Umleitungstrick funktioniert nicht überall.

Für diejenigen wie mich, die direkt aus E-Mails einen Deep Link erstellen müssen (häufig), ist Folgendes zu beachten:

• Das Senden von E-Mails mit appScheme: // funktioniert nicht einwandfrei, da die Links in Google Mail gefiltert werden

• Die automatische Umleitung zu appScheme: // wird von Chrome blockiert: Ich vermute, Chrome erfordert, dass die Umleitung mit einer Benutzerinteraktion synchron ist (wie ein Klick).

• Sie können jetzt ohne appScheme: // Deep Link erstellen und es ist besser, aber es erfordert eine moderne Plattform und zusätzliches Setup. Android iOS

Es ist erwähnenswert, dass andere Leute bereits gründlich darüber nachgedacht haben. Wenn Sie sich ansehen, wie Slack seine "Magic Link" -Funktion implementiert, können Sie Folgendes feststellen:

• Es wird eine E-Mail mit einem regulären http-Link gesendet (ok mit Google Mail).
• Die Webseite hat eine große Schaltfläche, die auf appScheme verweist: // (ok mit Chrome)

Sie können dieses Plugin überprüfen, das versucht, das Problem zu lösen. Es basiert auf dem gleichen Ansatz wie von Missemisa und Alastair usw. beschrieben, verwendet jedoch stattdessen einen versteckten Iframe.

https://github.com/hampusohlsson/browser-deeplink

@Alistair wies in dieser Antwort darauf hin, dass Benutzer manchmal nach dem Öffnen der App zum Browser zurückkehren. Ein Kommentator zu dieser Antwort gab an, dass die verwendeten Zeitwerte je nach iOS-Version geändert werden mussten. Als sich unser Team damit befassen musste, stellten wir fest, dass die Zeitwerte für das anfängliche Timeout und die Feststellung, ob wir zum Browser zurückgekehrt waren, angepasst werden mussten und oft nicht für alle Benutzer und Geräte funktionierten.

Anstatt einen beliebigen Zeitdifferenzschwellenwert zu verwenden, um festzustellen, ob wir zum Browser zurückgekehrt sind, war es sinnvoll, die Ereignisse "pagehide" und "pageshow" zu erkennen.

Ich habe die folgende Webseite entwickelt, um zu diagnostizieren, was los ist. Im Verlauf der Ereignisse wird eine HTML-Diagnose hinzugefügt, hauptsächlich weil die Verwendung von Techniken wie Konsolenprotokollierung, Warnungen oder Web Inspector, jsfiddle.net usw. ihre Nachteile in diesem Arbeitsablauf hatte. Anstatt einen Zeitschwellenwert zu verwenden, zählt das Javascript die Anzahl der Ereignisse "pagehide" und "pageshow", um festzustellen, ob sie aufgetreten sind. Und ich fand, dass die robusteste Strategie darin bestand, ein anfängliches Zeitlimit von 1000 zu verwenden (anstelle der 25, 50 oder 100, die von anderen gemeldet / vorgeschlagen wurden).

Dies kann auf einem lokalen Server bereitgestellt werden, z. B. python -m SimpleHTTPServerauf iOS Safari.

Um damit zu spielen, klicken Sie entweder auf die Links "Installierte App öffnen" oder "App nicht installiert". Diese Links sollten dazu führen, dass die Maps-App bzw. der App Store geöffnet wird. Sie können dann zu Safari zurückkehren, um die Reihenfolge und das Timing der Ereignisse anzuzeigen.

(Hinweis: Dies funktioniert nur für Safari. Für andere Browser (wie Chrome) müssten Sie Handler für die pagehide / show-äquivalenten Ereignisse installieren.)

Update: Wie @Mikko in den Kommentaren ausgeführt hat, werden die von uns verwendeten Pageshow / Pagehide-Ereignisse in iOS8 anscheinend nicht mehr unterstützt.

<html>
<head>
</head>
<body>
<a href="maps://" onclick="clickHandler()">Open an installed app</a>
<br/><br/>
<a href="xmapsx://" onclick="clickHandler()">App not installed</a>
<br/>

<script>

var hideShowCount = 0 ;
window.addEventListener("pagehide", function() {
    hideShowCount++ ;
    showEventTime('pagehide') ;
});

window.addEventListener("pageshow", function() {
    hideShowCount++ ;
    showEventTime('pageshow') ;
});

function clickHandler(){
    var hideShowCountAtClick = hideShowCount ;
    showEventTime('click') ;
    setTimeout(function () {
               showEventTime('timeout function '+(hideShowCount-hideShowCountAtClick)+' hide/show events') ;
               if (hideShowCount == hideShowCountAtClick){
                    // app is not installed, go to App Store
                    window.location = 'http://itunes.apple.com/app' ;
               }
            }, 1000);
}

function currentTime()
{
    return Date.now()/1000 ;
}

function showEventTime(event){
    var time = currentTime() ;
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createTextNode(time+' '+event));
}
</script>
</body>
</html>

Ich muss so etwas tun. Am Ende habe ich die folgende Lösung gewählt.

Ich habe eine bestimmte Website-URL, die eine Seite mit zwei Schaltflächen öffnet

1) Button One zur Website gehen

2) Schaltfläche Zwei Gehe zur Anwendung (iPhone / Android-Telefon / Tablet). Sie können von hier aus auf einen Standardspeicherort zurückgreifen, wenn die App nicht installiert ist (wie eine andere URL oder ein App Store).

3) Cookie, um sich an die Wahl des Benutzers zu erinnern

<head>
<title>Mobile Router Example </title>


<script type="text/javascript">
    function set_cookie(name,value)
    {
       // js code to write cookie
    }
    function read_cookie(name) {
       // jsCode to read cookie
    }

    function goToApp(appLocation) {
        setTimeout(function() {
            window.location = appLocation;
              //this is a fallback if the app is not installed. Could direct to an app store or a website telling user how to get app


        }, 25);
        window.location = "custom-uri://AppShouldListenForThis";
    }

    function goToWeb(webLocation) {
        window.location = webLocation;
    }

    if (readCookie('appLinkIgnoreWeb') == 'true' ) {
        goToWeb('http://somewebsite');

    }
    else if (readCookie('appLinkIgnoreApp') == 'true') {
        goToApp('http://fallbackLocation');
    }



</script>
</head>
<body>


<div class="iphone_table_padding">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <!-- INTRO -->
            <span class="iphone_copy_intro">Check out our new app or go to website</span>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <!-- GET IPHONE APP BTN -->
                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn" onclick="set_cookie('appLinkIgnoreApp',document.getElementById('chkDontShow').checked);goToApp('http://getappfallback')">
                    <tr>
                        <td class="iphone_btn_on_left">&nbsp;</td>
                        <td class="iphone_btn_on_mid">
                            <span class="iphone_copy_btn">
                                Get The Mobile Applications
                            </span>
                        </td>
                        <td class="iphone_btn_on_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_btn_padding">

                <table border="0" cellspacing="0" cellpadding="0" class="iphone_btn"  onclick="set_cookie('appLinkIgnoreWeb',document.getElementById('chkDontShow').checked);goToWeb('http://www.website.com')">
                    <tr>
                        <td class="iphone_btn_left">&nbsp;</td>
                        <td class="iphone_btn_mid">
                            <span class="iphone_copy_btn">
                                Visit Website.com
                            </span>
                        </td>
                        <td class="iphone_btn_right">&nbsp;</td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
    <tr>
        <td class="iphone_table_leftRight">&nbsp;</td>
        <td>
            <div class="iphone_chk_padding">

                <!-- CHECK BOX -->
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><input type="checkbox" id="chkDontShow" /></td>
                        <td>
                            <span class="iphone_copy_chk">
                                <label for="chkDontShow">&nbsp;Don&rsquo;t show this screen again.</label>
                            </span>
                        </td>
                    </tr>
                </table>

            </div>
        </td>
        <td class="iphone_table_leftRight">&nbsp;</td>
    </tr>
</table>

</div>

</body>
</html>

Nachdem ich einige Antworten zusammengestellt habe, habe ich den folgenden Code gefunden. Was mich überraschte war, dass der Timer auf einem PC (Chrome, FF) oder Android Chrome nicht eingefroren wird - der Auslöser funktionierte im Hintergrund und die Sichtbarkeitsprüfung war die einzige zuverlässige Information.

var timestamp             = new Date().getTime();
var timerDelay              = 5000;
var processingBuffer  = 2000;

var redirect = function(url) {
  //window.location = url;
  log('ts: ' + timestamp + '; redirecting to: ' + url);
}
var isPageHidden = function() {
    var browserSpecificProps = {hidden:1, mozHidden:1, msHidden:1, webkitHidden:1};
    for (var p in browserSpecificProps) {
        if(typeof document[p] !== "undefined"){
        return document[p];
      }
    }
    return false; // actually inconclusive, assuming not
}
var elapsedMoreTimeThanTimerSet = function(){
    var elapsed = new Date().getTime() - timestamp;
  log('elapsed: ' + elapsed);
  return timerDelay + processingBuffer < elapsed;
}
var redirectToFallbackIfBrowserStillActive = function() {
  var elapsedMore = elapsedMoreTimeThanTimerSet();
  log('hidden:' + isPageHidden() +'; time: '+ elapsedMore);
  if (isPageHidden() || elapsedMore) {
    log('not redirecting');
  }else{
    redirect('appStoreUrl');
  }
}
var log = function(msg){
    document.getElementById('log').innerHTML += msg + "<br>";
}

setTimeout(redirectToFallbackIfBrowserStillActive, timerDelay);
redirect('nativeApp://');

JS Fiddle

Die Datumslösung ist viel besser als andere, ich musste die Zeit auf 50 erhöhen, so dass dies ein Hochtöner-Beispiel ist:

//on click or your event handler..
var twMessage = "Your Message to share";
var now = new Date().valueOf();
setTimeout(function () {
   if (new Date().valueOf() - now > 100) return;
   var twitterUrl = "https://twitter.com/share?text="+twMessage;
   window.open(twitterUrl, '_blank');
}, 50);
window.location = "twitter://post?message="+twMessage;

Das einzige Problem unter Mobile IOS Safari ist, wenn Sie die App nicht auf dem Gerät installiert haben. Daher zeigt Safari eine Warnung an, dass das automatische Löschen beim Öffnen der neuen URL ohnehin eine gute Lösung für den Moment ist.

Ich habe nicht alle gelesen, kann aber einen Iframe verwenden und die Quelle zu "Meine App: // was auch immer" hinzufügen.

Überprüfen Sie dann regelmäßig, ob das eingestellte Intervall der Seite 404 ist oder nicht.

Sie können auch den Ajax-Anruf verwenden. Wenn 404 antwortet, ist die App nicht installiert.