sponsored links

Web调起App研究报告

Android

经研究目前主要有以下两种方式可以通过Web打开App。

1、 自定义Scheme

2、 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才能通过微信浏览器唤醒,这个问题目前没有找到合适的解决方案。

举例说明

1、 在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>

示例截图如下:

Web调起App研究报告

2、 通过html页面打开Android本地App

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

示例截图如下:

Web调起App研究报告

3、 如何获取scheme方式的网页传参

Web端:

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

示例截图如下:

Web调起App研究报告

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/>

示例截图如下:

Web调起App研究报告


如何获取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。

1、 自定义Scheme

2、 Universal links

自定义Scheme方式与Android类似,此处不做过多的表述。参考文章中有具体的scheme和Universal links的配置方式。主要简述Universal links。

Universal links为iOS9上一个所谓通用链接的深层链接特性,一种能够方便的通过传统HTTP链接来启动app,使用相同的网址打开网站和app;通过唯一的网址,就可以链接一个特定的视图到你的app里面,不需要特别的scheme。在iOS中,对比scheme的方式Universal links有以下优点:

1、 通过scheme启动app时,浏览器会弹出确认框提示用户是否打开,而Universal links不会提示,体验更好;

2、 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(通用链接)的使用【重要】

Tags: