h5叫醒APP小记

2019年8月31日 144次阅读 来源: suan_suan

h5叫醒APP功用

近来碰到一个需求，须要在从APP分享出去的H5页面中，带有一个马上翻开的按钮，假如当地装置了app，那末就直接唤起当地的app，假如没有装置，则跳转到下载。这是一个很正常的推行和导流量的战略。前端小白从来没有做过这个需求，只能最先哼唧哼唧地开启本身的度娘和谷歌之旅。

经由一段时候的探索之旅发明内里的学问很多，要做一个兼容性很好的计划，就须要斟酌各种状况，在差别的状况适配差别的计划，比方说用户是在手机浏览器翻开照样微信中翻开，或许是在pc中翻开，universal腾讯运用宝直接翻开 APP link是不是被封闭等，这就使代码完成变得复杂，且轻易失足，且另有安卓平台机型浩瀚、浏览器浩瀚等致使的兼容题目。由于时候有限，此次主要先引见一个比较广泛的运用URL Scheme举行App跳转的要领。

URL Scheme —— 唤端序言

泉源

平常来说，我们运用的智能装备上有很多我们的个人信息。比方：联系体式格局、银行卡/信用卡信息、付出宝/Paypal/各大商城的账户暗码、照片以至路程与位置信息等。

假如说，你装备上的每一个运用，不管是官方的照样你从任何商城装置的运用都可以随便地猎取这些信息，那末你轻则收到骚扰信息和邮件、重则后果不堪设想。怎样让这些信息不被别的运用随便运用，或许说，怎样让这些信息仅在装备统统者本人知情并许可的状况下被运用，是统统智能装备与操作系统所要在意的中心平安题目。针对这个题目，苹果运用了名为「沙盒」的机制：运用只能接见它声明可以接见的资本。统统提交到 App Store 的运用都必须恪守这个机制。

在平安方面沙盒是个很好的处理办法，然则有些过犹不及。敏感的个人信息我们不愿意泄漏，却不代表统统的信息我们都不想与别的运用同享。因而，我们急须要一个辅助东西来协助我们完成运用通讯， URL Schemes 就是这个东西。

URL Schemes是什么

[scheme]://[host]/[path]?[query]

我们拿 https://www.baidu.com 来举例，scheme 天然就是 https 了，背面拼接的是通报的参数。URL Schemes 没有迥殊严厉的范例，所以背面参数的详细定义是app开发者去自定义。

就像给服务器资本分派一个 URL，以便我们去接见它一样，我们一样也可以给手机APP分派一个特别花样的 URL，用来接见这个APP或许这个APP中的某个功用(来完成通讯)。APP得有一个标识，好让我们可以定位到它，它就是 URL 的 Scheme 部份。

然则，二者另有几个主要的区分：

  • 统统网页都一定有网址，不管是首页照样子页。但未必统统的运用都有本身的 URL Schemes，更不是每一个运用的每一个功用都有响应的 URL Schemes。几乎没有统统功用都有对应 URL 的运用。一个 App 是不是支撑 URL Schemes 要看谁人 App 的作者是不是在本身的作品里增加了 URL Schemes 相干的代码。
  • 一个网址只对应一个网页，但并不是每一个 URL Schemes 都只对应一款运用。这点是由于苹果没有对 URL Schemes 有不许可反复的硬性请求，所以曾涌现过有 App 运用付出宝的 URL Schemes 阻拦付出帐号和暗码的事宜。
  • 平常网页的 URL 比较好展望，而URL Scheme 由于没有统一标准，所以异常难猜，经由过程猜来猎取 运用的 URL Schemes 是不现实的。

前面提高了一下URL Schemes的相干学问，作为个前端开发者，就不去穷究个中的道理，都交给app开发者吧。接下来最先我们的正题。起首固然是要客户端供应App的Url Schemes。

用浏览器去翻开scheme

在浏览器中翻开 scheme 就像翻开一个差别的http地点一样。可以在一个 a 标签中翻开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻开App</title>
</head>
<body>
<a href="luwei://" id="open">翻开运用</a>
</body>
</html>

点击上面的H5页面中的链接将会尝试叫醒对应app，在一些浏览器中，可以会弹出一个提示框，讯问用户是不是许可翻开运用。

假如翻开的 scheme 在当地没有对应的 app，则点击不会回响反映。

固然还可以运用 JavaScript 代码翻开，只须要增加响应的事宜触发和处置惩罚即可。

在JavaScript代码中翻开衔接有以下几种体式格局：

  • 新建一个隐蔽的 iframe ，地点指向须要翻开的url
  • 运用 window.location 或许 window.location.href 革新当前页面
  • 新建一个隐蔽的 a 标签，地点指向翻开的url，并触发翻开链接事宜
  • 动态建立一个script剧本，在这个剧本中新建一个a标签并翻开
// 翻开url的体式格局
var urlOpen = {
  // 在ios支撑不好
    'iframe' : function(url) {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
    },
    'location' : function(url) {
        window.location.href = url;
    },
    'href' : function(url) {
        var a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
    },
    'script' : function(url) {
        var script = document.createElement('script');
        script.setAttribute('type', 'test/javascript');
        script.innerHTML = '(function(){' +
            'var a = document.createElement("a");' +
            'a.style.display = "none";' +
            'a.href = "' + url.replace(/"/g, '\\"') + '";' +
            'document.body.appendChild(a);' +
            'a.click();' +
            '})()';
        document.body.appendChild(script);
    },
    'open' : function(url) {
        window.open(url);
    }
};

以上要领是只是处理了在已装置App装备叫醒App的功用，并不能推断是不是已装置App，没有装置即跳转至下载链接。

浏览器推断是不是装置运用

在浏览器实际上是没有才能推断手机里是不是装置了某个App的，所以只可以采用一种投机倒把的体式格局。

在JavaScript中推断页面是不是进入背景来推断翻开胜利。Html5供应了以下事宜和属性可以应用：

  • pagehide : 页面隐蔽时触发
  • visibilitychange : 页面隐蔽没有在当前显现时触发(切换tab也会触发该事宜)
  • document.hidden ： 当页面隐蔽时，该值为true，显现时为false

上面这些事宜或许属性并不是统统浏览器都支撑。下面是一个给出为id为openBtn 的按钮增加翻开scheme或许下载事宜的例子，但关于Android 4.4版本以下则不支撑

    var downloader, 
    scheme = 'luwei://',  // 须要翻开的app scheme 地点
    iosDownload='http://xxx.com';  // 假如翻开scheme失效的app下载地点
    andDownload = 'http://xxx.com';
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

// 给 id 为 openBtn 的按钮增加点击事宜处置惩罚函数
    document.getElementById('openBtn').onclick = function () {
        window.location.href = scheme;  // 尝试翻开 scheme 
 
        // 设置3秒的定时下载使命，3秒以后下载app
        downloader = setTimeout(function(){
            if(isAndroid) {
                window.location.href = andDownload;
            }
            if(isIOS) {
                window.location.href = iosDownload;
            }
          
        }, 3000);
    };
 
    document.addEventListener('visibilitychange webkitvisibilitychange', function () {
        // 假如页面隐蔽，推想翻开scheme胜利，消灭下载使命
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide', function() {
        clearTimeout(downloader);
    });

没有圆满的计划

  • 微信中没法叫醒App，须要“用浏览器翻开”是由于微信对统统的分享链接接做了scheme屏障，也就是说分享衔接中统统关于scheme的挪用都被微信封掉了。有些app是能在微信翻开是由于微信有一个白名单(有关联就是不错)，关于在白名单中的分享链接是不会屏障掉scheme挪用的。
  • 本文只是小小地抛个砖，引见了一种比较经常使用简朴的要领去叫醒app，该计划兼容性不是迥殊好吧。要做出一个比较圆满的计划还须要细细去研讨，还须要不停地去搬砖~不说了，搬砖去了~
    原文作者：suan_suan
    原文地址: https://segmentfault.com/a/1190000018661914
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞