工具

如何唤醒APP？

2018-04-25  本文已影响0人  宇晓

移动互联网时代，“用户增长”成为每个公司关注的重点话题。为了将更多用户引导到客户端内，产品经理会习惯性地在网页的各个地方巧妙隐藏唤醒App的“机关”。

常见的出现场景

浏览器 —唤醒—> App
  用户在浏览器中浏览网页时，当检测到该网页来自于某个App时，此时可以引导用户呼起或者下载App
微信、QQ —唤醒—> App
  用户将App中自己喜欢的内容分享到微信、QQ，在站外打开网页时，可以正常浏览，也可以引导用户呼起或者下载App

接下来，让我们深入研究下唤醒App的几种解决方案？

唤醒App的几种解决方案

1、 URL Scheme 方式

1） iframe方式

var _iframe = document.createElement('iframe');
_iframe.src = scheme;
_iframe.style.display = 'none';
 document.body.appendChild(_iframe);
 window.setTimeout(function(){
    document.body.removeChild(_iframe);
    if((+new Date()) - openTime > 2500) {
        window.location.href = url;
   }
}, 2000);

2）a链接方式
<a href="<scheme域名>://<path>?<params>=<value>">打开APP</a>
3）location.href 直接跳转
window.location.href = "<scheme域名>://<path>?<params>=<value>"

image.png

iOS9+万恶的跳转失败的弹窗

image.png

Android系统：Chrome for Android无法通过iframe方式来调用scheme，而通过a链接的方式可以成功调用，而针对Chrome内核的浏览器如360浏览器，对于iframe和a链接的方式都能支持，所以对Chrome内核的浏览器采用a链接的方式来调用scheme；对于其他浏览器，如UC，QQ浏览器则采用iframe方式调用scheme。
iOS系统：Safari浏览器不支持 iframe可直接做页面跳转；对于UC、Chrome、QQ只能通过a链接方式调用scheme。
上述提到的屏蔽scheme方式的App：呼端失败跳下载页。

2、 Android Intent 方式

intent:
HOST/URI-path
#Intent; 
  package=[string];                 //  android app包名
  action=[string];      
  category=[string];    
  component=[string];               
  scheme=xxxx;                  // 协议头
  S.browser_fallback_url=[url]          // 可选，scheme启动客户端失败时的跳转页，一般为下载页，需编码
end; 

<!--Intent方式呼端-->
<a href="intent://<role>/<path>#Intent;scheme=<scheme>;package=com.domain;S.browser_fallback_url=[url];end">打开APP</a>

3、Universal Links

// apple-app-site-association文件配置
{
    "applinks": {
        "apps": [],
        "details": {
            "ZVC23L5QY4.com.domain.app": {
                "paths": ["*"]
             }
        }
     }
  }

注意：
大小写敏感；严格匹配配置的path路径；apple-app-site-association文件的读取，只在第一次启动App时加载；iOS9.2开始，在相同的domain下，Universal Link不work，必须跨域；
以上只是重点部分内容，详细说明请参考：
打通 iOS 9 的通用链接（Universal Links)

了解了呼端的几种方式，分享下我们团队完整的呼端解决方案

完整的解决方案

由于我们无法判断用户是否安装App，所以以上所有的方案都只能尝试呼端。整合上述这些方案，具体思路如下：

// iOS9+在开启Universal Link开关的前提下，优先使用Universal Links方式呼端
if (!closeUnilink && isios && iosVer && iosVer >= 9) {
      // 通过Universal Links方式获取通用呼端链接
      const unilink = getUnilink(opts.scheme, opts.unilink);
      if (unilink) {
        window.location.href = unilink;
      }
    } else {
  // 不支持Intent方式，采用 URL Scheme 方式
   if (!canIntent) {
       // iOS9+ Safari 不支持iframe方式
       if (!isWv && (ua.indexOf('safari') > -1 && iosVer && iosVer >= 9)) {
          link(scheme);
        } else {
          iframe(scheme);
        }
        // 处理未安装客户端情况：延迟跳转到下载页
        setTimeout(function () {
              gotoDownload();
            },延长时间);

    } else {
       // Android支持Intent方式时: intent呼起客户端
      intent(scheme);
  }
}

注意：
  前面提到的URL Scheme 方式的iframe和a链接方式，需要考虑用户未安装客户端情况：延迟跳转到下载页。这个延长时间的设置很关键！！！延长时间的设定需要考虑：如果延长时间小于App的启动时间，App还未启动，就执行setTimeout代码；如果延长时间较长，当用户未安装App时，需要等待特别久的时间才能执行setTimeout代码。
  对代码封装，根据不同业务呼端需求，可以提炼几个可配参数：呼端scheme地址、呼端失败是否跳下载页、下载页链接、呼起客户端失败超时时间、呼起回调；这样做的好处是：调用组件时，根据不同需求传递参数即可。

优化

// 页面隐藏时触发
window.onpagehide = function () {
   if (timeout) {
    clearTimeout(timeout);
   }
 };
// 页面的可见状态变化时，会触发
 visibilitychange = function () {
    const tag = document.hidden || document.webkitHidden;
    if (tag && timeout) {
      clearTimeout(timeout);
    }
  }
document.addEventListener('visibilitychange', visibilitychange, false);
// 兼容多的浏览器事件
document.addEventListener('webkitvisibilitychange', visibilitychange, false);

代码中有关事件具体参考：Page Visibility API文档

测试结果

测试机型主要针对iOS和Android默认浏览器、Chrome等一些常用主流浏览器，iOS9+微信内嵌请尝试使用 Universal Link 方式呼起客户端。

demo页面

测试反馈

image.png

以上完整的呼端解决方案我们完美的使用了很久，直到2018年1月7日，微信封掉了内置浏览器里的Universal Link呼端，导致微信内引导呼端的流程彻底中断！！！

考虑到微信是站外分享很重要的渠道，我们当然不能！！！放过！！！

中转页面

image.png

iOS客户端采用Universal link进行系统拦截

image.png

双保险呼端

image.png image.png

至此，站外呼端方案完美落幕~~~

上一篇 下一篇

猜你喜欢

热点阅读