HTML5页面调起APP

HTML5 call native app

背景

为了提升app的曝光和app的用户新增,添加H5分享页的应用场景是必不可少的,但是各种平台环境不一,要如何兼容和策略处理。下面会一一说明

1. 页面调起原生app

  • 调起原生 app,然后下载APP
  • 不同平台的兼容和策略处理,比如微信,微博,QQ,QQ空间,浏览器

2. HTML5页面调起原生APP

android、ios调起的方式

Schame + Android Itent
Schema + Universal links(IOS9+)

3.调用的方式

    • 拉起手雷
    • <iframe src=”ftnn:login”></iframe>
    • window.location.href= “ftnn:login”;
    • 说明:由于无法确定是否安装了客户端,因此通过window.location = schema的方式可能导致浏览器跳转到错误页;所以通过iframe.src或a.href载入schema是目前比较常见的方法;
    • 代码实现
    export const locationCallAPP = (url, downloadUrl, ios9Type) => {
     location.href = url
     var timeout
     var t = Date.now()
     var interval = ios9Type ? 2500 : 1000
     timeout && clearTimeout(timeout)
     timeout = setTimeout(function() {
       if (Date.now() - t < interval + 1000) {
         location.href = downloadUrl
       }
     }, interval)
    }
    1. const iframeCallAPP = (url, downloadUrl, ios9Type) => {
      console.log(‘[iframeCallAPP1]’+url)
      var timeout
      var t = Date.now()
      var interval = ios9Type ? 2500 : 2000
      timeout && clearTimeout(timeout)
      timeout = setTimeout(function () {
      if (Date.now() – t < interval+1000) {

        console.log('[iframeCallAPP2]'+downloadUrl)
       location.href = downloadUrl

      }
      }, interval)
      if (ios9Type) {
      location.href = url
      }
      var docNode = document
      var iframe = docNode.createElement(‘iframe’)
      iframe.setAttribute(‘src’, url)
      // iframe.setAttribute(‘target’, ‘_self’);
      iframe.setAttribute(‘style’, ‘display:none’)
      docNode.body.appendChild(iframe)
      setTimeout(function () {
      docNode.body.removeChild(iframe)
      }, 200)
      }

    4. 特殊场景说明

    微信
    • 应用宝deeplink
    微博
    • 中间提示页

      • 类似于“请在浏览器打开”

    5. 遇到的问题:不知道手机有没有安装app

    尝试调起APP,如果不能,使用setTimeout进行下载,所以需要进行处理,如下图:
    $(document).on('visibilitychange webkitvisibilitychange', function() {
                var tag = document.hidden || document.webkitHidden;
                if (tag) {
                    clearTimeout(timer);
                }
            })
    
        $(window).on('pagehide', function() {
            clearTimeout(timer);
        })
        

    当手机安装了App,能调起app后就不进行下载
    没有安装App,过了一段时间,进行下载

    6.H5 page call native app

    H5 page call native app

        原文作者:Cristic
        原文地址: https://segmentfault.com/a/1190000009496897
        本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
    点赞