วิธีตรวจสอบว่ามีการติดตั้งแอพจากหน้าเว็บบน iPhone หรือไม่?

ฉันต้องการสร้างเว็บเพจหน้าเว็บที่จะเปลี่ยนเส้นทาง iPhone ไปที่ร้านค้าแอปหาก iPhone ไม่มีแอปพลิเคชันติดตั้ง แต่ถ้า iPhone มีแอปติดตั้งอยู่ฉันต้องการให้เปิดแอปพลิเคชัน

ฉันได้ติดตั้ง url ที่กำหนดเองแล้วในแอปพลิเคชั่น iPhone ดังนั้นฉันจึงมี URL สำหรับแอปพลิเคชันที่มีลักษณะดังนี้:

myapp://

และหาก URL นี้ไม่ถูกต้องฉันต้องการให้หน้าเปลี่ยนเส้นทางไปที่ร้านค้าแอป เป็นไปได้ทั้งหมดหรือไม่

หากฉันไม่ได้ติดตั้งแอปพลิเคชันบนโทรศัพท์และเขียน myapp: // url ใน Safari สิ่งที่ฉันได้รับคือข้อความแสดงข้อผิดพลาด

แม้ว่าจะมีแฮ็กที่น่าเกลียดกับจาวาสคริปต์ที่ฉันอยากจะรู้จริงๆ?

เท่าที่ฉันรู้ว่าคุณไม่สามารถตรวจสอบว่ามีการติดตั้งแอปจากเบราว์เซอร์หรือไม่

แต่คุณสามารถลองเปลี่ยนเส้นทางโทรศัพท์ไปที่แอพและหากไม่มีอะไรเกิดขึ้นเปลี่ยนเส้นทางโทรศัพท์ไปยังหน้าที่ระบุเช่นนี้:

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

หากโค้ดบรรทัดที่สองให้ผลลัพธ์จะไม่มีการเรียกใช้แถวแรก

หวังว่านี่จะช่วยได้!

คำถามที่คล้ายกัน:

• เบราว์เซอร์ iPhone: ตรวจสอบว่ามีการติดตั้งแอป iPhone จากเบราว์เซอร์หรือไม่
• เป็นไปได้หรือไม่ที่จะลงทะเบียน http + โดเมน URL ตามโครงการสำหรับแอพของ iPhone เช่น YouTube และ Maps

เพื่อเพิ่มเติมคำตอบที่ได้รับการยอมรับในบางครั้งคุณจำเป็นต้องเพิ่มรหัสพิเศษเพื่อจัดการกับคนที่กลับมาเบราว์เซอร์หลังจากเปิดตัวแอปที่ฟังก์ชั่น 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

ตั้งแต่ปี 2560 ดูเหมือนว่าไม่มีวิธีที่เชื่อถือได้ในการตรวจสอบว่ามีการติดตั้งแอพและเคล็ดลับการเปลี่ยนเส้นทางจะไม่ทำงานทุกที่

สำหรับคนอย่างฉันที่ต้องการลิงก์โดยตรงจากอีเมลโดยตรง (ค่อนข้างบ่อย) เป็นสิ่งที่ควรค่าแก่การสังเกต:

• การส่งอีเมลด้วย appScheme: // ใช้งานไม่ได้เพราะลิงก์จะถูกกรองใน Gmail

• การเปลี่ยนเส้นทางโดยอัตโนมัติไปยัง appScheme: // ถูกบล็อกโดย Chrome: ฉันสงสัยว่า Chrome ต้องการให้การเปลี่ยนเส้นทางซิงโครนัสกับการโต้ตอบกับผู้ใช้ (เช่นคลิก)

• ตอนนี้คุณสามารถเชื่อมโยงที่ลึกโดยไม่ต้อง appScheme: // และมันจะดีกว่า แต่มันต้องมีแพลตฟอร์มที่ทันสมัยและการตั้งค่าเพิ่มเติม Android iOS

เป็นที่น่าสังเกตว่าคนอื่นคิดเกี่ยวกับเรื่องนี้ในเชิงลึกแล้ว หากคุณดูว่า Slack ใช้คุณสมบัติ "magic link" ของเขาอย่างไรคุณสามารถสังเกตได้ว่า:

• มันจะส่งอีเมลพร้อมลิงก์ http ปกติ (ตกลงกับ Gmail)
• หน้าเว็บมีปุ่มใหญ่ที่เชื่อมโยงไปยัง appScheme: // (ตกลงด้วย Chrome)

คุณสามารถตรวจสอบปลั๊กอินนี้ที่พยายามแก้ไขปัญหา มันขึ้นอยู่กับวิธีการเดียวกันตามที่อธิบายไว้โดย missemisa และ Alastair ฯลฯ แต่ใช้ iframe ที่ซ่อนอยู่แทน

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

@airairair ชี้ให้เห็นในคำตอบนี้ว่าบางครั้งผู้ใช้จะกลับสู่เบราว์เซอร์หลังจากเปิดแอป ผู้แสดงความเห็นต่อคำตอบนั้นระบุว่าต้องใช้ค่าเวลาที่ใช้ในการเปลี่ยนทั้งนี้ขึ้นอยู่กับเวอร์ชั่นของ iOS เมื่อทีมของเราต้องจัดการกับเรื่องนี้เราพบว่าเวลาค่าสำหรับการหมดเวลาเริ่มต้นและบอกว่าเราได้กลับไปที่เบราว์เซอร์จะต้องมีการปรับและมักจะไม่ทำงานสำหรับผู้ใช้และอุปกรณ์ทั้งหมด

แทนที่จะใช้ขีดจำกัดความแตกต่างของเวลาโดยพลการเพื่อตรวจสอบว่าเราได้กลับไปที่เบราว์เซอร์หรือไม่เราควรตรวจจับเหตุการณ์ "pagehide" และ "pageshow"

ฉันพัฒนาเว็บเพจต่อไปนี้เพื่อช่วยวินิจฉัยสิ่งที่เกิดขึ้น มันเพิ่มการวินิจฉัย HTML เป็นเหตุการณ์ที่เกิดขึ้นส่วนใหญ่เป็นเพราะการใช้เทคนิคเช่นการเข้าสู่ระบบคอนโซลการแจ้งเตือนหรือตรวจสอบเว็บ jsfiddle.net ฯลฯ ทั้งหมดมีข้อบกพร่องในกระบวนการทำงานนี้ แทนที่จะใช้การ จำกัด เวลา Javascript จะนับจำนวนเหตุการณ์ "pagehide" และ "pageshow" เพื่อดูว่าเกิดขึ้นหรือไม่ และฉันพบว่ากลยุทธ์ที่แข็งแกร่งที่สุดคือการใช้การหมดเวลาเริ่มต้นที่ 1,000 (แทนที่จะเป็น 25, 50, หรือ 100 รายงาน / แนะนำโดยผู้อื่น)

สามารถให้บริการบนเซิร์ฟเวอร์ภายในเช่นpython -m SimpleHTTPServerและดูบน iOS Safari

หากต้องการเล่นให้กดลิงก์ "เปิดแอปที่ติดตั้ง" หรือ "แอปที่ไม่ได้ติดตั้งแอป" ลิงก์เหล่านี้ควรทำให้แอป Maps หรือ App Store เปิดตามลำดับ จากนั้นคุณสามารถกลับไปที่ Safari เพื่อดูลำดับและเวลาของเหตุการณ์

(หมายเหตุ: สิ่งนี้จะใช้งานได้กับ Safari เท่านั้นสำหรับเบราว์เซอร์อื่น (เช่น Chrome) คุณจะต้องติดตั้งตัวจัดการสำหรับการซ่อน / แสดงเหตุการณ์เทียบเท่า)

อัปเดต:เนื่องจาก @Mikko ได้ชี้ให้เห็นในความคิดเห็นเหตุการณ์ที่แสดงหน้าเว็บ / หน้าเว็บที่เราใช้จะไม่ได้รับการสนับสนุนใน 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 phone / tablet) คุณสามารถย้อนกลับไปยังตำแหน่งเริ่มต้นได้จากที่นี่หากไม่ได้ติดตั้งแอป (เช่น URL อื่นหรือร้านค้าแอป)

3) คุกกี้เพื่อจดจำผู้ใช้ทางเลือก

<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 และเพิ่มแหล่งที่มาลงใน "แอปของฉัน: // อะไรก็ตาม"

จากนั้นตรวจสอบอย่างสม่ำเสมอในช่วงเวลาที่กำหนดของหน้าเว็บคือ 404 หรือไม่

คุณสามารถใช้โทร Ajax หากการตอบกลับ 404 แสดงว่าแอปนั้นไม่ได้รับการติดตั้ง