文档章节

更新:通过浏览器直接打开Android应用程序

Cundong
 Cundong
发布于 2014/12/09 09:55
字数 598
阅读 51421
收藏 323

之前写过一篇blog,介绍如何通过点击手机浏览器中的链接,直接打开本地Android App。

实现方式不太完美,最近看了微博、京东的手机版网页,感觉他们的实现方式很不错,研究了一下,实现以下效果:

如果本地已经安装了指定Android应用,就直接打开它;如果没有安装,则直接下载该应用的安装文件(也可以跳转到下载页面)。

实现效果

如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载。

实现方式

1.为Android应用的启动Activity设置一个Schema,如下:

<data android:host="splash" android:scheme="cundong"/>

2.用户点击浏览器中的链接时,在动态创建一个不可见的iframe,并且让这个iframe去加载步骤1中的Schema,如下:

var ifr = document.createElement('iframe');
ifr.src="cundong://splash"

3,如果在指定的时间内没有跳转成功,则当前页跳转到apk的下载地址(或下载页),如下:

window.location = download_url;

HTML代码

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

        <title>this's a demo</title>
        <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    </head>
    <body>
        <div>
            <a id="J-call-app" href="javascript:;" class="label">立即打开&gt;&gt;</a>
            <input id="J-download-app" type="hidden" name="storeurl" value="http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk">
        </div>

        <script>
            (function(){
                var ua = navigator.userAgent.toLowerCase();
                var t;
                var config = {
                    /*scheme:必须*/
                    scheme_IOS: 'cundong://',
                    scheme_Adr: 'cundong://splash',
                    download_url: document.getElementById('J-download-app').value,
                    timeout: 600
                };

                function openclient() {
                    var startTime = Date.now();

                    var ifr = document.createElement('iframe');


                    ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
                    ifr.style.display = 'none';
                    document.body.appendChild(ifr);

                    var t = setTimeout(function() {
                        var endTime = Date.now();

                        if (!startTime || endTime - startTime < config.timeout + 200) { 
                            window.location = config.download_url;
                        } else {
                            
                        }
                    }, config.timeout);

                    window.onblur = function() {
                        clearTimeout(t);
                    }
                }
                window.addEventListener("DOMContentLoaded", function(){
                    document.getElementById("J-call-app").addEventListener('click',openclient,false);

                }, false);
            })()
        </script>
    </body>
</html>

AndroidMainfext.xml

<activity
     android:name=".activity.LauncherActivity"
     android:configChanges="orientation|keyboardHidden|navigation|screenSize"
     android:label="@string/app_name"
     android:screenOrientation="portrait" >
        <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
        </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="splash" android:scheme="cundong" />
       </intent-filter>
</activity>


by @Cundong

© 著作权归作者所有

Cundong
粉丝 185
博文 28
码字总数 30973
作品 0
海淀
私信 提问
加载中

评论(64)

beijing201
beijing201
ios的打不开,求教
Tanweijie
Tanweijie
踩坑了,不行的话配置文件里面的

<data android:host="splash" android:scheme="cundong" />

把 “android:host” 去掉,改成 <data android:scheme="cundong" /> 就可以了
月夜410
不行啊,每次都是下载
三心不会二意
楼主,ios调用app这个配置应该怎么弄
HostSugar
HostSugar
endTime - startTime < config.timeout + 200,逻辑反了吧
kevend
kevend

引用来自“kevend”的评论

有好多浏览器唤醒app之后,界面被显示到浏览器中了,怎么解决啊

引用来自“Cundong”的评论

这个没办法,该方案不能100%解决,不信你试试m.jd.cn 也会出现同样问题
支付宝和淘宝可以,可以兼容多数浏览器
Cundong
Cundong 博主

引用来自“kevend”的评论

有好多浏览器唤醒app之后,界面被显示到浏览器中了,怎么解决啊
这个没办法,该方案不能100%解决,不信你试试m.jd.cn 也会出现同样问题
kevend
kevend
有好多浏览器唤醒app之后,界面被显示到浏览器中了,怎么解决啊
s
suiyuan-sh
大神,有没有完整的demo可以提供一下?
kevend
kevend
并不是所有的浏览器都可以打开
【译】使用 Google TWA 技术将 PWA 打包成 Android App

原文地址:developers.google.com/web/updates… 原文标题:Using Trusted Web Activities 译者:谢盼 校对者:张卓 Trusted Web Activities 是集成 Web 应用的新方法,你可以通过基于 Cust...

阅文前端团队
06/03
0
0
Android上面通过URL来启动本地应用

场景:通过浏览器打开URL或者扫描软件扫描URL来启动本地应用 Activity配置: [html] view plaincopy <application android:allowBackup="true" android:icon="@drawable/ic_launcher" andro......

simpower
2014/10/04
187
0
Android开发——通过扫描二维码,打开或者下载Android应用

0、呵呵 在实现这个功能的时候,被不同的浏览器折磨的胃疼,最后实现了勉强能用,也查考了一下其他人的博客 android实现通过浏览器点击链接打开本地应用(APP)并拿到浏览器传递的数据 andr...

Jseven1989
2014/02/07
6.6K
2
Android N 即将“上市”,有哪些改进之处

据国外媒体今日美国报道,据官方消息称,Android牛轧糖,也称Android 7.0将于今年夏天晚些时候正式发布。 Android系统目前占有全球84%的市场份额。新系统将会拥有更长的待机时间,多窗口的用...

oschina
2016/07/18
5.4K
32
如何在Android系统中打开Chrome最新的黑暗模式

据外媒报道,作为应用程序最新更新的一部分,黑暗模式(Dark mode)已经悄然在Android版的Chrome浏览器上推出。这意味着用户可以更加舒服地盯着手机看尤其是在晚上,而不必再启用夜间阅读模式或...

稿源:
04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

正则表达式匹配

请实现一个函数用来匹配包括 '.' 和 '*' 的正则表达式。模式中的字符 '.' 表示任意一个字符,而 '*' 表示它前面的字符可以出现任意次(包含 0 次)。 在本题中,匹配是指字符串的所有字符匹配...

Garphy
42分钟前
5
0
Laravel 5.1的多路由文件的配置

默认的路由配置文件只有一个, \app\Http\routes.php。 在同一个文件中写路由容易起冲突,文件会越来越大,就需要定义多个路由文件。 找到加载\app\Http\routes.php的文件, 打开\app\Provid...

mdoo
今天
5
0
Hibernate 5 开始使用指南前言

同时在面向对象软件和关系型数据库进行工作,可能会非常复杂和费时。数据在对象和数据库之间可能会不一致,然后导致开发成本会非常高。 Hibernate 是一个针对 Java 环境的对象关系映射(Obj...

honeymoose
今天
5
0
聊聊nacos ServiceManager的UpdatedServiceProcessor

序 本文主要研究一下nacos ServiceManager的UpdatedServiceProcessor ServiceManager.init nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/ServiceManager.java @Compone......

go4it
今天
7
0
正则表达式的使用(QQ格式的判断与空格的切割)

//正则表达式的使用 public static void main(String[] args) throws IOException, ClassNotFoundException { //test1("123456"); test2("-1 99 kk"); } /** * ......

zhengzhixiang
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部