Come verificare se un'app è installata da una pagina Web su un iPhone?

Voglio creare una pagina Web, una pagina che reindirizzerà un iPhone all'app-store se sull'iPhone non è installata l'applicazione, ma se sull'iPhone è installata l'app voglio che apra l'applicazione.

Ho già implementato un URL personalizzato nell'applicazione iPhone, quindi ho un URL per l'applicazione simile a:

myapp://

E se questo URL non è valido, voglio che la pagina venga reindirizzata all'app store. Ciò è effettivamente possibile?

Se non ho l'applicazione installata sul telefono e scrivo myapp: // url in Safari, tutto ciò che ottengo è un messaggio di errore.

Anche se esiste un brutto hack con JavaScript, mi piacerebbe davvero saperlo?

Per quanto ne so, da un browser non è possibile verificare se un'app è installata o meno.

Ma puoi provare a reindirizzare il telefono all'app e, se non succede nulla, reindirizza il telefono a una pagina specifica, in questo modo:

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

Se la seconda riga di codice fornisce un risultato, la prima riga non viene mai eseguita.

Spero che questo ti aiuti!

Domanda simile:

• Browser iPhone: verifica se l'app iPhone è installata dal browser
• È possibile registrare uno schema URL basato sul dominio http + per le app per iPhone, come YouTube e Maps?

Per favorire la risposta accettata, a volte è necessario aggiungere un codice aggiuntivo per gestire le persone che restituiscono il browser dopo aver avviato l'app; la funzione setTimeout verrà eseguita ogni volta che lo fanno. Quindi, faccio una cosa del genere:

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://";

In questo modo, se si è verificato un blocco nell'esecuzione del codice (ovvero, cambio di app), non verrà eseguito.

iOS Safari ha una funzione che ti consente di aggiungere un banner "intelligente" alla tua pagina web che si collegherà alla tua app, se installata, o all'App Store.

Puoi farlo aggiungendo un metatag alla pagina. Puoi anche specificare un URL dettagliato dell'app se desideri che l'app faccia qualcosa di speciale quando viene caricata.

I dettagli sono disponibili nella pagina Apple Promoting App with Smart App Banners .

Il meccanismo ha i vantaggi di essere semplice e presentare un banner standardizzato. L'aspetto negativo è che non hai molto controllo sull'aspetto o sulla posizione. Inoltre, tutte le scommesse sono disattivate se la pagina viene visualizzata in un browser diverso da Safari.

A partire dal 2017, sembra che non sia installato alcun modo affidabile per rilevare un'app e il trucco di reindirizzamento non funzionerà ovunque.

Per quelli come me che hanno bisogno di un collegamento diretto direttamente dalle e-mail (abbastanza comune), vale la pena notare quanto segue:

• L'invio di e-mail con appScheme: // non funzionerà correttamente poiché i collegamenti verranno filtrati in Gmail

• Reindirizzamento automatico ad appScheme: // è bloccato da Chrome: sospetto che Chrome richieda che il reindirizzamento sia sincrono rispetto all'interazione dell'utente (come un clic)

• Ora puoi eseguire il deep link senza appScheme: // ed è meglio ma richiede una piattaforma moderna e un'installazione aggiuntiva. Android iOS

Vale la pena notare che altre persone hanno già pensato a questo in profondità. Se osservi come Slack implementa la sua funzione "collegamento magico", puoi notare che:

• Invia un'e-mail con un normale link http (ok con Gmail)
• La pagina web ha un grosso pulsante che collega ad AppScheme: // (ok con Chrome)

Puoi dare un'occhiata a questo plugin che tenta di risolvere il problema. Si basa sullo stesso approccio descritto da Missemisa, Alastair ecc., Ma utilizza invece un iframe nascosto.

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

@Alistair ha sottolineato in questa risposta che a volte gli utenti tornano al browser dopo aver aperto l'app. Un commentatore di quella risposta ha indicato che i valori dei tempi utilizzati dovevano essere modificati a seconda della versione di iOS. Quando il nostro team ha dovuto occuparsene, abbiamo scoperto che i valori di tempo per il timeout iniziale e che dicevano se fossimo tornati al browser dovevano essere sintonizzati e spesso non funzionavano per tutti gli utenti e i dispositivi.

Invece di utilizzare una soglia di differenza temporale arbitraria per determinare se fossimo tornati al browser, aveva senso rilevare gli eventi "pagehide" e "pageshow".

Ho sviluppato la seguente pagina Web per aiutare a diagnosticare cosa stava succedendo. Aggiunge la diagnostica HTML man mano che gli eventi si svolgono, principalmente perché l'utilizzo di tecniche come la registrazione della console, gli avvisi o Web Inspector, jsfiddle.net ecc. Hanno tutti i loro svantaggi in questo flusso di lavoro. Anziché utilizzare una soglia temporale, Javascript conta il numero di eventi "pagehide" e "pageshow" per vedere se si sono verificati. E ho scoperto che la strategia più efficace era quella di utilizzare un timeout iniziale di 1000 (anziché i 25, 50 o 100 riportati / suggeriti da altri).

Questo può essere servito su un server locale, ad es. python -m SimpleHTTPServerE visualizzato su iOS Safari.

Per giocarci, premi il link "Apri un'app installata" o "App non installata". Questi collegamenti dovrebbero far aprire rispettivamente l'app Maps o l'App Store. È quindi possibile tornare a Safari per vedere la sequenza e i tempi degli eventi.

(Nota: questo funzionerà solo per Safari. Per altri browser (come Chrome) dovresti installare gestori per gli eventi pagehide / show-equivalenti).

Aggiornamento: Come ha sottolineato @Mikko nei commenti, gli eventi pagehow / pagehide che stiamo utilizzando non sembrano più supportati in iOS8.

<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>

Ho bisogno di fare qualcosa del genere Ho finito con la seguente soluzione.

Ho un sito Web specifico che aprirà una pagina con due pulsanti

1) Pulsante Uno vai al sito Web

2) Pulsante Due: vai all'applicazione (iPhone / telefono Android / tablet) puoi tornare a una posizione predefinita da qui se l'app non è installata (come un altro url o un app store)

3) cookie per ricordare la scelta degli utenti

<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>

Dopo aver compilato alcune risposte, ho escogitato il seguente codice. Ciò che mi ha sorpreso è che il timer non si è bloccato su un PC (Chrome, FF) o Android Chrome: il trigger ha funzionato in background e il controllo di visibilità è stata l'unica informazione affidabile.

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

La soluzione della data è molto meglio di altre, ho dovuto aumentare il tempo su 50 in modo che questo sia un esempio di Tweeter:

//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;

l'unico problema su Mobile IOS Safari è quando non hai l'app installata sul dispositivo, e quindi Safari mostra un avviso che autodismiss quando viene aperto il nuovo url, comunque è una buona soluzione per ora!

Non ho letto tutti questi, ma potrebbe essere un iframe e aggiungere il sorgente a "la mia app: // qualunque cosa".

Quindi controllare regolarmente su intervallo impostato della pagina è 404 o no.

Puoi anche usare la chiamata Ajax. Se la risposta 404 quindi l'app non è installata.