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


142

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?


1
Ini terus berubah di setiap versi iOS - iOS9 baru saja merusak segalanya. Saya akan merekomendasikan menggunakan layanan seperti branch.io untuk mengurus ini untuk Anda. Saya membantu membangun bagian-bagian dari layanan tautan Cabang, dan saat ini menangani lebih dari 6000 kasus tepi redirection berbeda ... gila.
Alex Austin

1
Pada 2017, jika kebutuhan Anda adalah menautkan ke aplikasi Anda dari email, Anda sebaiknya melihat jawaban saya: stackoverflow.com/questions/13044805/…
Sebastien Lorber

Jawaban:


198

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:


20
Saat ini di iOS 6.1.2 ini tampaknya hanya berfungsi dalam mode webapp. Jika menggunakan aplikasi langsung dari browser, itu membuka aplikasi eksternal seperti yang diharapkan, tetapi batas waktu juga dipecat dan browser diarahkan.
Mika Tuupola

4
Jika aplikasi tidak diinstal, aplikasi ini akan mengirimkan peringatan 'halaman tidak ditemukan' yang jelek. Pokoknya kita bisa menekan itu
Akshat Agarwal

3
@AkshatAgarwal, bisa tolong jelaskan bagaimana kode untuk menekan 'halaman tidak ditemukan waspada'
Harpreet

2
Ada beberapa cara baru untuk mengimplementasikan ini sekarang di Android dan iOS. Lihatlah Tautan Aplikasi Android dan Tautan Universal iOS
maledr53

1
Ini membuka aplikasi tetapi juga mengarahkan browser ke appstore / playstore. Adakah metode / retasan untuk mencegah ini?
Sujeet Kumar

157

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.


2
Solusi ini jauh lebih baik daripada yang lain, saya harus menambah waktu pada 50
Magico

1
Komentar saya tentang kegagalan pada iOS 7 itu salah: Saya hanya perlu meningkatkan 100 ms menjadi beberapa detik (tidak perlu terlalu pendek kok).
devios1

Alih-alih itunes.apple.com/appdir , simpan langkah (tidak menunggu pengalihan http) dan tautkan langsung ke skema URL app store. Misalnya: itms: //itunes.apple.com/id/app/yelp/id284910350
Justin

Luar biasa itu berfungsi dengan baik untuk aplikasi ios, kode yang sama dialihkan ke pada kedua url pada saat yang sama di aplikasi Android. sudahkah Anda lakukan untuk android untuk membuka aplikasi & play store?
Mehul Dudhat

6
Ini secara konsisten membuka aplikasi saya dan toko aplikasi, bahkan di 50. iOS 12
Josh Wolff

27

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.


2
Tapi itu tidak menunjukkan spanduk aplikasi jika pengguna belum menginstalnya
TomSawyer

Tautan Universal atau spanduk pintar tidak berfungsi untuk saya. Saya perlu memiliki beberapa tautan aplikasi asli ke berbagai aplikasi. Masing-masing dengan Cek JIKA Terpasang, luncurkan, atau buka toko. Saya juga tidak memiliki kendali atas domain untuk mengunggah file kepemilikan ke untuk tautan universal. Jadi kedua opsi tersebut ditolak untuk saya. Butuh solusi javascript murni.
FranticRock

16

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)

9

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


Saya menambahkan ini, tetapi pengalihan ke Appstore bahkan setelah saya menginstal aplikasi.
Qasim

9

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

2

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>

Saya membutuhkan jenis kode ini untuk kebutuhan saya tetapi tidak dapat menempatkan tautan saya. Persyaratan: Jika app1 diinstal pergi ke Tautan 1, kalau tidak goto Link2. Dapatkah seseorang tolong bantu?
SFDC_Learner

Harus menghapus cookie ketika aplikasi diinstal, jika pengguna 1 memilih web.
Charlie Reitzel

1

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


-2

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!


1
@AkshatAgarwal karena ini adalah solusi yang sama dengan alastair one yang diposting 7 hari kemudian
albanx

-5

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.


Ini bukan solusi yang membangunkan.
Andrey M.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.