瀏覽器中喚起native app || 跳轉到應用商城下載

時間  2019-11-05
標籤 瀏覽器 喚起 native app 轉到 應用 商城 下載 欄目 瀏覽器 简体版
原文   原文鏈接

前段時間遇到一個小需求：要求在分享出來的h5頁面中，有一個當即打開的按鈕，若是本地安裝了咱們的app，那麼點擊就直接喚起本地app，若是沒有安裝，則跳轉到下載。javascript

由於歷來沒有作過這個需求，所以這注定是一個苦逼的調研過程。php

咱們最開始就面臨2個問題：一是如何喚起本地app，二是如何判斷瀏覽器是否安裝了對應app。css

如何喚起本地app

首先，想要實現這個需求，確定是必需要客戶端同窗的配合才行，所以咱們不用知道全部的實現細節，咱們從前端角度思考看這個問題，須要知道的一點是，ios與Android都支持一種叫作schema協議的連接。好比網易新聞客戶端的協議爲html

newsapp://xxxxx

固然，這個協議不須要咱們前端去實現，咱們只須要將協議放在a標籤的href屬性裏，或者使用location.href與iframe來實現激活這個連接。而location.href與iframe是解決這個需求的關鍵。前端

在ios中，還支持經過smart app banner來喚起app，即經過一個meta標籤，在標籤裏帶上app的信息，和打開後的行爲，代碼形如java

<meta name="apple-itunes-app" content="app-id=1023600494, app-argument=tigerbrokersusstock://com.tigerbrokers.usstock/post?postId=7125" />

咱們還須要知道的一點是，微信裏屏蔽了schema協議。除非你是微信的合做夥伴之類的，他們專門給你配置進白名單。不然咱們就沒辦法經過這個協議在微信中直接喚起app。android

所以咱們會判斷頁面場景是否在微信中，若是在微信中，則會提示用戶在瀏覽器中打開。ios

如何判斷本地是否安裝了app

很無奈的是，在瀏覽器中沒法明確的判斷本地是否安裝了app。所以咱們必須採起一些取巧的思路來解決這個問題。web

咱們可以很容易想到，採用設置一個延遲定時器setTimeout的方式，第一時間嘗試喚起app，若是200ms沒有喚起成功，則默認本地沒有安裝app，200ms之後，將會觸發下載行爲。json

結合這個思路，咱們來全局考慮一下這個需求應該採用什麼樣的方案來實現它。

使用location.href的同窗可能會面臨一個擔心，在有的瀏覽器中，當咱們嘗試激活schema link的時候，若本地沒有安裝app，則會跳轉到一個瀏覽器默認的錯誤頁面去了。所以大多數人採用的解決方案都是使用iframe

測試了不少瀏覽器，沒有發現過這種狀況

後來觀察了網易新聞，今日頭條，YY等的實現方案，發現你們都採用的是iframe來實現。好吧，面對這種狀況，只能屈服。

整理一下目前的思路，獲得下面的解決方案

var url = {
  open: 'app://xxxxx',
  down: 'xxxxxxxx'
};
var iframe = document.createElement('iframe');
var body = document.body;
iframe.style.cssText='display:none;width=0;height=0';
var timer = null;

// 當即打開的按鈕
var openapp = document.getElementById('openapp');
openapp.addEventListener('click', function() {
  if(/MicroMessenger/gi.test(navigator.userAgent) {
    // 引導用戶在瀏覽器中打開
  }) else{
    body.appendChild(iframe);
    iframe.src = url.open;
    timer = setTimeout(function() {
      wondow.location.href = url.down;
    }, 500);
  }
}, false)

想法很美好，現實很殘酷。一測試，就發現簡單的這樣實現有許多的問題。

第一個問題在於，當頁面成功喚起app以後，咱們再切換回來瀏覽器，發現跳轉到了下載頁面。

爲了解決這個問題，發現各個公司都進行了不一樣方式的嘗試。

也是歷經的不少折磨，發現了幾個比較有用的事件。

pageshow： 頁面顯示時觸發，在load事件以後觸發。須要將該事件綁定到window上纔會觸發

pagehide: 頁面隱藏時觸發

visibilitychange： 頁面隱藏沒有在當前顯示時觸發，好比切換tab，也會觸發該事件

document.hidden 當頁面隱藏時，該值爲true，顯示時爲false

因爲各個瀏覽器的支持狀況不一樣，咱們須要將這些事件都給綁定上，即便這樣，也不必定可以保證全部的瀏覽器都可以解決掉這個小問題，實在沒辦法的事情就無論了。

所以須要擴充一下上面的方案，當本地app被喚起，則頁面會隱藏掉，就會觸發pagehide與visibilitychange事件

$(document).on('visibilitychange webkitvisibilitychange', function() {
    var tag = document.hidden || document.webkitHidden;
    if (tag) {
        clearTimeout(timer);
    }
})

$(window).on('pagehide', function() {
    clearTimeout(timer);
})

而另一個問題就是IOS9+下面的問題了。ios9的Safari，根本不支持經過iframe跳轉到其餘頁面去。也就是說，在safari下，個人總體方案被全盤否決！

因而我就只能嘗試使用location.href的方式，這個方式可以喚起app，可是有一個坑爹的問題，使用schema協議喚起app會有彈窗而不會直接跳轉去app！甚至當本地沒有app時，會被判斷爲連接無效，而後還有一個彈窗。

這個彈窗會形成什麼問題呢？若是用戶不點確認按鈕，根據上面的邏輯，這個時候就會發現頁面會自動跳轉到下載去了。並且無效的彈窗提示在用戶體驗上是不容許出現的。

好吧，繼續扒別人的代碼，看看別人是如何實現的。而後我又去觀摩了其餘公司的實現結果，發現網易新聞，今日頭條均可以在ios直接從微信中喚起app。真是神奇了，但是今日頭條在Android版微信上也沒辦法直接喚起的，他們在Android上都是直接到騰訊應用寶的下載裏去。因此按道理來講這不是添加了白名單。

爲了找到這個問題的解決方案，我在網易新聞的頁面中扒出了他們的代碼，並整理以下，添加了部分註釋

window.NRUM = window.NRUM || {};
window.NRUM.config = {
    key:'27e86c0843344caca7ba9ea652d7948d',
    clientStart: +new Date()
};
(function() {
    var n = document.getElementsByTagName('script')[0],
        s = document.createElement('script');

    s.type = 'text/javascript';
    s.async = true;
    s.src = '//nos.netease.com/apmsdk/napm-web-min-1.1.3.js';
    n.parentNode.insertBefore(s, n);
})();


;
(function(window,doc){

    // http://apm.netease.com/manual?api=web
    NRUM.mark && NRUM.mark('pageload', true)

    var list = []
    var config = null

    // jsonp
    function jsonp(a, b, c) {
        var d;
        d = document.createElement('script');
        d.src = a;
        c && (d.charset = c);
        d.onload = function() {
            this.onload = this.onerror = null;
            this.parentNode.removeChild(this);
            b && b(!0);
        };
        d.onerror = function() {
            this.onload = this.onerror = null;
            this.parentNode.removeChild(this);
            b && b(!1);
        };
        document.head.appendChild(d);
    };


    function localParam(search,hash){
        search = search || window.location.search;
        hash = hash || window.location.hash;
        var fn = function(str,reg){
            if(str){
                var data = {};
                str.replace(reg,function( $0, $1, $2, $3 ){
                    data[ $1 ] = $3;
                });
                return data;
            }
        }
        return {search: fn(search,new RegExp( "([^?=&]+)(=([^&]*))?", "g" ))||{},hash: fn(hash,new RegExp( "([^#=&]+)(=([^&]*))?", "g" ))||{}};
    }

    jsonp('http://active.163.com/service/form/v1/5847/view/1047.jsonp')

    window.search = localParam().search
    window._callback = function(data) {
        window._callback = null
        list = data.list
        if(search.s && !!search.s.match(/^wap/i)) {
            config = list.filter(function(item){
                return item.type === 'wap'
            })[0]
            return
        }
        config = list.filter(function(item){
            return item.type === search.s
        })[0]
    }

    var isAndroid = !!navigator.userAgent.match(/android/ig),
        isIos = !!navigator.userAgent.match(/iphone|ipod/ig),
        isIpad = !!navigator.userAgent.match(/ipad/ig),
        isIos9 = !!navigator.userAgent.match(/OS 9/ig),
        isYx = !!navigator.userAgent.match(/MailMaster_Android/i),
        isNewsapp = !!navigator.userAgent.match(/newsapp/i),
        isWeixin = (/MicroMessenger/ig).test(navigator.userAgent),
        isYixin = (/yixin/ig).test(navigator.userAgent),
        isQQ = (/qq/ig).test(navigator.userAgent),
        params = localParam().search,
        url = 'newsapp://',
        iframe = document.getElementById('iframe');

    var isIDevicePhone = (/iphone|ipod/gi).test(navigator.platform);
    var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.platform);
    var isIDevice = isIDevicePhone || isIDeviceIpad;
    var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
    var isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
    var android_url = (!isandroid2_x) ? "http://3g.163.com/links/4304" : "http://3g.163.com/links/6264";
    var ios_url = "http://3g.163.com/links/3615";
    var wphone_url = "http://3g.163.com/links/3614";
    var channel = params.s || 'newsapp'

    // 判斷在不一樣環境下app的url
    if(params.docid){
        if(params['boardid'] && params['title']){
            url = url + 'comment/' + params.boardid + '/' + params.docid + '/' + params.title
        }else{
            url = url + 'doc/' + params.docid
        }
    }else if(params.sid){
        url = url + 'topic/' + params.sid
    }else if(params.pid){
        var pid = params.pid.split('_')
        url = url + 'photo/' + pid[0] + '/' + pid[1]
    }else if(params.vid){
        url = url + 'video/' + params.vid
    }else if(params.liveRoomid){
        url = url + 'live/' + params.liveRoomid
    }else if(params.url){
        url = url + 'web/' + decodeURIComponent(params.url)
    }else if(params.expertid){
        url = url + 'expert/' + params.expertid
    }else if(params.subjectid){
        url = url + 'subject/' + params.subjectid
    }else if(params.readerid){
        url = url + 'reader/' + params.readerid
    }else{
        url += 'startup'
    }
    if(url.indexOf('?') >= 0){
        url += '&s=' + (params.s || 'sps')
    }else{
        url += '?s=' + (params.s || 'sps')
    }

    // ios && 易信  用iframe 打開
    if((isIos||isIpad) && navigator.userAgent.match(/yixin/i)) {
        document.getElementById('iframe').src = url;
    }

    var height = document.documentElement.clientHeight;

    // 一般狀況下先嚐試使用iframe打開
    document.getElementById('iframe').src = url;

    // 移動端瀏覽器中，將下載頁面顯示出來
    if(!isWeixin && !isQQ && !isYixin && !isYx){
        document.querySelector('.main-body').style.display = 'block'
        if(isIos9){
            document.querySelector('.main-body').classList.add('showtip')
        }

        setTimeout(function(){
            document.body.scrollTop = 0
        },200)
    }else{
        document.getElementById('guide').style.display = 'block'
    }

    // Forward To Redirect Url
    // Add by zhanzhixiang 12/28/2015
    if (params.redirect) {
        var redirectUrl = decodeURIComponent(params.redirect);
        if ( typeof(URL) === 'function' && new URL(redirectUrl).hostname.search("163.com") !== -1) {
            window.location.href = redirectUrl;
        } else if (redirectUrl.search("163.com") !== -1){
            window.location.href = redirectUrl;
        };
    }

    // Forward To Redirect Url End
    if ((isWeixin || isQQ) && isAndroid) {
        window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.netease.newsreader.activity&ckey=CK1331205846719&android_schema=' +　url.match(/(.*)\?/)[1]
    }

    if(isIos||isIpad){
        document.getElementById("guide").classList.add('iosguideopen')
    }else if (isAndroid){
        document.getElementById("guide").classList.add('androidguideopen')
    }else{
        // window.location.href = 'http://www.163.com/newsapp'
    }

    document.getElementById('link').addEventListener('click', function(){

        // 統計
        neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )

        if (config) {
            android_url = config.android
        }
        if (config && config.iOS) {
            ios_url = config.iOS
        }
        if(isWeixin || isQQ){
            return
        }
        var msg = isIDeviceIpad ? "檢測到您正在使用iPad, 是否直接前往AppStore下載?" : "檢測到您正在使用iPhone, 是否直接前往AppStore下載?";
        if (isIDevice){
            window.location = ios_url;
            return;
        }else if(isAndroid){
            // uc瀏覽器用iframe喚醒
            if(navigator.userAgent.match(/ucbrowser|yixin|MailMaster/i)){
                document.getElementById('iframe').src = url;
            } else {
                window.location.href = url;
            }
            setTimeout(function(){
                if(document.webkitHidden) {
                    return
                }
                if (confirm("檢測到您正在使用Android 手機，是否直接下載程序安裝包？")) {
                    neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_pass&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
                    window.location.href = android_url;
                } else {
                    neteaseTracker && neteaseTracker(false,'http://sps.163.com/func/?func=downloadapp_cancel&modelid='+modelid+'&spst='+spst+'&spsf&spss=' + channel,'', 'sps' )
                }
            },200)
            return;
        }else if(isIEMobile){
            window.location = wphone_url;
            return;
        }else{
            window.open('http://www.163.com/special/00774IQ6/newsapp_download.html');
            return;
        }
    }, false)

    setTimeout(function(){
        if(isIDevice && params.notdownload != 1 && !isNewsapp && !isIos9){
            document.getElementById('link').click()
        }
    }, 1000)

})(window,document);

雖然有一些外部的引用，和一些搞不懂是幹什麼用的方法和變量，可是基本邏輯仍是可以看明白。好像也沒有什麼特別的地方。研究了許久，看到了一個jsonp請求很奇特。這是來幹嗎用的？

因而費盡千辛萬苦，搜索了不少文章，最終鎖定了一個關鍵的名詞 Universal links。

若是我早知道這個名詞，那麼問題就不會變的那麼一籌莫展。因此這個東西是什麼呢？

Apple爲iOS 9發佈了一個所謂的通用連接的深層連接特性，即Universal links。雖然它並不完美，可是這一發布，讓數以千計的應用開發人員忽然意識到本身的應用體驗被打破。

Universal links，一種可以方便的經過傳統的HTTP/HTTPS 連接來啓動App，使用相同的網址打開網站和App。

關於這個問題的提問與universal links的介紹 點擊這裏查看

ios9推行的一個新的協議！

關於本文的這個問題，國內的論壇有許許多多的文章來解決，可是提到universal links的文章少之又少，而我想吐槽的是，咱們的ios開發也尼瑪不知道這個名詞，搞什麼鬼。他改變了用戶體驗的關鍵在於，微信沒有屏蔽這個協議。所以若是咱們的app註冊了這個協議，那麼咱們就可以從微信中直接喚起app。

這個時候我就發現，上面貼的網易新聞代碼中的jsonp請求的內容，就是這個協議必須的一個叫作apple-app-site-association的JSON文件

{
   "applinks": {
       "apps": [ ],
       "details": {
           "TEAM-IDENTIFIER.YOUR.BUNDLE.IDENTIFIER": {
               "paths": [
                   "*"
               ]
           }
       }
   }
}

你們能夠直接訪問這個連接，查看裏面的內容

http://active.163.com/service...

至於universal links具體如何實現，讓ios的同窗去搞定吧，這裏提供兩個參考文章

http://www.cocoachina.com/bbs...

https://blog.branch.io/how-to...

支持了這個協議以後，咱們又能夠經過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並非全部的瀏覽器都支持等。不少其餘博客裏面，什麼計算時間差等方案，我花了好久的時間去研究這個方案，結果是，根！本！沒！有！用！

老實說，從微信中跳轉到外部瀏覽器，並非一個好的解決方案，這樣會致使不少用戶流失，所以你們都在ios上實現了universal links。

網易新聞的邏輯是，點擊打開會跳轉到一個下載頁面，這個下載頁面一加載完成就嘗試打開app，若是打開了就直接跑到app裏面去了，若是沒有就在頁面上有一個當即下載的按鈕，按鈕行只有下載處理。

這個問題就總結到這裏，若是你們有更好的方案，歡迎與我溝通。

不用折騰universal link了，微信已經禁用 ~ 2018-01-08

clipboard.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程