Web調起App研究報告

Android

經研究目前主要有如下兩種方式能夠經過Web打開App。

一、       自定義Scheme

二、       Chrome Intent

下面逐一介紹：

自定義Scheme

在Android瀏覽器中（非微信瀏覽器），能夠經過scheme協議的方式喚醒本地app客戶端；scheme協議在app註冊以後，與前端進行統一約定，經過H5頁面訪問某個具體的協議地址，便可打開對應的app客戶端頁面。

訪問協議地址，目前主要有3中方式，以demo爲例：

1.   經過a標籤打開，點擊標籤是啓動

<a href="m://zyl.com ">打開app </a><br/>

2.   經過iframe打開，設置iframe.src即會啓動

<iframe src=" m://zyl.com "></iframe>

3.   直接經過window.location進行跳轉

window.location.href=" m://zyl.com "

 

注意：

因爲微信的白名單限制，沒法經過scheme來喚醒本地app，只有白名單內的app才能經過微信瀏覽器喚醒，這個問題目前沒有找到合適的解決方案。

 

舉例說明

一、       在AndroidManifest的清單文件裏的intent-filter中加入以下元素：

<intent-filter>
  <action android:name="android.intent.action.VIEW"/>
  <category android:name="android.intent.category.DEFAULT"/>
  <category android:name="android.intent.category.BROWSABLE"/>
  <data
      android:host="zyl.com"
      android:scheme="m"/>
</intent-filter>

示例截圖以下：

二、       經過html頁面打開Android本地App

 <a href="m://zyl.com">打開app by Scheme</a><br/>

示例截圖以下：

三、       如何獲取scheme方式的網頁傳參

Web端：

<a href="m://zyl.com?arg0=Jason&arg1=Zhao">打開app by Scheme</a><br/>

示例截圖以下：

Android端：

（1）、經過瀏覽器打開這個網頁，獲取數據的方式以下：

         Uri uri = getIntent().getData();

         String test1= uri.getQueryParameter("arg0");

         String test2= uri.getQueryParameter("arg1");

（2）、經過webview打開這個網頁，獲取數據的方式以下：

webView.setWebViewClient(new WebViewClient(){

  @Override

  public boolean shouldOverrideUrlLoading(WebView view, String url) {

      Uri uri=Uri.parse(url);

          if(uri.getScheme().equals("m")&&uri.getHost().equals("zyl.com")){

              String arg0=uri.getQueryParameter("arg0");

              String arg1=uri.getQueryParameter("arg1");

          }else{

              view.loadUrl(url);

          }

      return true;

  }

});

 

Chrome Intent

Chrome Intent簡介

自定義的scheme能夠搞定不少瀏覽器，可是Chrome除外。緣由是爲了更有序的打通瀏覽器頁面和本地應用，Chrome 25後再也不支持自定義的scheme，好比經過設置window.location.href=" m://zyl.com "將沒法喚醒本地客戶端。

而推出了Chrome Intent，做爲標準協議進行推廣，其格式以下：

intent:
   HOST/URI-path // Optional host 
   #Intent; 
      package=[string]; 
      action=[string]; 
      category=[string]; 
      component=[string]; 
      scheme=[string]; 

               S.browser_fallback_ur=[encoded_full_url];
            end; 

 

<a href="intent://zyl.com #Intent;scheme=m;package=com.zyl.demo.htmlcallapp1;S.browser_fallback_url=https%3A%2F%2Fwww.baidu.com;end">打開app by Intent</a><br/>

       S.browser_fallback_url這個參數很重要，在應用調起失敗時，要跳轉到的頁面。

Chrome Intent如何傳參：

<a href="intent://zyl.com?arg0=Jason&arg1=Zhao#Intent;scheme=m;package=com.zyl.demo.htmlcallapp1;S.browser_fallback_url=https%3A%2F%2Fwww.baidu.com;end">打開app by Intent</a><br/>

示例截圖以下： 

如何獲取scheme方式的網頁傳參

（1）、經過瀏覽器打開這個網頁，獲取數據的方式以下：

          Uri uri = getIntent().getData();

         String test1= uri.getQueryParameter("arg0");

         String test2= uri.getQueryParameter("arg1");

 

（2）、經過webview打開這個網頁，獲取數據的方式以下：

webView.setWebViewClient(new WebViewClient(){

  @Override

  public boolean shouldOverrideUrlLoading(WebView view, String url) {

      Uri uri=Uri.parse(url);

          if(uri.getScheme().equals("m")&&uri.getHost().equals("zyl.com")){

              String arg0=uri.getQueryParameter("arg0");

              String arg1=uri.getQueryParameter("arg1");

          }else{

              view.loadUrl(url);

          }

      return true;

  }

});

iOS

經研究目前主要有如下兩種方式能夠經過Web打開App。

一、       自定義Scheme

二、       Universal links

自定義Scheme方式與Android相似，此處不作過多的表述。參考文章中有具體的scheme和Universal links的配置方式。主要簡述Universal links。

 

Universal links爲iOS9上一個所謂通用連接的深層連接特性，一種可以方便的經過傳統HTTP連接來啓動app，使用相同的網址打開網站和app；經過惟一的網址，就能夠連接一個特定的視圖到你的app裏面，不須要特別的scheme。在iOS中，對比scheme的方式Universal links有如下優勢：

一、       經過scheme啓動app時，瀏覽器會彈出確認框提示用戶是否打開，而Universal links不會提示，體驗更好；

二、       Universal links可在微信瀏覽器中打開外部app

 

 

參考文章：

H5CallUpNative       【重要】

經過瀏覽器直接打開Android應用程序

#黑科技# 跳出瀏覽器

如何經過Html網頁調用本地安卓app？

Android手機上實現WebApp直接調起NativeApp

Android 使用Scheme實現從網頁啓動APP
android 從微信分享的網頁中啓動APP

怎麼在網頁中打開你的app

經過瀏覽器直接打開Android應用程序

 網頁調用 iOS/Android 客戶端

iOS中的URL Scheme【重要】

iOS Universal Links(通用連接)的使用【重要】