H5喚起APP的解決方案:手機瀏覽器跳轉app內指定頁面(URL Scheme使用)


一、URL Scheme介紹

1、什么是 URL Scheme?URL Scheme的作用

  對於Android,Scheme是一種頁面內跳轉協議,是一種非常好的實現機制,通過定義自己的scheme協議,可以非常方便跳轉app中的各個頁面;通過scheme協議,服務器可以定制化告訴App跳轉那個頁面,可以通過通知欄消息定制化跳轉頁面,可以通過H5頁面跳轉頁面等。

  對於iOS,我們都知道蘋果手機中的APP都有一個沙盒,APP就是一個信息孤島,相互是不可以進行通信的,但是蘋果還是給出了一個可以在app之間跳轉的方法:URL Scheme。iOS的APP可以注冊自己的URL Scheme,URL Scheme是為方便app之間互相調用而設計的,我們可以通過系統的OpenURL來打開該app,並可以傳遞一些參數。

  URL Scheme必須能唯一標識一個APP,如果你設置的URL Scheme與別的APP的URL Scheme沖突時,你的APP不一定會被啟動起來。因為當你的APP在安裝的時候,系統里面已經注冊了你的URL Scheme。一般情況下,是會調用先安裝的app,但是iOS的系統app的URL Scheme肯定是最高的,所以我們定義URL Scheme的時候,盡量避開系統app已經定義過的URL Scheme。

  簡單的說,URL Scheme就是一個可以讓app相互之間可以跳轉的協議。每個app的URL Scheme都是不一樣的,如果存在一樣的URL Scheme,那么系統就會響應先安裝那個app的URL Scheme,因為后安裝的app的URL Scheme被覆蓋掉了,是不能被調用的。

2、URL Scheme應用場景:

  客戶端應用可以向操作系統注冊一個 URL scheme,該 scheme 用於從瀏覽器或其他應用中啟動本應用。通過指定的 URL 字段,可以讓應用在被調起后直接打開某些特定頁面,比如商品詳情頁、活動詳情頁等等。也可以執行某些指定動作,如完成支付等。也可以在應用內通過 html 頁來直接調用顯示 app 內的某個頁面。綜上URL Scheme使用場景大致分以下幾種:

(1)服務器下發跳轉路徑,客戶端根據服務器下發跳轉路徑跳轉相應的頁面

(2)H5頁面點擊錨點,根據錨點具體跳轉路徑APP端跳轉具體的頁面

(3)APP端收到服務器端下發的PUSH通知欄消息,根據消息的點擊跳轉路徑跳轉相關頁面

(4)APP根據URL跳轉到另外一個APP指定頁面

3、URL Scheme協議格式:

  客戶端自定義的 URL 作為從一個應用調用另一個的基礎,遵循 RFC 1808 (Relative Uniform Resource Locators) 標准。這跟我們常見的網頁內容 URL 格式一樣。

  一個普通的 URL 分為幾個部分:scheme、host、relativePath、query。

  比如:http://www.baidu.com/s?rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709,這個URL中,scheme 為 http,host 為www.baidu.com,relativePath 為 /s,query 為 rsv_bp=1&rsv_spt=1&wd=NSurl&inputT=2709。

  一個應用中使用的 URL 例子(該 URL 會調起車輛詳情頁):uumobile://mobile/carDetail?car_id=123456,其中 scheme 為 uumobile,host 為mobile,relativePath 為 /carDetail,query 為 car_id=123456。

 行為(應用的某個功能頁面) | scheme://[path][?query]
   |               | 應用標識 功能需要的參數

二、H5喚起APP的解決方案

   了解了scheme我們就知道了如何喚起我們的app,並跳轉到指定頁面,如何注冊scheme請看這篇博客:Android平台、iOS平台設置UrlSchemes,實現被第三方應用調用

  接下來我們需要做的就是在用戶瀏覽網頁時,如何能判斷該用戶是否安裝了該應用。如果安裝了該應用,就直接打開該應用;如果沒有安裝該應用,就下載該應用。

  基本大部分解決方案的原理都是如此:先打開scheme協議來喚起app,如果超時了(比如超時2s)那么就跳轉到app下載頁。

  方案原理大致如此,就是需要做一些優化,比如微信瀏覽器、打開了scheme喚起了app,此時也就是在document隱藏時,需要清除延時跳轉下載頁的定時器以防出現下載等等

  也有方案插件,這里推薦2款:

  第一款:callapp-lib,周下載700多

  第二款:web-launch-app,周下載100多

  直接按文檔引用即可。

  這篇博客詳細介紹了一些方案,並附開源庫callapp-lib,寫的很不錯,可以了解下:H5喚起APP指南(附開源喚端庫)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM