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