這兩天公司開始發(fā)力做APP的推廣，很多活動(dòng)頁和移動(dòng)端站點(diǎn)需要加上打開APP的功能，如果沒安裝則提示用戶下載。

首先，基于隱私保護(hù)的目的，瀏覽器是不會(huì)提供接口給網(wǎng)頁去獲取系統(tǒng)上安裝了的APP的列表。

然后很多產(chǎn)品經(jīng)理會(huì)在提需求的時(shí)候有一種潔癖，希望網(wǎng)頁上那個(gè)可供用戶點(diǎn)擊的按鈕，在已安裝APP的時(shí)候是打開，在未安裝的時(shí)候是下載。

早先的做法

為了應(yīng)對這樣的需求，前端程序員們想出了一個(gè)很棒的方法，利用瀏覽器進(jìn)駐后臺(tái)之后會(huì)暫停js的執(zhí)行這一特性，順利實(shí)現(xiàn)了對是否安裝了自己公司APP的探測。具體實(shí)現(xiàn)如下：

在用戶點(diǎn)擊或者進(jìn)入頁面時(shí)候，記錄一個(gè)當(dāng)前時(shí)間time1，然后設(shè)置一個(gè)300ms的timeout，在timeout的回調(diào)里面記錄時(shí)間time2，接著就用location.href直接指向?qū)?yīng)APP已經(jīng)配置的url scheme。

如果time1與time2的時(shí)間差超過400ms(考慮到setTimeout本身的誤差)就認(rèn)為安裝了APP，不需要處理，否則則是沒安裝，提示下載或者自動(dòng)下載。

因?yàn)?，如果用戶安裝了對應(yīng)的APP，那么會(huì)自動(dòng)的跳轉(zhuǎn)到APP的界面，瀏覽器這邊的計(jì)時(shí)會(huì)被中斷，等下次用戶偶然再使用瀏覽器的時(shí)候，計(jì)時(shí)繼續(xù)，會(huì)觸發(fā)setTimeout的回調(diào)，不過這個(gè)時(shí)候time1與time2的時(shí)間差就遠(yuǎn)大于300ms了。

如果用戶沒有安裝對應(yīng)APP就不會(huì)發(fā)生跳轉(zhuǎn)，setTimeout也就自然在規(guī)定時(shí)間內(nèi)運(yùn)行回調(diào)了。
這種方法曾經(jīng)是非常有效果的，不過現(xiàn)在會(huì)有些問題了。

首先是安卓下，有些瀏覽器，比如UC會(huì)在網(wǎng)頁試圖打開APP的時(shí)候阻斷這個(gè)行為并彈出一個(gè)select彈窗，讓用戶選擇是否打開，是否始終打開等等。

安卓的UC瀏覽器下，無法直接跳轉(zhuǎn)，需要用戶同意

但是這個(gè)彈窗并沒有像alert那樣阻塞js的執(zhí)行，也就是說setTimeout會(huì)正常進(jìn)行，在用戶猶豫怎么選擇的時(shí)候，300ms就過了，頁面就自動(dòng)跳轉(zhuǎn)了下載頁。

接著是IOS這邊，到IOS10之后，如果已經(jīng)安裝了對應(yīng)的APP，瀏覽器也會(huì)在網(wǎng)頁嘗試打開APP的時(shí)候彈出一個(gè)confirm窗，讓用戶選擇是否打開對應(yīng)的APP。

在IOS下，也無法直接跳轉(zhuǎn)，需要用戶同意

如果沒有安裝對應(yīng)APP，就會(huì)實(shí)現(xiàn)一個(gè)很丑陋的網(wǎng)頁無法打開此鏈家的錯(cuò)誤alert窗。

IOS下沒安裝時(shí)候的不良提示

而且這兩個(gè)窗口也是沒有阻斷js腳本的執(zhí)行的，setTimeout也是同樣正常進(jìn)行中。

嘗試過把300ms的時(shí)間改成3000ms，去預(yù)想用戶可以在3秒內(nèi)在瀏覽器的選擇窗內(nèi)做好選擇?？墒亲屑?xì)一想，這種預(yù)想又是非常不靠譜的，永遠(yuǎn)沒法猜測用戶的未知行為，而且3000ms的響應(yīng)延遲也是非常不好的交互體驗(yàn)。

是時(shí)候去調(diào)整思路了

如果瀏覽器不希望我們知道設(shè)備上是否已經(jīng)安裝了對應(yīng)的APP，那就不嘗試去知曉。

目前我們的做法是：在用戶通過點(diǎn)擊或者別的行為觸發(fā)了打開APP的策略的時(shí)候，首先是嘗試直接訪問url scheme，在這同時(shí)，展現(xiàn)一個(gè)彈窗，里面包含一個(gè)APP的介紹文案，然后底部是兩個(gè)按鈕，下載APP和打開APP。

下面是天貓的做法，很值得借鑒：

一進(jìn)來先嘗試打開應(yīng)用

失敗之后，有打開和下載兩個(gè)按鈕選擇

這樣做的好處是：如果用戶已經(jīng)安裝了APP，那么就直接跳轉(zhuǎn)了，彈窗對用戶不會(huì)有任何的影響；如果沒有安裝，或者用戶安裝了，但是因?yàn)椴幌胩D(zhuǎn)或者誤操作沒有跳轉(zhuǎn)，則用戶在關(guān)閉了瀏覽器的錯(cuò)誤提示之后，看到彈窗，能大概理解之前的瀏覽器的行為是什么意思，同時(shí)可以再次選擇打開或者下載APP。

同時(shí)，如果是進(jìn)入頁面立馬就跳轉(zhuǎn)的行為，最好能有一個(gè)次數(shù)限制，不然一個(gè)高頻訪問的頁面，每進(jìn)入一次都有這樣一個(gè)彈窗，明擺著是想趕用戶走了啊

原文鏈接：http://www.shuizhongyueming.com/2017/03/31/web端打開app功能的實(shí)現(xiàn)/

?