我只是互吾平臺中的一名小小的H5開發者
前段時間遇到一個小需求：當我和平常一樣，打開了互動有吾公眾號，想要進官網看下我的作品情況，畢竟要是又有人購買我的H5，那就是一筆收入了，更重要的是，自己的勞動成果被人肯定。這時候，發現有個客戶，要求在分享出來的h5頁面中，有一個立即打開的按鈕，如果本地安裝了我們的app，那么點擊就直接喚起本地app，如果沒有安裝，則跳轉到下載。
因為從來沒有做過這個需求，因此這注定是一個苦逼的調研過程。
我最開始就面臨2個問題：一是如何喚起本地app，二是如何判斷瀏覽器是否安裝了對應app。（因為有著不服輸的逞能勁兒，我想一旦探索成果就可以在互吾開發者交流群，好好炫耀一番了。）
如何喚起本地app
首先，想要實現這個需求，肯定是必須要客戶端同學的配合才行，因此我們不用知道所有的實現細節，我們從前端角度思考看這個問題，需要知道的一點是，ios與Android都支持一種叫做schema協議的鏈接。比如網易新聞客戶端的協議為
當然，這個協議不需要我們前端去實現，我們只需要將協議放在a標簽的href屬性里，或者使用location.href與iframe來實現激活這個鏈接。而location.href與iframe是解決這個需求的關鍵。
在ios中，還支持通過smart app banner來喚起app，即通過一個meta標簽，在標簽里帶上app的信息，和打開后的行為，代碼形如
我們還需要知道的一點是，大部分H5的營銷推廣，都和微信有著千絲萬縷的關系，而微信里屏蔽了schema協議。除非你是微信的好基友之類的，他們專門給你配置進白名單。否則我們就沒辦法通過這個協議在微信中直接喚起app。因此我們會判斷頁面場景是否在微信中，如果在微信中，則會提示用戶在瀏覽器中打開。
如何判斷本地是否安裝了app
很無奈的是，在瀏覽器中無法明確的判斷本地是否安裝了app。因此我們必須采取一些取巧的思路來解決這個問題。我們能夠很容易想到，采用設置一個延遲定時器setTimeout的方式，第一時間嘗試喚起app，如果200ms沒有喚起成功，則默認本地沒有安裝app，200ms以后，將會觸發下載行為。結合這個思路，我們來全局考慮一下這個需求應該采用什么樣的方案來實現它。
使用location.href的同學可能會面臨一個擔憂，在有的瀏覽器中，當我們嘗試激活schema link的時候，若本地沒有安裝app，則會跳轉到一個瀏覽器默認的錯誤頁面去了。因此大多數人采用的解決方案都是使用iframe
測試了很多瀏覽器，沒有發現過這種情況
后來觀察了網易新聞，今日頭條，YY等的實現方案，發現大家都采用的是iframe來實現。好吧，面對這種情況，只能屈服。
整理一下目前的思路，得到下面的解決方案
想法很美好，現實很殘酷。一測試，就發現簡單的這樣實現有許多的問題。
第一個問題在于，當頁面成功喚起app之后，我們再切換回來瀏覽器，發現跳轉到了下載頁面。為了解決這個問題，發現各個公司都進行了不同方式的嘗試。也是歷經的很多折磨，發現了幾個比較有用的事件。
pageshow： 頁面顯示時觸發，在load事件之后觸發。需要將該事件綁定到window上才會觸發
pagehide: 頁面隱藏時觸發
visibilitychange： 頁面隱藏沒有在當前顯示時觸發，比如切換tab，也會觸發該事件
document.hidden 當頁面隱藏時，該值為true，顯示時為false
由于各個瀏覽器的支持情況不同，我們需要將這些事件都給綁定上，即使這樣，也不一定能夠保證所有的瀏覽器都能夠解決掉這個小問題，實在沒辦法的事情就不管了。（我就納悶了，互吾平臺的其他開發者，是怎么做到的呢？要不改天問下？）
因此需要擴充一下上面的方案，當本地app被喚起，則頁面會隱藏掉，就會觸發pagehide與visibilitychange事件
而另外一個問題就是IOS9+下面的問題了。ios9的Safari，根本不支持通過iframe跳轉到其他頁面去。也就是說，在safari下，我的整體方案被全盤否決！
于是我就只能嘗試使用location.href的方式，這個方式能夠喚起app，但是有一個坑爹的問題，使用schema協議喚起app會有彈窗而不會直接跳轉去app！甚至當本地沒有app時，會被判斷為鏈接無效，然后還有一個彈窗。
這個彈窗會造成什么問題呢？
如果用戶不點確認按鈕，根據上面的邏輯，這個時候就會發現頁面會自動跳轉到下載去了。而且無效的彈窗提示在用戶體驗上是不允許出現的。
好吧，繼續扒別人的代碼，看看別人是如何實現的。然后我又去觀摩了其他公司的實現結果，發現網易新聞，今日頭條都可以在ios直接從微信中喚起app。真是神奇了，可是今日頭條在Android版微信上也沒辦法直接喚起的，他們在Android上都是直接到騰訊應用寶的下載里去。所以按道理來說這不是添加了白名單。
為了找到這個問題的解決方案，我在網易新聞的頁面中扒出了他們的代碼，并整理如下，添加了部分注釋
雖然有一些外部的引用，和一些搞不懂是干什么用的方法和變量，但是基本邏輯還是能夠看明白。好像也沒有什么特別的地方。研究了許久，看到了一個jsonp請求很奇特。
這是來干嘛用的？
于是費盡千辛萬苦，搜索了很多文章，最終鎖定了一個關鍵的名詞 Universal links。如果我早知道這個名詞，那么問題就不會變的那么束手無策。所以這個東西是什么呢？
記得，互動有吾微信公眾號之前有發過了一篇文章，里面有說到：Apple為iOS 9發布了一個所謂的通用鏈接的深層鏈接特性，即Universal links。雖然它并不完美，但是這一發布，讓數以千計的應用開發人員突然意識到自己的應用體驗被打破。
Universal links，一種能夠方便的通過傳統的HTTP/HTTPS 鏈接來啟動App，使用相同的網址打開網站和App。
關于本文的這個問題，國內的論壇有許許多多的文章來解決，但是提到universal links的文章少之又少，而我想吐槽的是，我們的ios開發也尼瑪不知道這個名詞，搞什么鬼。他改變了用戶體驗的關鍵在于，微信沒有屏蔽這個協議。因此如果我們的app注冊了這個協議，那么我們就能夠從微信中直接喚起app。
這個時候我就發現，上面貼的網易新聞代碼中的jsonp請求的內容，就是這個協議必須的一個叫做apple-app-site-association的JSON文件
支持了這個協議之后，我們又可以通過iframe來喚起app了，因此基本邏輯就是這樣了。
但是！并不是就沒有坑了。
universal links還有一個大坑，就是如果想要通過universal links只在在微信中打開app，同一個頁面我們還得使用不同的兩個域名。這個特性雖然有點坑，但是通過這個特性卻能夠完美判斷本地是否安裝了你們的app。
比如我們正常訪問當前頁面的域名為A，對應的頁面url為A+，而當我們點擊按鈕，需要打開app用到的域名為B，，對應的頁面url為B+。A與B都被注冊成為了對應app的universal links，A+ 與 B+ 都指向同一個頁面。我們通過js判斷，如果是通過B+訪問的該頁面，則直接跳去下載app。這樣，當我們從A+通過點擊訪問B+時，如果universal links生效并且本地安裝了對應的app，app會直接被打開。如果本地沒有安裝App，則會直接執行剛才B+中跳去下載的設定。
OK，這個問題，幾乎所有的坑我都在上面說到了，如果想要做好兼容，就是一個針對每個坑做最優選擇了，這是一個工作量的問題。
不過最終的調研結果是：沒有完美的解決方案
就算是網易新聞，這個按鈕在使用過程中也會有一些小bug，無法做到完美的狀態。因為我們面臨許多沒辦法解決的問題，比如無法真正意義上的判斷本地是否安裝了app，pageshow，pagehide并不是所有的瀏覽器都支持等。很多其他博客里面，什么計算時間差等方案，我花了很久的時間去研究這個方案，結果是：
根！本！沒！有！用！
老實說，從微信中跳轉到外部瀏覽器，并不是一個好的解決方案，這樣會導致很多用戶流失，每天在互吾找H5的商家那么多，相信他們也是不愿意看到這局面的，因此大部分互吾開發者都在ios上實現了universal links。
網易新聞的邏輯是，點擊打開會跳轉到一個下載頁面，這個下載頁面一加載完成就嘗試打開app，如果打開了就直接跑到app里面去了，如果沒有就在頁面上有一個立即下載的按鈕，按鈕行只有下載處理。
這個問題就總結到這里，如果大家有更好的方案，歡迎回復我，與我溝通。
