Làm cách nào để kiểm tra xem ứng dụng có được cài đặt từ trang web trên iPhone không?

Tôi muốn tạo một trang web, một trang sẽ chuyển hướng iPhone đến cửa hàng ứng dụng nếu iPhone chưa cài đặt ứng dụng, nhưng nếu iPhone đã cài đặt ứng dụng, tôi muốn nó mở ứng dụng.

Tôi đã triển khai một url tùy chỉnh trong ứng dụng iPhone vì vậy tôi có một url cho ứng dụng giống như:

myapp://

Và nếu url này không hợp lệ, tôi muốn trang chuyển hướng đến cửa hàng ứng dụng. cái này nó có hoàn toàn có thể xảy ra được không?

Nếu tôi không cài đặt ứng dụng trên điện thoại và viết myapp: // url trong safari, tất cả những gì tôi nhận được là một thông báo lỗi.

Ngay cả khi có một hack xấu xí với javascript tôi thực sự muốn biết?

Theo như tôi biết bạn không thể, từ trình duyệt, hãy kiểm tra xem một ứng dụng đã được cài đặt hay chưa.

Nhưng bạn có thể thử chuyển hướng điện thoại đến ứng dụng và nếu không có gì xảy ra, hãy chuyển hướng điện thoại đến một trang được chỉ định, như sau:

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

Nếu dòng mã thứ hai cho kết quả thì hàng đầu tiên không bao giờ được thực thi.

Hi vọng điêu nay co ich!

Câu hỏi tương tự:

• Trình duyệt iPhone: Kiểm tra xem ứng dụng iPhone có được cài đặt từ trình duyệt không
• Có thể đăng ký Lược đồ URL dựa trên tên miền http + cho các ứng dụng iPhone, như YouTube và Bản đồ không?

Để tiếp tục trả lời được chấp nhận, đôi khi bạn cần thêm mã bổ sung để xử lý những người quay lại trình duyệt sau khi khởi chạy ứng dụng - chức năng setTimeout đó sẽ chạy bất cứ khi nào họ làm. Vì vậy, tôi làm một cái gì đó như thế này:

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

Theo cách đó, nếu đã có sự đóng băng trong thực thi mã (tức là chuyển đổi ứng dụng), nó sẽ không chạy.

iOS Safari có một tính năng cho phép bạn thêm một biểu ngữ "thông minh" vào trang web của bạn sẽ liên kết với ứng dụng của bạn, nếu nó được cài đặt hoặc vào App Store.

Bạn làm điều này bằng cách thêm một metathẻ vào trang. Bạn thậm chí có thể chỉ định một URL ứng dụng chi tiết nếu bạn muốn ứng dụng làm điều gì đó đặc biệt khi tải.

Chi tiết có tại Ứng dụng quảng cáo của Apple với trang Biểu ngữ ứng dụng thông minh .

Cơ chế này có những ưu điểm là dễ dàng và trình bày một biểu ngữ được tiêu chuẩn hóa. Nhược điểm là bạn không có nhiều quyền kiểm soát đối với giao diện hoặc vị trí. Ngoài ra, tất cả các cược sẽ tắt nếu trang được xem trong trình duyệt khác ngoài Safari.

Kể từ năm 2017, dường như không có cách nào đáng tin cậy để phát hiện một ứng dụng được cài đặt và thủ thuật chuyển hướng sẽ không hoạt động ở mọi nơi.

Đối với những người như tôi, những người cần liên kết sâu trực tiếp từ email (khá phổ biến), điều đáng chú ý là:

• Gửi email với appScheme: // sẽ không hoạt động tốt vì các liên kết sẽ được lọc trong Gmail

• Tự động chuyển hướng đến appScheme: // bị Chrome chặn: Tôi nghi ngờ Chrome yêu cầu chuyển hướng phải đồng bộ với tương tác của người dùng (như nhấp chuột)

• Bây giờ bạn có thể liên kết sâu mà không cần appScheme: // và nó tốt hơn nhưng nó đòi hỏi một nền tảng hiện đại và thiết lập bổ sung. Android iOS

Điều đáng chú ý là những người khác đã nghĩ về điều này sâu sắc. Nếu bạn nhìn vào cách Slack thực hiện tính năng "liên kết ma thuật" của mình, bạn có thể nhận thấy rằng:

• Nó sẽ gửi một email với một liên kết http thông thường (ok với Gmail)
• Trang web có một nút lớn liên kết đến appScheme: // (ok với Chrome)

Bạn có thể kiểm tra plugin này cố gắng giải quyết vấn đề. Nó dựa trên cách tiếp cận tương tự như được mô tả bởi missemisa và Alastair, v.v., nhưng sử dụng một iframe ẩn thay thế.

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

@Alistair chỉ ra trong câu trả lời này rằng đôi khi người dùng sẽ quay lại trình duyệt sau khi mở ứng dụng. Một người bình luận cho câu trả lời đó chỉ ra rằng thời gian giá trị được sử dụng phải được thay đổi tùy thuộc vào phiên bản iOS. Khi nhóm của chúng tôi phải giải quyết vấn đề này, chúng tôi thấy rằng các giá trị thời gian cho thời gian chờ ban đầu và cho biết liệu chúng tôi có quay lại trình duyệt hay không và thường không hoạt động cho tất cả người dùng và thiết bị.

Thay vì sử dụng ngưỡng chênh lệch thời gian tùy ý để xác định xem chúng tôi có quay lại trình duyệt hay không, việc phát hiện các sự kiện "pagecoat" và "pagehow" là điều hợp lý.

Tôi đã phát triển trang web sau đây để giúp chẩn đoán những gì đang xảy ra. Nó bổ sung chẩn đoán HTML khi các sự kiện diễn ra, chủ yếu là do sử dụng các kỹ thuật như ghi nhật ký bảng điều khiển, cảnh báo hoặc Trình kiểm tra web, jsfiddle.net, v.v ... đều có nhược điểm trong quy trình làm việc này. Thay vì sử dụng ngưỡng thời gian, Javascript sẽ đếm số lượng sự kiện "trang da" và "trang cách" để xem liệu chúng có xảy ra hay không. Và tôi thấy rằng chiến lược mạnh mẽ nhất là sử dụng thời gian chờ ban đầu là 1000 (thay vì 25, 50 hoặc 100 được báo cáo / đề xuất bởi người khác).

Điều này có thể được phục vụ trên một máy chủ cục bộ, ví dụ python -m SimpleHTTPServervà được xem trên iOS Safari.

Để chơi với nó, nhấn liên kết "Mở ứng dụng đã cài đặt" hoặc "Ứng dụng chưa cài đặt". Các liên kết này sẽ khiến ứng dụng Bản đồ hoặc App Store mở tương ứng. Sau đó, bạn có thể quay lại Safari để xem trình tự và thời gian của các sự kiện.

(Lưu ý: điều này sẽ chỉ hoạt động với Safari. Đối với các trình duyệt khác (như Chrome), bạn phải cài đặt trình xử lý cho các sự kiện tương đương với trang / hiển thị).

Cập nhật: Như @Mikko đã chỉ ra trong các bình luận, các sự kiện pagehow / page leather chúng tôi đang sử dụng dường như không còn được hỗ trợ trong 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>

Tôi cần phải làm một cái gì đó như thế này, cuối cùng tôi đã đi với giải pháp sau đây.

Tôi có một URL trang web cụ thể sẽ mở một trang có hai nút

1) Nút Một đi đến trang web

2) Nút Hai đi đến ứng dụng (điện thoại / máy tính bảng iphone / android) bạn có thể quay lại vị trí mặc định từ đây nếu ứng dụng chưa được cài đặt (như url khác hoặc cửa hàng ứng dụng)

3) cookie để ghi nhớ sự lựa chọn của người dùng

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

Sau khi tổng hợp một vài câu trả lời, tôi đã đưa ra đoạn mã sau. Điều làm tôi ngạc nhiên là bộ hẹn giờ không bị đóng băng trên PC (Chrome, FF) hoặc Android Chrome - trình kích hoạt hoạt động ở chế độ nền và kiểm tra mức độ hiển thị là thông tin đáng tin cậy duy nhất.

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://');

Fiddle

Giải pháp ngày tốt hơn nhiều so với các giải pháp khác, tôi đã phải tăng thời gian trên 50 như thế này là một ví dụ về 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;

Vấn đề duy nhất trên Mobile IOS Safari là khi bạn chưa cài đặt ứng dụng trên thiết bị và vì vậy Safari hiển thị cảnh báo tự động phát hiện khi url mới được mở, dù sao bây giờ cũng là một giải pháp tốt!

Không đọc tất cả những thứ này nhưng có thể sử dụng iframe và thêm nguồn vào "ứng dụng của tôi: // sao cũng được".

Sau đó kiểm tra thường xuyên trên khoảng thời gian thiết lập của trang là 404 hay không.

Bạn cũng có thể sử dụng cuộc gọi Ajax. Nếu phản hồi 404 thì ứng dụng không được cài đặt.