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

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

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

myapp://

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

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

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

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

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

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

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

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

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

• Браузер iPhone: проверка, установлено ли приложение iPhone из браузера
• Можно ли зарегистрировать схему URL-адресов на основе http + домена для приложений iPhone, таких как YouTube и Карты?

Чтобы продолжить принятый ответ, вам иногда нужно добавить дополнительный код для обработки людей, возвращающих браузер после запуска приложения - эта функция 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://";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У меня есть конкретный 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>

После компиляции нескольких ответов я получил следующий код. Что меня удивило , что таймер никак не замерзнуть на ПК (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

Решение даты намного лучше, чем другие, мне пришлось увеличить время на 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-адреса, в любом случае это хорошее решение на данный момент!

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

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

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