Bagaimana cara memeriksa apakah aplikasi diinstal dari halaman web pada iPhone?

Saya ingin membuat halaman web, halaman yang akan mengarahkan iPhone ke app-store jika iPhone tidak memiliki aplikasi yang diinstal, tetapi jika iPhone memiliki aplikasi yang diinstal, saya ingin membuka aplikasi.

Saya sudah menerapkan url khusus di aplikasi iPhone jadi saya punya url untuk aplikasi yang kira-kira seperti:

myapp://

Dan jika url ini tidak valid, saya ingin halaman tersebut dialihkan ke app store. Apakah ini mungkin?

Jika saya tidak menginstal aplikasi di ponsel dan menulis aplikasi saya: // url di safari, yang saya dapatkan hanyalah pesan kesalahan.

Bahkan jika ada hack jelek dengan javascript saya benar-benar ingin tahu?

Sejauh yang saya tahu Anda tidak bisa, dari browser, periksa apakah aplikasi diinstal atau tidak.

Tetapi Anda dapat mencoba mengalihkan telepon ke aplikasi, dan jika tidak ada yang terjadi mengarahkan telepon ke halaman yang ditentukan, seperti ini:

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

Jika baris kedua kode memberikan hasil maka baris pertama tidak pernah dieksekusi.

Semoga ini membantu!

Pertanyaan serupa:

• Browser iPhone: Memeriksa apakah aplikasi iPhone diinstal dari browser
• Apakah mungkin mendaftarkan Skema URL berbasis domain http + untuk aplikasi iPhone, seperti YouTube dan Maps?

Untuk melanjutkan jawaban yang diterima, kadang-kadang Anda perlu menambahkan kode tambahan untuk menangani orang yang mengembalikan browser setelah meluncurkan aplikasi - fungsi setTimeout akan berjalan kapan pun mereka melakukannya. Jadi, saya melakukan sesuatu seperti ini:

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

Dengan begitu, jika ada pembekuan dalam eksekusi kode (yaitu, pengalihan aplikasi), itu tidak akan berjalan.

iOS Safari memiliki fitur yang memungkinkan Anda untuk menambahkan spanduk "pintar" ke halaman web Anda yang akan ditautkan ke aplikasi Anda, apakah itu dipasang, atau ke App Store.

Anda melakukan ini dengan menambahkan metatag ke halaman. Anda bahkan dapat menentukan URL aplikasi terperinci jika Anda ingin aplikasi melakukan sesuatu yang istimewa saat dimuat.

Detail ada di Aplikasi Mempromosikan Apple dengan halaman Spanduk Aplikasi Cerdas .

Mekanisme ini memiliki kelebihan yaitu mudah dan menghadirkan spanduk standar. Kelemahannya adalah Anda tidak memiliki banyak kendali atas tampilan atau lokasi. Juga, semua taruhan dimatikan jika halaman dilihat di browser selain Safari.

Pada 2017, tampaknya tidak ada cara yang dapat diandalkan untuk mendeteksi aplikasi yang diinstal, dan trik pengalihan tidak akan berfungsi di mana-mana.

Bagi mereka seperti saya yang perlu tautan dalam langsung dari email (sangat umum), perlu diperhatikan hal berikut:

• Mengirim email dengan appScheme: // tidak akan berfungsi dengan baik karena tautannya akan difilter di Gmail

• Mengarahkan secara otomatis ke appScheme: // diblokir oleh Chrome: Saya kira Chrome mengharuskan pengalihan untuk disinkronkan ke interaksi pengguna (seperti klik)

• Sekarang Anda dapat tautan dalam tanpa appScheme: // dan itu lebih baik tetapi membutuhkan platform modern dan pengaturan tambahan. IOS Android

Perlu dicatat bahwa orang lain sudah memikirkan hal ini secara mendalam. Jika Anda melihat bagaimana Slack mengimplementasikan fitur "tautan ajaib" nya, Anda dapat memperhatikan bahwa:

• Ia mengirim email dengan tautan http biasa (ok dengan Gmail)
• Halaman web memiliki tombol besar yang tertaut ke appScheme: // (ok dengan Chrome)

Anda dapat memeriksa plugin ini yang mencoba menyelesaikan masalah. Ini didasarkan pada pendekatan yang sama seperti yang dijelaskan oleh missemisa dan Alastair dll, tetapi menggunakan iframe tersembunyi sebagai gantinya.

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

@Alistair menunjukkan dalam jawaban ini bahwa kadang-kadang pengguna akan kembali ke browser setelah membuka aplikasi. Seorang komentator untuk jawaban itu menunjukkan bahwa nilai waktu yang digunakan harus diubah tergantung pada versi iOS. Ketika tim kami harus berurusan dengan ini, kami menemukan bahwa nilai waktu untuk batas waktu awal dan memberitahu apakah kami telah kembali ke browser harus disetel, dan seringkali tidak berfungsi untuk semua pengguna dan perangkat.

Daripada menggunakan ambang perbedaan waktu yang sewenang-wenang untuk menentukan apakah kami telah kembali ke browser, masuk akal untuk mendeteksi acara "pagehide" dan "pageshow".

Saya mengembangkan halaman web berikut untuk membantu mendiagnosis apa yang sedang terjadi. Ia menambahkan diagnosa HTML saat acara berlangsung, terutama karena menggunakan teknik seperti konsol logging, peringatan, atau Web Inspector, jsfiddle.net dll. Semua memiliki kekurangan dalam alur kerja ini. Daripada menggunakan ambang waktu, Javascript menghitung jumlah peristiwa "pagehide" dan "pageshow" untuk melihat apakah mereka telah terjadi. Dan saya menemukan bahwa strategi yang paling kuat adalah dengan menggunakan batas waktu awal 1000 (daripada 25, 50, atau 100 dilaporkan / disarankan oleh orang lain).

Ini dapat disajikan di server lokal, mis. python -m SimpleHTTPServerDan dilihat di iOS Safari.

Untuk memainkannya, tekan tautan "Buka aplikasi yang diinstal" atau "Aplikasi tidak diinstal". Tautan ini masing-masing harus menyebabkan aplikasi Peta atau App Store terbuka. Anda kemudian dapat kembali ke Safari untuk melihat urutan dan waktu acara.

(Catatan: ini hanya akan berfungsi untuk Safari. Untuk peramban lain (seperti Chrome), Anda harus memasang penangan untuk acara yang setara dengan tampilan halaman / acara).

Pembaruan: Seperti yang ditunjukkan @Mikko dalam komentar, acara pageshow / pagehide yang kami gunakan tampaknya tidak lagi didukung di 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>

Saya perlu melakukan sesuatu seperti ini, saya akhirnya akan dengan solusi berikut.

Saya memiliki URL situs web tertentu yang akan membuka halaman dengan dua tombol

1) Tombol Satu buka situs web

2) Tombol Dua buka aplikasi (iphone / ponsel android / tablet) Anda dapat kembali ke lokasi default dari sini jika aplikasi tidak diinstal (seperti url lain atau toko aplikasi)

3) cookie untuk mengingat pilihan pengguna

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

Setelah mengkompilasi beberapa jawaban, saya membuat kode berikut. Yang mengejutkan saya adalah bahwa timer tidak tidak bisa membeku pada PC (Chrome, FF) atau Android Chrome - pelatuk bekerja di latar belakang, dan cek visibilitas adalah info hanya handal.

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

Solusi tanggal jauh lebih baik daripada yang lain, saya harus menambah waktu pada 50 seperti ini adalah contoh Tweeter:

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

satu-satunya masalah pada Mobile IOS Safari adalah ketika Anda tidak memiliki aplikasi yang diinstal pada perangkat, dan Safari menunjukkan peringatan bahwa autodismiss saat url baru dibuka, toh merupakan solusi yang bagus untuk saat ini!

Tidak membaca semua ini tetapi mungkin menggunakan iframe dan menambahkan sumber ke, "aplikasi saya: // apa pun".

Kemudian periksa secara teratur pada interval waktu halaman yang ditetapkan apakah 404 atau tidak.

Anda juga bisa menggunakan panggilan Ajax. Jika 404 respons maka aplikasi tidak diinstal.