Jak sprawdzić, czy aplikacja jest zainstalowana ze strony internetowej na iPhonie?

Chcę utworzyć stronę internetową, stronę, która przekieruje iPhone'a do sklepu z aplikacjami, jeśli iPhone nie ma zainstalowanej aplikacji, ale jeśli iPhone ma zainstalowaną aplikację, chcę, aby otworzył aplikację.

Zaimplementowałem już niestandardowy adres URL w aplikacji na iPhone'a, więc mam adres URL do aplikacji, który jest podobny do:

myapp://

A jeśli ten adres URL jest nieprawidłowy, chcę, aby strona przekierowywała do sklepu z aplikacjami. Czy to w ogóle możliwe?

Jeśli nie mam zainstalowanej aplikacji na telefonie i napiszę adres myapp: // w Safari, otrzymam tylko komunikat o błędzie.

Nawet jeśli istnieje brzydki hack z javascriptem, o którym naprawdę chciałbym wiedzieć?

O ile wiem, nie możesz z poziomu przeglądarki sprawdzić, czy aplikacja jest zainstalowana, czy nie.

Ale możesz spróbować przekierować telefon do aplikacji, a jeśli nic się nie dzieje, przekieruj telefon na określoną stronę, na przykład:

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

Jeśli druga linia kodu daje wynik, to pierwszy wiersz nigdy nie jest wykonywany.

Mam nadzieję że to pomoże!

Podobne pytanie:

• Przeglądarka iPhone'a: ​​sprawdzanie, czy aplikacja na iPhone'a jest zainstalowana z przeglądarki
• Czy można zarejestrować schemat adresów URL oparty na domenie http + dla aplikacji na iPhone'a, takich jak YouTube i Mapy?

Aby kontynuować zaakceptowaną odpowiedź, czasami trzeba dodać dodatkowy kod, który będzie obsługiwał osoby powracające do przeglądarki po uruchomieniu aplikacji - funkcja setTimeout będzie działać zawsze, gdy to zrobią. Więc robię coś takiego:

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

W ten sposób, jeśli nastąpiło zawieszenie wykonywania kodu (np. Przełączanie aplikacji), nie będzie on działać.

iOS Safari ma funkcję, która umożliwia dodanie „inteligentnego” banera do strony internetowej, który będzie zawierał łącze do Twojej aplikacji, jeśli jest zainstalowana, lub do App Store.

Robisz to, dodając metatag do strony. Możesz nawet określić szczegółowy adres URL aplikacji, jeśli chcesz, aby aplikacja wykonywała coś specjalnego podczas ładowania.

Szczegółowe informacje można znaleźć w sekcji Promowanie aplikacji firmy Apple za pomocą banerów aplikacji inteligentnych .

Zaletą mechanizmu jest to, że jest łatwy i prezentuje ustandaryzowany baner. Wadą jest to, że nie masz dużej kontroli nad wyglądem lub lokalizacją. Ponadto wszystkie zakłady są wyłączone, jeśli strona jest wyświetlana w przeglądarce innej niż Safari.

Od 2017 roku wydaje się, że nie ma niezawodnego sposobu na wykrycie zainstalowanej aplikacji, a sztuczka z przekierowaniem nie będzie działać wszędzie.

Dla takich jak ja, którzy potrzebują głębokiego linku bezpośrednio z e-maili (dość powszechne), warto zwrócić uwagę na następujące kwestie:

• Wysyłanie e-maili za pomocą appScheme: // nie będzie działać poprawnie, ponieważ linki będą filtrowane w Gmailu

• Automatyczne przekierowanie do appScheme: // jest blokowane przez Chrome: Podejrzewam, że Chrome wymaga, aby przekierowanie było synchroniczne z interakcją użytkownika (jak kliknięcie)

• Możesz teraz korzystać z głębokiego linku bez appScheme: // i jest to lepsze, ale wymaga nowoczesnej platformy i dodatkowej konfiguracji. Android iOS

Warto zauważyć, że inni już o tym dogłębnie przemyśleli. Jeśli przyjrzysz się, jak Slack implementuje swoją funkcję „magicznego łącza”, możesz zauważyć, że:

• Wysyła wiadomość e-mail ze zwykłym linkiem http (ok z Gmailem)
• Strona internetowa ma duży przycisk, który prowadzi do appScheme: // (ok z Chrome)

Możesz sprawdzić tę wtyczkę, która próbuje rozwiązać problem. Opiera się na tym samym podejściu, które opisali missemisa i Alastair itp., Ale zamiast tego używa ukrytej ramki iframe.

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

@Alistair wskazał w tej odpowiedzi że czasami użytkownicy wracają do przeglądarki po otwarciu aplikacji. Komentator tej odpowiedzi wskazał, że użyte wartości czasów musiały zostać zmienione w zależności od wersji iOS. Kiedy nasz zespół musiał sobie z tym poradzić, odkryliśmy, że wartości czasu dla początkowego limitu czasu i stwierdzenia, czy wróciliśmy do przeglądarki, musiały zostać dostrojone i często nie działały dla wszystkich użytkowników i urządzeń.

Zamiast używać arbitralnego progu różnicy czasu do określenia, czy wróciliśmy do przeglądarki, sensowne było wykrycie zdarzeń „ukrycie strony” i „pokazu stron”.

Opracowałem następującą stronę internetową, aby pomóc zdiagnozować, co się dzieje. Dodaje diagnostykę HTML w miarę rozwoju wydarzeń, głównie dlatego, że używanie technik takich jak rejestrowanie konsoli, alerty lub Inspektor sieci, jsfiddle.net itp. Miało swoje wady w tym przepływie pracy. Zamiast używać progu czasowego, JavaScript zlicza liczbę zdarzeń „pagehide” i „pagehow”, aby sprawdzić, czy wystąpiły. Odkryłem, że najbardziej niezawodną strategią było użycie początkowego limitu czasu wynoszącego 1000 (zamiast 25, 50 lub 100 zgłoszonych / sugerowanych przez innych).

Można to udostępnić na serwerze lokalnym, np. python -m SimpleHTTPServerI wyświetlić na iOS Safari.

Aby się nią bawić, naciśnij łącze „Otwórz zainstalowaną aplikację” lub „Aplikacja niezainstalowana”. Te linki powinny spowodować otwarcie odpowiednio aplikacji Mapy lub App Store. Następnie możesz wrócić do Safari, aby zobaczyć sekwencję i czas wydarzeń.

(Uwaga: to zadziała tylko dla Safari. W przypadku innych przeglądarek (takich jak Chrome) musisz zainstalować programy obsługi dla zdarzeń równoważnych pagehide / show).

Aktualizacja: Jak @Mikko wskazał w komentarzach, wydarzenia Pageshow / Pagehide, których używamy, najwyraźniej nie są już obsługiwane w 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>

Muszę zrobić coś takiego. Skończyło się na następującym rozwiązaniu.

Mam określony adres URL witryny, który otwiera stronę z dwoma przyciskami

1) Przycisk pierwszy przejdź do strony internetowej

2) Przycisk drugi przejdź do aplikacji (iPhone / telefon / tablet z Androidem), z którego możesz wrócić do domyślnej lokalizacji, jeśli aplikacja nie jest zainstalowana (jak inny adres URL lub sklep z aplikacjami)

3) plik cookie do zapamiętania wyboru użytkownika

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

Po skompilowaniu kilku odpowiedzi wymyśliłem następujący kod. Co zaskoczyło mnie to, że zegar nie nie dostać zamrożone na PC (Chrome, FF) lub Android Chrome - spust działa w tle, a check widoczność była jedynym wiarygodnym informacji.

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

Rozwiązanie dat jest znacznie lepsze niż inne, musiałem zwiększyć czas do 50 tak, że jest to przykład głośnika wysokotonowego:

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

jedyny problem w Mobile IOS Safari polega na tym, że nie masz zainstalowanej aplikacji na urządzeniu, więc Safari wyświetla alert, który automatycznie znika po otwarciu nowego adresu URL, tak czy inaczej jest to na razie dobre rozwiązanie!

Nie przeczytałem wszystkich tych elementów, ale można użyć elementu iframe i dodać źródło do „moja aplikacja: // cokolwiek”.

Następnie sprawdzaj regularnie w ustawionym interwale strony 404 lub nie.

Możesz także użyć połączenia Ajax. Jeśli odpowiedź 404 oznacza, że ​​aplikacja nie jest zainstalowana.