Bir uygulamanın iPhone'daki bir web sayfasından yüklenip yüklenmediğini nasıl kontrol edebilirim?


142

Bir web sayfası, iPhone'da uygulama yüklü değilse iPhone'u uygulama mağazasına yönlendirecek bir sayfa oluşturmak istiyorum, ancak iPhone'da uygulama yüklüyse uygulamayı açmasını istiyorum.

Zaten iPhone uygulamasında özel bir URL uyguladım, bu yüzden uygulama için bir URL var:

myapp://

Ve bu url geçersizse, sayfanın uygulama mağazasına yönlendirmesini istiyorum. Bu hiç mümkün mü?

Uygulama telefonda yüklü değilse ve maripp: // url'yi safari'ye yazarsam, aldığım tek şey bir hata mesajıdır.

Javascript ile çirkin bir kesmek olsa bile ben gerçekten bilmek istiyorum?


1
Bu, her iOS sürümünde sürekli değişiyor - iOS9 her şeyi tekrar kırdı. Sizinle ilgilenmek için branch.io gibi bir hizmet kullanmanızı öneririm . Şube bağlantı hizmetinin bölümlerini oluşturmaya yardımcı oldum ve şu anda 6000'den fazla farklı yönlendirme kenar durumu ele alıyor ... deli.
Alex Austin

1
2017 yılında, gereksiniminiz uygulamanıza e-postalardan bağlanmaksa, cevabımı gözden
geçirmelisiniz

Yanıtlar:


198

Bildiğim kadarıyla yapamadığınız, bir tarayıcıdan bir uygulamanın yüklü olup olmadığını kontrol edin.

Ancak telefonu uygulamaya yönlendirmeyi deneyebilirsiniz ve hiçbir şey olmazsa telefonu belirtilen bir sayfaya yeniden yönlendirin:

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

İkinci kod satırı bir sonuç verirse, ilk satır hiçbir zaman yürütülmez.

Bu yardımcı olur umarım!

Benzer soru:


20
Şu anda iOS 6.1.2'de bu sadece webapp modunda çalışıyor gibi görünüyor. Uygulamayı doğrudan tarayıcıdan kullanıyorsanız, harici uygulamayı beklendiği gibi açar, ancak zaman aşımı da tetiklenir ve tarayıcı yeniden yönlendirilir.
Mika Tuupola

4
Uygulama yüklü değilse, çirkin bir 'sayfa bulunamadı' uyarısı atar. Her neyse bunu bastırabiliriz
Akshat Agarwal

3
@AkshatAgarwal, lütfen 'sayfa bulunamadı uyarısı' bastırmak için kodlama hakkında ayrıntılı bilgi verebilir misiniz
Harpreet

2
Bunu şimdi hem Android hem de iOS'ta uygulamanın yeni yolları var. Android Uygulama Bağlantılarına ve iOS Evrensel Bağlantılarına
maledr53

1
Uygulamayı açın, ancak tarayıcıyı appstore / playstore'a yönlendirin. Bunu önlemek için herhangi bir yöntem / kesmek?
Sujeet Kumar

157

Kabul edilen cevabı daha da ileriye götürmek için, bazen uygulamayı başlattıktan sonra tarayıcıya dönen kişilerin işlenmesi için ekstra kod eklemeniz gerekir; bu setTimeout işlevi her çalıştığında çalışır. Yani, böyle bir şey yapıyorum:

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

Bu şekilde, kod yürütmede bir donma varsa (yani, uygulama değiştirme), çalışmaz.


2
Bu çözüm diğerlerinden çok daha iyi, zamanı 50'de arttırmak zorunda kaldım
Magico

1
İOS 7'de başarısız olmasıyla ilgili yorumum yanlıştı: 100 ms'yi birkaç saniyeye arttırmak zorunda kaldım (gerçekten bu kadar kısa olmasına gerek yok).
devios1

İtunes.apple.com / appdir yerine bir adımı kaydedin (http yönlendirmesini beklemenize gerek yok) ve doğrudan uygulama mağazası URL şemasına bağlantı oluşturun. Örneğin: itms: //itunes.apple.com/tr/app/yelp/id284910350
Justin

Android uygulamalarında aynı anda her iki url'ye de aynı kod yönlendirmesini sağlayan ios uygulamaları için harika çalışıyor. android için uygulamalar ve oyun mağazası açmak için yaptın mı?
Mehul Dudhat

6
Bu, hem uygulamamı hem de uygulama mağazasını 50'de bile sürekli olarak açar. İOS 12
Josh Wolff

27

iOS Safari, web sayfanıza, yüklü ise uygulamanıza veya App Store'a bağlanacak "akıllı" bir banner eklemenizi sağlayan bir özelliğe sahiptir.

Bunu metasayfaya bir etiket ekleyerek yaparsınız . Uygulamanın yüklendiğinde özel bir şey yapmasını istiyorsanız ayrıntılı bir uygulama URL'si bile belirleyebilirsiniz.

Ayrıntılar Apple'ın Uygulamaları Akıllı Uygulama Afişleriyle Tanıtma sayfasındadır.

Mekanizma, kolay olma ve standart bir afiş sunma avantajlarına sahiptir. Dezavantajı, görünüm veya konum üzerinde çok fazla kontrolünüz olmamasıdır. Ayrıca, sayfa Safari dışındaki bir tarayıcıda görüntüleniyorsa tüm bahisler kapalıdır.


2
Ancak, kullanıcı yüklemediyse uygulama başlığı gösterilmez
TomSawyer

Evrensel bağlantılar veya Akıllı banner'lar benim için işe yaramıyor. Farklı uygulamalara birden fazla yerel uygulama bağlantım olması gerekiyor. Check IF Install (Yüklüyse) olan her biri, başlatın, aksi takdirde mağazaya gidin. Ayrıca, evrensel bağlantılar için sahiplik dosyasını yüklemek için alanların kontrolüne sahip değilim. Yani her iki seçenek de benim için geride bırakıldı. Saf bir javascript çözümüne ihtiyacınız var.
FranticRock

16

2017 itibariyle, bir uygulamanın yüklü olduğunu tespit etmenin güvenilir bir yolu yok gibi görünüyor ve yönlendirme hilesi her yerde çalışmaz.

Benim gibi doğrudan e-postalardan derin bağlantıya ihtiyaç duyanlar için (oldukça yaygın), aşağıdakilere dikkat etmek gerekir:

  • AppScheme: // ile e-posta gönderme, bağlantılar Gmail'de filtreleneceğinden iyi çalışmaz

  • AppScheme: // öğesine otomatik olarak yeniden yönlendirme Chrome tarafından engellendi: Chrome'un yeniden yönlendirmenin bir kullanıcı etkileşimi (tıklama gibi) ile senkronize olmasını gerektirdiğinden şüpheleniyorum

  • Artık appScheme: // olmadan derin bağlantı kurabilirsiniz ve daha iyidir, ancak modern bir platform ve ek kurulum gerektirir. Android iOS


Diğer insanların bunu zaten derinlemesine düşündüklerini belirtmek gerekir. Slack'in "sihirli bağlantı" özelliğini nasıl uyguladığına bakarsanız şunu fark edebilirsiniz:

  • Normal bir http bağlantısı olan bir e-posta gönderir (Gmail ile tamam)
  • Web sayfasında appScheme: // (Chrome ile tamam) bağlantısı olan büyük bir düğme var


9

@Alistair bu cevaba işaret etti , bazen kullanıcıların uygulamayı açtıktan sonra tarayıcıya döneceğini belirtti. Bu cevaba yapılan bir yorumcu, kullanılan zaman değerlerinin iOS sürümüne bağlı olarak değiştirilmesi gerektiğini belirtti. Ekibimiz bununla uğraşmak zorunda kaldığında, ilk zaman aşımı ve tarayıcıya geri dönüp dönmediğimizi söyleyen zaman değerlerinin ayarlanması gerektiğini ve çoğu zaman tüm kullanıcılar ve cihazlar için çalışmadığını gördük.

Tarayıcıya geri dönüp dönmediğimizi belirlemek için rastgele bir zaman farkı eşiği kullanmak yerine, "pagehide" ve "pageshow" olaylarını tespit etmek mantıklıydı.

Neler olup bittiğini teşhis etmeye yardımcı olmak için aşağıdaki web sayfasını geliştirdim. Olaylar ortaya çıktıkça HTML teşhisi ekler, çünkü konsol günlüğü, uyarılar veya Web Inspector, jsfiddle.net gibi tekniklerin kullanılması bu iş akışında dezavantajlara sahipti. Javascript, bir zaman eşiği kullanmak yerine, gerçekleşip gerçekleşmediğini görmek için "pagehide" ve "pageshow" etkinliklerinin sayısını sayar. Ve en sağlam stratejinin 1000 başlangıç ​​zaman aşımı kullanmak olduğunu buldum (başkaları tarafından bildirilen / önerilen 25, 50 veya 100 yerine).

Bu, yerel bir sunucuda sunulabilir python -m SimpleHTTPServerve örneğin iOS Safari'de görüntülenebilir.

Bununla oynamak için "Yüklü bir uygulamayı aç" veya "Uygulama yüklü değil" bağlantılarına basın. Bu bağlantılar sırasıyla Haritalar uygulamasının veya App Store'un açılmasına neden olmalıdır. Ardından olayların sırasını ve zamanlamasını görmek için Safari'ye dönebilirsiniz.

(Not: bu yalnızca Safari için çalışır. Diğer tarayıcılarda (Chrome gibi) sayfa gizleme / şov eşdeğeri etkinlikler için işleyiciler yüklemeniz gerekir).

Güncelleme: @Mikko'nun yorumlarda belirttiği gibi, kullandığımız sayfa gösterisi / sayfa gizleme etkinlikleri artık iOS8'de artık desteklenmiyor.

<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

Böyle bir şey yapmalıyım, aşağıdaki çözümle devam ettim.

İki düğmeli bir sayfa açacak belirli bir web sitesi URL'm var

1) Düğme Bir web sitesine gidin

2) Düğme İki uygulamaya gidin (iphone / android telefon / tablet), uygulama yüklü değilse (başka bir url veya uygulama mağazası gibi) buradan varsayılan bir konuma geri dönebilirsiniz.

3) çerez kullanıcıların seçimini hatırlamak

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

Benim gereksinim için bu tür bir kod gerekir ama benim bağlantıları yerleştirmek mümkün değil. Gereksinim: app1 kuruluysa Link 1'e gidin, aksi takdirde Link2'ye gidin. Birisi lütfen yardım edebilir mi?
SFDC_Learner

1. kullanıcının web'i seçmesi durumunda, uygulama yüklendiğinde çerezi kaldırmanız gerekir.
Charlie Reitzel

1

Birkaç cevap derledikten sonra şu kodu buldum. Beni zamanlayıcı olmadığını şaşırtan ne değildir bir PC (Krom, FF) veya Android Krom üzerinde donmuş olsun - tetik arka planda çalışan ve görünürlük kontrolü tek güvenilir bilgi oldu.

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

Tarih çözümü diğerlerinden çok daha iyi, bu Tweeter örneği olduğu gibi zamanı 50'de arttırmak zorunda kaldım:

//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'deki tek sorun, uygulamanın cihazda yüklü olmamasıdır ve bu nedenle Safari, yeni url açıldığında autodismiss'e ilişkin bir uyarı gösterir, zaten şimdilik iyi bir çözümdür!


1
@AkshatAgarwal çünkü bu 7 gün sonra gönderilen alastair ile aynı çözüm
albanx

-5

Tüm bunları okumadım, ancak bir iframe kullanmak ve kaynağı "my app: // whatever" olarak eklemek olabilir.

Sonra sayfanın ayarlanan aralıkta düzenli olarak kontrol edin 404 veya değil.

Ajax çağrısını da kullanabilirsiniz. 404 yanıtı varsa, uygulama yüklü değildir.


Bu uyandırma çözümü değil.
Andrey
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.