在網頁中啓動App

背景

最近有一個需求，在手機web網頁上提供一個入口，指引用戶打開 native app，或者下載。
該怎麼作呢？

Url Scheme

• 這種方式下，被啓動的 app 須要註冊 Schema。

<!-- 關鍵所在，匹配相應的 scheme -->
<data android:scheme=」baidu」 android:host=」test」 />

打開的話，就是經過 URL， 它會匹配跳轉到 app 對應的 activity 中
baidu://test/...

• 那麼，URL 該如何拋出呢？
  若是經過 a.href ，若是沒有安裝應用，即打開失敗，就會跳轉到一個錯誤頁面。
  由於沒法獲知調起 app，是否成功，也就沒辦法進行相應回調處理。

目前最理想的方式是經過 iframe.src，上代碼：

var openApp = {
    open: function(appurl, downurl) {
        var t = Date.now();

  var i = document.createElement('iframe');
  i.src = appurl,
  // i.style.cssText
  i.style.position = 'absolute',
  i.style.left = '-2000px',
  i.style.top = '-1000px',
  i.style.width = '1px',
  i.style.height = '1px',
  i.style.webkitTransition = 'all 0.9s',
  i.style.transition = 'all 0.9s',
  document.body.appendChild(i);
  var l = function () {
      document.body.removeChild(i);
if (Date.now() - t < 1500) {
    window.location.href = downurl;
      }
  };
  i.addEventListener('webkitTransitionEnd', l, false);
  i.addEventListener('transitionEnd', l, false);
  setTimeout(function () {
      i.style.left = '-1000px';
  }, 20);
    }
}

原理是：經過 schema 打開 app 以後，手機聚焦就不在 web網頁 上了，進入後臺，這樣時間差就會變大。

可是這個方法，有兩個問題：

• 在 Android Chrome 下沒有效果，可是還好，它給出了本身的解決方案Android Intents with Chrome

• 在 IOS9 及以上，沒法直接調起，始終會到商店中去，不過也好，apple 給出方案Universal Link

Android Intents with Chrome

• 代碼：

intent:
  HOST/URI-path // Optional host
  #Intent;
      package=[string];
      action=[string];
      category=[string];
  end;

具體使用，還得根據自家產品來

Universal Link

• 首先也須要在 app 中進行配置 apple-app-site-association 文件 ：

{
  "applinks": {
    "apps": [],
    "details": [
    {
    "appID": "...",
    "paths": ["/open/*"]
    }
    ]
  }
}

• 將 apple-app-site-association 文件上傳到 web server.
• 在 app 中處理通用連接 applinks:www.test1.com

這樣第一次啓動app的時候，會從 https://test1.com/apple-app-site-association 下載這個文件，交由 IOS 系統管理。這是，web網頁能夠直接發出請求 <a href="https://www.test2.com/open?xxx"> ，系統會作出攔截處理。

參考 IOS9通用連接，這裏講得很詳細了。

PS：
微信中，除了自家產品，其餘估計只有「在瀏覽器打開」 、「應用寶打開」。
UC 中，會攔截scheme，強加上 http(s)://