瀏覽器中喚起native app || 跳轉到應用商城下載（二） 之universal links

上一篇文章

在ios9出來之後，咱們發現愈來愈多的應用可以直接繞過微信的屏蔽，從其內置瀏覽器中直接喚起app。相比於經過彈窗提示讓用戶到瀏覽器中操做的方式，這無疑是極大的提升了用戶體驗與流量導入。所以，在ios上實現直接從微信中喚起app變得很是必要。

而其中的關鍵，就在於通用連接universal links：一種可以方便經過傳統HTTP連接來啓動app的方式，能夠經過相同的網址打開網站和app。

對於ios開發者來講，能夠很輕鬆在網上找到很是多給本身的app配置universal links的教程文章，這裏推薦 www.cocoachina.com/ios/2015090…

這篇文章的主要目的，就是從前端角度來聊一聊universal links的運用。

不管是Android仍是ios應用，都可以經過必定的方式捕獲瀏覽器正在進行的url跳轉。咱們知道在頁面中一般有以下三種方式可以訪問別的連接

• 經過html中的a標籤

  <a href="universal links">action</a>複製代碼

• 經過js的location方法

  window.location = 'universal links';複製代碼

• 經過iframe標籤，通常狀況下咱們會經過js建立一個iframe標籤，並經過設置iframe的src屬性實現跳轉

  var iframe = document.createElement('iframe');
  iframe.style.cssText = 'width: 0; height: 0';
  document.body.appendChild(iframe);
  iframe.src = 'universal links';複製代碼

爲了可以在js中控制跳轉行爲，咱們基本不會經過a標籤的方式，而選擇2，3種。不過比較頭疼的是，並非全部手機版本的瀏覽器都可以毫無顧忌的使用這兩種方式，好比在ios8中，聽說他們ios開發經過一般使用的方式，沒法捕獲window.location的跳轉，所以咱們得采用iframe的方式來實現喚起。而在Android上瀏覽器的表現就更加雜亂不一，所以若是想要兼顧全部的瀏覽器，從測試角度來講，這是一個比較大的工做量。

而universal links若是可以實現從微信中直接喚起app，那麼微信之外的瀏覽器的複雜場景咱們都不須要考慮了。所以這簡直就是一件利國利民的好事，從開發到測試的工做量都大大下降。

讀過上一篇文章的同窗應該知道，單單從瀏覽器層面，咱們沒法精準的判斷本地是否安裝了app。這給咱們實現這一需求形成了很是多的困擾。而從ios9.2開始，針對universal links，有一個很是重要的改動，通俗來講，就是必須經過訪問不一樣的url連接，咱們才能在微信中喚起本地app。

在上面咱們介紹過，universal links可以使用和訪問普通網頁同樣的http連接，喚起咱們本身的app。好比咱們訪問一個頁面http://www.test.com/gold可以在瀏覽器中打開一個頁面，而當咱們在手機瀏覽器中，經過上面的三種方式嘗試訪問一樣的地址http://www.test.com/gold，只要本地安裝了指定的app，就能夠打開app中的對應頁面。可是9.2的改動以後就不行了，在9.2以後，咱們必須使用2個不一樣的域名，而且這2個域名指向同一個頁面，咱們纔可以在微信中喚起app。

若是咱們僅僅只是配置了一個域名，那麼當咱們在微信中打開這個網頁，而且在頁面中訪問自身時，頁面僅僅至關於一次刷新，而app並不會被喚起。而點擊在瀏覽器中打開時，會喚起app。

對於不瞭解的人來講，這是一個深坑，而當咱們瞭解了其中的細節，那麼咱們就可以利用這一點，完美的實現有則喚起，無則下載的需求。

假如咱們有一個app，demoAPP。咱們的ios同事已經配置好了universal links，2個域名分別爲a.com, b.com。另外咱們有一個宣傳頁面，在瀏覽器中，a.com/activity與b.com/activity都可以訪問該宣傳頁面。

爲了規範統一，咱們規定將該宣傳頁面從demoAPP分享出來時，頁面地址使用a.com/activity，而在當咱們想要喚起demoAPP時，使用b.com/activity.

另外，在實踐中我發現以下特性，若是本地安裝了demoAPP，那麼a.com/activity中喚起app以後，不會發生任何變化。而若是本地沒有安裝demoAPP，頁面會跳轉到b.com/activity，當到了這個頁面，咱們已經知道沒法喚起，所以直接下載便可。

所以根據這個特性，咱們有了以下的實踐方案

var openURL = {
    open: 'b.com/activity',
    down: 'downloadurl'
},
// 打開app的按鈕
btn = document.querySelector('.open-app'),
curURL = window.location.href;
if (/b.com/ig.test(curURL)) {
    window.location = openURL.down;
    return;
}

btn.onclick(function() {
    window.location = 'b.com/activity';
})複製代碼

是否是很簡單！

固然在具體實現上，還有許多繁瑣的細枝末節須要咱們一步一步去完善。這裏只是提供了一個思路。從總體來講，這個需求並非一個簡單的任務，咱們須要後端同窗配置2套域名，須要ios同事配合，甚至還須要和產品不停的溝通，由於有一些確實沒法實現的東西須要他們理解。

第三方

老實說，若是本身勞心勞力想要比較完善的實現這麼個需求，真的吃力不討好，須要配合的部門太多，耗時太多，最後的效果還並非很好，不少用戶還對這種彈窗下載提示真的深惡痛絕。所以，經過第三方的解決方案無疑是最好的辦法。

這裏推薦2個第三方方案，具體的優點，實現與配置方式在他們網站中都有詳細的講解，若是真的有接到這個需求的同窗，強烈建議參考。固然，若是有數據隱私這方面的考慮的話，就仍是本身老老實實的作兼容吧，反正方案就是這2篇文章說的這些。

磨窗 www.magicwindow.cn/

deepshare deepshare.io/redirect-on…

我知道有的同窗會想吐槽，說了這麼多，原來仍是第三方纔是最佳方案，幹嗎不直接說得了！那麼我只能說，這麼想的同窗，確定不知道經驗這個東西，在撕b上到底有多重要！！

最後！公衆號求一波關注！！！！搜索isreact能夠找到我