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.調用的方式

• 拉起App
• <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)
  }
  
  export 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