Mobile Safari調用本地App, 否則進入App Store下載

需求：

如何讓用戶通過手機瀏覽器(Mobile Safari),訪問一個URL就能直接打開ios上的App應用，如果該應用沒有安裝，那么直接跳轉到App Store的App下載頁面。

准備工作

1. ios SDK的OpenURL函數和URL Scheme
2. JavaScript的window.location和setTimeout函數

代碼實現

下面以打開暖島app為例子，JS實現部分如下

window.location = 'nuandao://web2app';
setTimeout(function() {
    window.location = 'itms-apps://itunes.apple.com/cn/app/nuan-dao/id583307376?mt=8'
}, 30);

看到的效果：

1. 如果你已經安裝了暖島APP，那么會直接打開該App
2. 如果你還沒安裝，那么會直接跳轉到APP Store的下載頁面

思路：

1. window.location的連接執行打開應用
2. 延遲打開App Store下載應用頁面

具體來說，當你打開鏈接時，Mobile Safari通過window.location指向URL Scheme，直接打開本地APP。否則30ms后打開下載頁面。如果應用成功打開，生命周期就是激活狀態，那么瀏覽器的狀態進入后台，頁面里的所有操作都被注銷了，顯然timeout會被clear掉，如果你沒有成功打開應用即返回404，那么30ms后面頁面當然會自動跳轉了。注意的是打開app stroe的鏈接是itms-apps://而不是http://,否則可能會出現不友好的交互。

接下來, 結合移動設備判斷，實現需求。

if(/(iphone|ipad|ipod)/i.test(navigator.userAgent)) {
    $('#header').addClass('ios');                   // 調整結構
    $('#J_itunes-cover').show();                    // 顯示下載條

    $('#J_itunes').click(function() {
        window.location = 'nuandao://web2app';
        setTimeout(function() {
            window.location = 'itms-apps://itunes.apple.com/cn/app/nuan-dao/id583307376?mt=8'
        }, 30);
    });
}

本文轉載: http://jsdashi.com/development/511.html