给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS)
纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移动客户端产品的一个很好地引流的手段。当然各家引流下载的交互和视觉各不相同,有的是完全“强奸”用户,有的是完全取悦用户。但是最终的形式就是你点击一个按钮之后,可以去下载对应的App(Android直接下载对应的Apk文件,IOS会跳转到App store的对应地址)。
之前开发这个需求的时候,就是很简单的针对用户访问的useragent进行判断,如果android设备,给出的是apk文件的下载URL,点击之后直接下载;如果ios设备,给出的是App store的URL。但是如此存在的问题有如下几个:
1、用户本地如果已经安装了推荐的App,点击之后还是进行对应的apk文件下载和App store的跳转。这样对用户来说,会有这样一个声音:这网站有病吧?我已经下载安装了他的App,怎么还给我下载还给我跳转呢?
2、用户本地如果已经安装了推荐的App,但是点击之后下载的apk文件版本和本地版本是冲突的,这样就会有版本冲突问题。当然,IOS不存在这个冲突问题。
于是乎,我们便会想,引流下载本来就是个“强奸”用户的手段,本来就很“流氓”,那我们怎么可以把这种对用户的“强奸”和“流氓”,让用户能接受的心里舒服点呢?我们需要寻求一个临界点,既“强奸”了用户,也要让他觉得还挺爽。
结果是,我们需要这样一种实现方式:出现引流下载的时候,用户点击下载的时候,对用户设备进行一个判断,如果用户本地安装了当前推荐的App,就直接打开App,而不会再去下载。如果本地没有安装,再去进行后续的下载操作。
本着这个目的和这个想法,我们一路看着移动网站的发展,最近发现大众点评有了(?),淘宝有了,那作为始终追求前沿技术动态的我们,怎么可能能放过这么友好的“强奸”方式呢?我也研究了一下淘宝的源代码,但是就像我一直说的,我是个“伪”前端,对js不通不通,所以我几乎看不懂!怎么办呢?求助google去吧,找了两套实现方案,但是直接套用之后都不能完全达到我的效果,那些作者给出了技术要点,但是没有结合地说出前端页面应该怎么做?app端应该怎么做?只有双方都进行相关配置结合之后才能实现这个需求。
经过两个多小时的努力,我玩通了这中间的猫腻,说了好多关于需求的东西,下面就直接上代码吧,希望对大家能有一些帮助。
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>页面打开App</title>
</head>
<body>
<script language="javascript">
function open_or_download_app() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
// 判断useragent,当前设备为ios设备
var loadDateTime = new Date();
// 设置时间阈值,在规定时间里面没有打开对应App的话,直接去App store进行下载。
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
window.location = "https://itunes.apple.com/cn/app/hu-lu/id627370076?mt=8";
} else {
window.close();
}
},
25);
window.location = "XXXX://XXXX"; // Android端URL Schema
} else if (navigator.userAgent.match(/android/i)) {
// 判断useragent,当前设备为ios设备
window.location = "XXX://YYYY:8080/ZZZ/AAAA/BBB.html"; // Android端URL Schema
}
}
</script>
<p style="height:30px;line-height:30px;text-align:center;">WAP页面打开本地应用测试</p>
<a href="javascript:open_or_download_app();" style="margin:100px 100px 100px 100px;"> 打开本地阿里巴巴 </a>
</body>
</html>
移动网站的实现代码就是上面这段,不复杂吧?我感觉很不复杂。但是光有这段代码是不行了,有心人会发现我代码中有XXXX。。。类似的东东,这个是由App端设置的URL Schema。
什么是URL Schema呢?我不告诉你,自己问google和度娘去。
IOS端怎么来配置URL Schema呢?这个我也不会告诉你,因为我没有做过IOS开发,所以具体的配置方法我也不知道,如果有IOS开打的看客的话,欢迎在评论中给出IOS端URL Schema的配置方法。
有人会说,你不也没说客户端怎么玩呢?光有你上面一段代码有屁用啊?等等,我染指过Android应用开发,所以呢,我会给出Android端URL Schema的配置方法,各位仅做参考。
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.LAUNCHER" />
<data android:scheme="XXX" android:host="YYYY" android:port="8080" android:path="ZZZ/AAAA/BBB.html"/>
</intent-filter>
将以上intent定义部分追加到你的Manifest定义文件,但是有两点需要注意的:
1、以上intent的定义千万不要放入到主Activity中,因为主Activity是android.intent.action.MAIN,而这里是VIEW,两者是冲突的,我在这上面纠结了好久。将以上的intent定义放到主Activity以后的任意Activity。
2、scheme的配置,android不像IOS,在ios里面可以随意进行配置,只需要schema(nihao)和host(11111)就ok,这样访问的时候只要:nihao://11111。但是android端最好把URL Schema配置成如果本地没有对应App的下载URL。
好了,说完了,按照上面的设置android肯定木问题的,慢慢玩去吧。不过以上代码只经历过safari浏览器和android自带浏览器的测试,需要进行兼容性测试,但是按照个人感觉,应该不会有大问题。
如果哪位看官发现问题了,请评论中给我留言!
给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS)的更多相关文章
- 推荐下载App,如果本地安装则直接打开本地App(Android/IOS)
推荐下载App,如果本地安装则直接打开本地App(Android/IOS) - 纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移 ...
- 如何一步一步用DDD设计一个电商网站(六)—— 给购物车加点料,集成售价上下文
阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的 ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- 使用Dynamics 365 CE Web API查询数据加点料及选项集字段常用查询
微软动态CRM专家罗勇 ,回复336或者20190516可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me. 紧接上文:配置Postman通过OAuth 2 implicit ...
- phpMyAdmin提示“无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装。”
这是以前学生在使用phpwamp时遇到的一个问题(其他环境或是自己搭建时遇到此问题,解决方式同理) 其实这个问题与PHPWAMP本身无关,是电脑设置的问题,一般正常情况下不会出现这个问题. 现在把学生 ...
- 20款高质量的 HTML5 网站模板【免费下载】
下面的列表集合了20款高质量的免费 HTML5 网站模板,这些专业的模板能够让你的网站吸引很多的访客.这些免费的 HTML5 模板虽然不是响应式的,不过都很实用.赶紧来看看. 您可能感兴趣的相关文章 ...
- 20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
- phpMyAdmin:无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装。
一:错误提示 英文:Cannot start session without errors, please check errors given in your PHP and/or webserve ...
- Discuz建站教程:本地安装discuz网站
网站建目前都很简单,建站容易,管理难,网站做大优化更难.本人有建站经验,目前给大家分享一下如何建站,当然,目前使用的是本地建站,因为非本地建站需要购买域名和网站空间,当然,朋友们想真正建站的,对于一些 ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议107:区分静态类和单例
建议107:区分静态类和单例 有一种观点认为:静态类可以作为单件模式的一种实现方式.事实上,这是不妥当的.按照传统的观点来看,单例是一个实例对象.而静态类并不满足这一点.静态类也直接违反面向对象三大特 ...
- 11、Semantic-UI之分割线
11.1 分割线的定义 示例:定义分割线 分割线 <div class="ui divider"></div> 竖线并加入or <div class= ...
- COLLATE 函数
指定SQL server的排序规则Chinese_PRC指的是中国大陆地区,如果是台湾地区则为Chinese_TaiwanCI指定不区分大小写,如果要在查询时区分输入的大小写则改为CSAS指定区分重音 ...
- 基于 ZKEACMS 的云建站 / 自助建站解决方案
基于ZKEACMS的云建站 / 自助建站解决方案,一站式托管,解决企业建站需求,功能强大,高度自定义.用户只需在界面上输入一些基本信息,选择相应的主题 / 网站模板,然后就可以快速创建一个独一无二的网 ...
- 【题解】 LA3708 Graveyard
题目大意 在一个圆周长为10000的圆上等距离分布n个雕塑,现在有m个新加入的雕塑(还是要求等距离摆放),问n个雕塑移动的总距离的最小值. Solution 显然必然会有一个雕塑不移动,所以可以直接不 ...
- OCP最新题库收集,新版052考题及答案整理-19
19.Which is true about invalid PL/SQL objects? A) They are automatically recompiled against the new ...
- “全栈2019”Java第五十六章:多态与字段详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第五十五章:方法的静态绑定与动态绑定
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- vue数据响应的坑
1.首先遇到的第一个坑是数组 vue初始化时,data是一个数组并且为空的时候,里面有一些对象元素,直接改变这些对象的的属性不会触发视图更新 解决办法,copy一个新的数组(vue.assign是浅c ...
- MACD 的数学解释
目录 MACD 的数学解释 MACD 的一般定义 引入延迟算子 Taylor 展开 权重分析 共振? MACD 的数学解释 MACD 的一般定义 \[ \begin{align*} DIF & ...