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


142

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


1
To ciągle się zmienia w każdej wersji iOS - iOS9 znowu wszystko zepsuł. Zalecam skorzystanie z usługi takiej jak branch.io, aby zająć się tym za Ciebie. Pomogłem zbudować części usługi łącza Branch, która obecnie obsługuje ponad 6000 różnych przypadków krawędzi przekierowań ... szalone.
Alex Austin

1
W 2017 roku, jeśli potrzebujesz linku do swojej aplikacji z wiadomości e-mail, powinieneś raczej spojrzeć na moją odpowiedź: stackoverflow.com/questions/13044805/ ...
Sebastien Lorber

Odpowiedzi:


198

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:


20
Obecnie w iOS 6.1.2 wydaje się to działać tylko w trybie aplikacji internetowej. Jeśli używasz aplikacji bezpośrednio z przeglądarki, otwiera zewnętrzną aplikację zgodnie z oczekiwaniami, ale limit czasu również zostaje wyzwolony, a przeglądarka jest przekierowywana.
Mika Tuupola

4
Jeśli aplikacja nie jest zainstalowana, wyświetla brzydki alert „nie znaleziono strony”. W każdym razie możemy to stłumić
Akshat Agarwal

3
@AkshatAgarwal, czy możesz wyjaśnić, jak kodować, aby pominąć komunikat o nie znalezionej stronie
Harpreet

2
Istnieją nowe sposoby implementacji tego teraz zarówno w systemie Android, jak i iOS. Spójrz na linki do aplikacji na Androida i uniwersalne linki na iOS
maledr53,

1
Otwiera aplikację, ale także przekierowuje przeglądarkę do sklepu z aplikacjami / playstore. Każda metoda / hack, aby temu zapobiec?
Sujeet Kumar

157

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


2
To rozwiązanie jest znacznie lepsze niż inne, musiałem wydłużyć czas na 50
Magico

1
Mój komentarz na temat niepowodzenia w iOS 7 był fałszywy: po prostu musiałem zwiększyć 100 ms do kilku sekund (nie ma potrzeby, aby było tak krótko).
devios1

Zamiast itunes.apple.com/appdir , zapisz krok (bez czekania na przekierowanie http) i połącz bezpośrednio ze schematem adresu URL sklepu z aplikacjami. Na przykład: itms: //itunes.apple.com/us/app/yelp/id284910350
Justin

Niesamowite, że działa dobrze w aplikacjach na iOS, ten sam kod przekierowuje na oba adresy URL w tym samym czasie w aplikacjach na Androida. czy masz na Androida otwieranie aplikacji i sklepu Play?
Mehul Dudhat

6
To konsekwentnie otwiera zarówno moją aplikację, jak i sklep z aplikacjami, nawet w wieku 50 lat. IOS 12
Josh Wolff

27

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.


2
Ale nie wyświetla banera aplikacji, jeśli użytkownik jej nie zainstalował
TomSawyer,

Ani uniwersalne linki, ani inteligentne banery nie działają dla mnie. Potrzebuję wielu linków do różnych aplikacji natywnych. Każdy z zainstalowanym sprawdzeniem IF, uruchom go, w przeciwnym razie przejdź do sklepu. Nie mam też kontroli nad domenami, do których przesyłam plik własności linków uniwersalnych. Więc obie opcje są dla mnie odrzucone. Potrzebujesz czystego rozwiązania javascript.
FranticRock

16

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)


9

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

2

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>

Potrzebuję tego typu kodu do spełnienia moich wymagań, ale nie mogę umieścić moich linków. Wymaganie: jeśli aplikacja 1 jest zainstalowana, przejdź do łącza 1, w przeciwnym razie przejdź do łącza 2. Czy ktoś może pomóc?
SFDC_Learner

Musisz anulować plik cookie po zainstalowaniu aplikacji, na wypadek, gdyby użytkownik 1-szy wybierał sieć.
Charlie Reitzel

1

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


-2

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!


1
@AkshatAgarwal, ponieważ jest to to samo rozwiązanie, co alastair, które zostało opublikowane 7 dni później
albanx

-5

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.


To nie budzi rozwiązanie.
Andrey M.
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.