URL Scheme到底應該怎麼跳轉

什麼是 URL Scheme#

在現代 URL 協議中，除了在瀏覽器裡常見的http協議，還有一類 URL 叫URL Scheme，形如這樣的一些連結：

alipayqr://platformapi/startapp?saId=10000007 打開支付寶掃一掃
weixin://scanqrcode 打開微信掃一掃

常見的 URL Scheme 你可以在網上搜到，這裡我找到一份常見 iOS App URL Scheme

它們的 “協議頭” 是由 App 自己定義的。這些 URL 在得到正確的處理後就會攜帶 URL 內容打開並傳遞給對應的 App，常見的打開方法有：瀏覽器以及手機上自帶的掃一掃功能。

URL Scheme是URL嗎？當然是，它也有和 http url 差不多的特性，比如支持GET參數。通過這種方式，能夠實現將參數攜帶給目標 App 去處理。

在瀏覽器中訪問 URL Scheme 就可以打開

在瀏覽器中訪問 URL Scheme 就可以打開

那有什麼用？#

利用它，可以實現在不同 App 之間跳轉。雖然現在網頁技術很成熟了，但是Native應用不能直接搬到瀏覽器裡運行，有些必須使用到的 API 實在是沒有提供支持（例如網頁上讀取 NFC 信息），再或者運營多一個平台成本太高，劃不來。

所以很多別人分享給你的 App 連結，打開後第一件事情就是讓你：在 “App” 中打開此頁？ 如果你不這麼做，你可能得到一個壓根不能用的網頁版本：

今天這個 App 你必須給我打開！！

由於國家出手整治，現在強制使用 App 的情況少了很多。搞個障眼法限制一下功能而已，一張圖有三個地方在暗示你打開 App。

整治前呢？流氓到你搜索圖片，強制讓你用 App 才能看結果..（不點名了，用過的都有數）

這麼壞？那有這個東西幹什麼？那肯定是有需求才被製造出來的。比如在網頁裡買東西付款的時候，快捷登陸網頁的時候；網頁並沒有辦法取得你手機裡 App 存儲的信息，而你也不希望在網頁上又重複輸入一遍那總是忘記的密碼，甚至盤問你所有的安全信息吧？

所以這個東西只能是有利有弊，在國家出手後，我認為這個利會慢慢持平的。

交互中怎麼跳轉比較好？#

那如果這個URL Scheme我需要用，怎麼才能讓我在網頁裡實現不了的功能引導用戶打開 App 去使用呢？

URL Scheme 跳轉的幾種方式#

前面介紹過了，URL Scheme其實本質上還是URL，那麼正常打開連結的方法都能用：

a 標籤
使用 js 創建 iframe

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);

使用 js 跳轉

window.location.href = url;

不過前面也提到了，URL Scheme是需要 App 主動註冊的，App 都沒裝怎麼辦？那打開就會像這樣：

怎麼判斷是否成功跳轉#

題外話，還有一種Universal Link，能夠讓系統和瀏覽器主動幫你完成判斷對應 App 是否打開的事情。不過，僅限在Apple 設備上

由於訪問 url 是單向的，並不會給予程序任何反饋，所以我們只能從一些其他現象來判斷是否成功打開：

來源各種場景喚起 App 騷操作

常用的是定時器法，原理就是跳轉 App 後，瀏覽器中的 JS 線程有可能會被暫停，這個時候 “時間就不走了”，而沒有安裝 App 則有可能留在原來的網頁不動，從而判斷並沒有成功打開 URL Scheme，進而進行後續的邏輯。

不過代碼看起來實在是複雜，兼容性做的很足，能不能簡化一下？


var work = false;
window.location.href = "URL Scheme"
window.onblur=function(){work = true;}
window.setTimeout(function(){
  if(!work){
    打開失敗的邏輯，比如：
    window.location.href = "下一步的連結"
  }
},1000)

這個是我試著寫出來的，不過正如上面的文章所說，需要考慮不同機型的喚起速度，我這裡固定1 秒，體驗上來說不會很久頁面才會有進一步的動作。

不過你可能也發現了，同樣是判斷頁面有沒有失去焦點，但是如果 URL Scheme 是無效的，在 Safari 瀏覽器中也會彈個窗，那這樣子處理反而會導致沒有安裝 App 的用戶也不能得到正確的反饋。

當然這個事情因不同平台而已，就我實際測試，相當一部分的 App 內置瀏覽器 / 安卓自帶瀏覽器，在遇到不認識的 URL Scheme 時是不會有任何反饋的。

那麼本著寧可錯殺一千不放過一個，在實際業務裡應該這麼用：

window.location.href = "URL Scheme"
window.setTimeout(function(){
  打開失敗的邏輯，比如：
  window.location.href = "下一步的連結"
},1000)

還需要等待，是為了讓能夠跳轉的用戶視覺上看起來沒那麼割裂（彈窗的底下還有東西在加載）

支持 Universal Link 大力發展！

拒絕流氓行為強制跳轉 App 使用基本功能！