【前端記-2】都9102年了，你還不知道怎麼喚醒APP嗎

今天的富婆又來營業了，今天給你們分享的是在H5頁面喚醒APP。

背景

通常公司都有本身的app，而app是須要不斷有新用戶涌入才能持續運營，達到不錯的收入。就須要使用這種方式進行引入新的用戶到native app中。

一些內容在網頁端體驗很差，或者一些功能須要app內才能實現，以及能留住用戶，就須要將用戶引入app中。

點擊網頁按鈕打開app並自動跳到相應頁面。

首先，這個方法僅適用於移動端h5頁面，通常的智能機都是可使用的。這裏使用的是es5的代碼模式，容易理解。

此次採用對話的形式闡述這個問題：

二狗：富婆，我最近有個需求，網頁端用戶點擊能夠打開app,若是用戶沒有安裝app,點擊後就會跳轉下載頁，這個有什麼辦法能夠實現啊？

富婆：辦法是有的，不過不是前端檢測有沒有安裝app，會用到瀏覽器的一個特性來處理這個問題，想不想聽啊

二狗：快點說吧，別墨跡了，給你買最愛的山竹吃，

富婆：一言爲定哦，聽我細細道來

咱們來看看如何使用移動端瀏覽器的某個特性：

網頁端經過訪問app協議打開，其實利用的是app的url scheme方式。

若是有安裝app，那麼協議請求便會被app檢測到。app打開期間，app界面會覆蓋h5網頁。因此訪問打開app地址放在下載後面延遲執行，用戶就看不到下載的跳轉了。

若是未安裝app，那協議請求就不會有任何效果。便會繼續執行，直到跳轉頁面下載。

狗子：原來如此，用的是這種方法啊，實際上打開app期間，瀏覽器仍是跳轉去了下載頁，知識用戶看不到而已。

富婆：哈哈，是這樣的

狗子：那具體能夠怎麼實現呢？

富婆：嗯，那咱們具體看下

首先要經過UA判斷當前瀏覽器UA 並轉大寫。用來分別針對安卓和ios機型作2種不同的處理。

根據UA判斷的安卓仍是ios機型，分別作處理。

1.安卓設備：

經過隱藏iframe方式實現。iframe中請求協議啓動地址，建立iframe須要時間，延遲一點時間，將iframe加入dom，產生請求。

若是app已安裝，瀏覽器就會彈出一個提示框，問用戶是否啓動app。

若是未安裝，瀏覽器等待一秒後就會去下載。

之因此使用iframe，爲了防止location跳轉後，js請求中斷，跳入空白頁。

代碼中的Data.now()-t <1200，只因此是1200，其實也是一個估計值，爲了大部分解決一些已經安裝的app，1秒後仍是會跳轉下載。由於打開app的瞬間，瀏覽器界面被app界面覆蓋。但js未中止執行，延遲後仍是會在後臺打開下載頁，只是被遮擋了。

2.IOS設備：

首先，ios瀏覽器已經不支持再使用iframe了，因此上面的方式不適合用在ios上。

所以，這裏只能採用location的方式。

若是安裝了app，ios瀏覽器打開app協議前就會彈出個框，提示是否打開。

若是沒有安裝，就不會彈出這個提示。

富婆：怎麼樣，懂了嗎？

狗子：嗯，明白了，給你買山竹去，不過只能吃一個哦，由於吃掉一個山竹，世界上就會少一個貓爪爪哦。

富婆：。。。。