Как проверить, установлено ли приложение с веб-страницы на iPhone?

149

Я хочу создать веб-страницу, страницу, которая будет перенаправлять iPhone в магазин приложений, если на iPhone не установлено приложение, но если на iPhone установлено приложение, я хочу, чтобы он открывал приложение.

Я уже реализовал настраиваемый URL-адрес в приложении для iPhone, поэтому у меня есть URL-адрес для приложения, который выглядит примерно так:

myapp://

И если этот URL-адрес недействителен, я хочу, чтобы страница перенаправлялась в магазин приложений. Это вообще возможно?

Если у меня не установлено приложение на телефоне и я напишу URL-адрес myapp: // в сафари, все, что я получу, это сообщение об ошибке.

Даже если существует уродливый хак с javascript, я действительно хотел бы знать?

Йоаким Энгстром
источник
1
Это постоянно меняется с каждой версией iOS - iOS9 снова все сломала. Я бы рекомендовал воспользоваться сервисом, например, branch.io, чтобы позаботиться об этом за вас. Я помогал создавать части службы Branch Link, и в настоящее время она обрабатывает более 6000 различных случаев перенаправления ... безумно.
Alex Austin
1
В 2017 году, если вам нужно ссылаться на свое приложение из электронных писем, вам лучше взглянуть на мой ответ: stackoverflow.com/questions/13044805/…
Себастьен Лорбер

Ответы:

208

Насколько я знаю, вы не можете из браузера проверить, установлено ли приложение или нет.

Но вы можете попробовать перенаправить телефон в приложение, и, если ничего не происходит, перенаправить телефон на указанную страницу, например:

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

Если вторая строка кода дает результат, первая строка никогда не выполняется.

Надеюсь это поможет!

Аналогичный вопрос:

миссемиса
источник
20
В настоящее время в iOS 6.1.2 это работает только в режиме веб-приложений. При использовании приложения непосредственно из браузера оно открывает внешнее приложение, как ожидалось, но также запускается тайм-аут и браузер перенаправляется.
Мика Туупола
4
Если приложение не установлено, выдает неприятное предупреждение «страница не найдена». В любом случае мы можем это подавить
Акшат Агарвал
3
@AkshatAgarwal, не могли бы вы уточнить, как кодировать, чтобы подавить предупреждение «страница не найдена»
Харприт
2
Теперь есть новые способы реализовать это как в Android, так и в iOS. Взгляните на ссылки на приложения для Android и универсальные ссылки для iOS
maledr53
1
Он открывает приложение, но также перенаправляет браузер в appstore / playstore. Любой метод / взлом, чтобы предотвратить это?
Суджит Кумар
159

Чтобы продолжить принятый ответ, вам иногда нужно добавить дополнительный код для обработки людей, возвращающих браузер после запуска приложения - эта функция setTimeout будет запускаться всякий раз, когда они это делают. Итак, я делаю что-то вроде этого:

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

Таким образом, если выполнение кода зависло (т. Е. Переключение приложений), он не запустится.

Аластер
источник
2
Это решение намного лучше, чем другие, мне пришлось увеличить время на 50
Magico
1
Мой комментарий о том, что он не работает на iOS 7, был ложным: мне просто пришлось увеличить 100 мс до пары секунд (в любом случае, это не обязательно должно быть так коротко).
devios1
Вместо itunes.apple.com/appdir сохраните шаг (не дожидаясь перенаправления http) и сделайте ссылку непосредственно на схему URL-адреса магазина приложений. Например: itms: //itunes.apple.com/us/app/yelp/id284910350
Джастин
Потрясающе, он отлично работает для приложений ios, один и тот же код перенаправляется на оба URL-адреса одновременно в приложениях для Android. у вас есть для Android, чтобы открыть магазин приложений и воспроизведения?
Мехул Дудхат
7
Это постоянно открывает как мое приложение, так и магазин приложений, даже при 50. iOS 12
Джош Вольф
27

В iOS Safari есть функция, которая позволяет добавить на вашу веб-страницу «умный» баннер, который будет ссылаться либо на ваше приложение, если оно установлено, либо на App Store.

Вы делаете это, добавляя metaтег на страницу. Вы даже можете указать подробный URL-адрес приложения, если хотите, чтобы приложение выполняло что-то особенное при загрузке.

Подробности можно найти на странице Apple по продвижению приложений с помощью смарт-баннеров приложений .

Преимущество этого механизма в том, что он прост и представляет собой стандартный баннер. Обратной стороной является то, что у вас нет особого контроля над внешним видом или местоположением. Кроме того, все ставки отключены, если страница просматривается в браузере, отличном от Safari.

мозговая пробка
источник
2
Но баннер приложения не отображается, если пользователь не установил его
TomSawyer
У меня не работают ни универсальные ссылки, ни смарт-баннеры. Мне нужно иметь несколько ссылок на разные приложения. У каждого установлен Check IF, запускайте, а то идите в магазин. У меня также нет контроля над доменами, на которые можно загрузить файл владения универсальными ссылками. Так что оба варианта для меня не подходят. Требуется чистое решение javascript.
FranticRock
18

По состоянию на 2017 год кажется, что нет надежного способа обнаружить установленное приложение, и трюк с перенаправлением работает не везде.

Для тех, кто, как я, нуждается в глубинной ссылке прямо из писем (довольно часто), стоит отметить следующее:

  • Отправка писем с помощью appScheme: // не будет работать нормально, потому что ссылки будут фильтроваться в Gmail.

  • Автоматическое перенаправление на appScheme: // заблокировано Chrome: я подозреваю, что Chrome требует, чтобы перенаправление было синхронным с взаимодействием с пользователем (например, щелчком)

  • Теперь вы можете использовать глубокую ссылку без appScheme: //, и это лучше, но для этого требуется современная платформа и дополнительная настройка. Android iOS


Стоит отметить, что другие люди уже глубоко об этом думали. Если вы посмотрите, как Slack реализует свою функцию «волшебной ссылки», вы можете заметить, что:

  • Он отправляет электронное письмо с обычной ссылкой http (нормально с Gmail)
  • На веб-странице есть большая кнопка, которая ссылается на appScheme: // (нормально с Chrome)
Себастьян Лорбер
источник
9

Вы можете попробовать этот плагин, который пытается решить проблему. Он основан на том же подходе, который описан missemisa, Alastair и т. Д., Но вместо этого использует скрытый iframe.

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

Хампусольссон
источник
Я добавил это, но он перенаправляет в Appstore даже после того, как я установил приложение.
Qasim
9

@Alistair указал в этом ответе что иногда пользователи возвращаются в браузер после открытия приложения. Комментатор этого ответа указал, что используемые значения времени должны быть изменены в зависимости от версии iOS. Когда нашей команде пришлось столкнуться с этим, мы обнаружили, что значения времени для начального тайм-аута и определения того, вернулись ли мы в браузер, должны быть настроены, и часто не работали для всех пользователей и устройств.

Вместо использования произвольного порогового значения разницы во времени для определения того, вернулись ли мы в браузер, имело смысл обнаруживать события «pagehide» и «pageshow».

Я разработал следующую веб-страницу, чтобы помочь диагностировать происходящее. Он добавляет диагностику HTML по мере развертывания событий, в основном потому, что использование таких методов, как ведение журнала консоли, предупреждения или веб-инспектор, jsfiddle.net и т. Д., Имеет свои недостатки в этом рабочем процессе. Вместо того, чтобы использовать порог времени, Javascript подсчитывает количество событий «pagehide» и «pageshow», чтобы узнать, произошли ли они. И я обнаружил, что наиболее надежной стратегией было использование начального тайм-аута 1000 (а не 25, 50 или 100, сообщенных / предложенных другими).

Это может быть выполнено на локальном сервере, например, python -m SimpleHTTPServerи просмотрено в iOS Safari.

Чтобы поиграть с ним, нажмите ссылку «Открыть установленное приложение» или «Приложение не установлено». Эти ссылки должны вызывать открытие соответственно приложения Карты или App Store. Затем вы можете вернуться в Safari, чтобы увидеть последовательность и время событий.

(Примечание: это будет работать только для Safari. Для других браузеров (например, Chrome) вам придется установить обработчики для событий, эквивалентных pagehide / show).

Обновление: как @Mikko указал в комментариях, используемые нами события pageshow / pagehide, по-видимому, больше не поддерживаются в 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

Мне нужно сделать что-то подобное. В итоге я выбрал следующее решение.

У меня есть конкретный URL-адрес веб-сайта, который откроет страницу с двумя кнопками

1) Первая кнопка перехода на сайт

2) Вторая кнопка перехода к приложению (iphone / телефон / планшет Android), отсюда вы можете вернуться к местоположению по умолчанию, если приложение не установлено (например, другой URL-адрес или магазин приложений)

3) cookie для запоминания выбора пользователя

<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>
nate_weldon
источник
Мне нужен этот тип кода по моему требованию, но я не могу разместить свои ссылки. Требование: если установлено приложение 1, перейдите по ссылке 1, иначе перейдите по ссылке 2. Может кто-нибудь помочь?
SFDC_Learner
Необходимо отключить cookie при установке приложения, если пользователь 1-й выберет веб.
Charlie
1

После компиляции нескольких ответов я получил следующий код. Что меня удивило , что таймер никак не замерзнуть на ПК (Chrome, FF) или Android Chrome - триггер работает в фоновом режиме, и проверка видимости была единственным надежной информацией.

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

ptrk
источник
-2

Решение даты намного лучше, чем другие, мне пришлось увеличить время на 50, как это пример твитера:

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

единственная проблема в Mobile IOS Safari - это когда у вас нет приложения, установленного на устройстве, и поэтому Safari показывает предупреждение, которое автоматически отклоняется при открытии нового URL-адреса, в любом случае это хорошее решение на данный момент!

Magico
источник
1
@AkshatAgarwal, потому что это то же решение, что и alastair one, опубликованный 7 дней спустя
albanx
-5

Не читал все это, но, возможно, использовал iframe и добавлял источник в "my app: // something".

Затем регулярно проверяйте, установлен ли интервал страницы 404 или нет.

Вы также можете использовать вызов Ajax. Если ответ 404, то приложение не установлено.

1,21 гигаватт
источник
Это не страшное решение.
Андрей М.