给你的移动网站加点料:推荐下载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=/> <meta= => <title></title> </head> <body> <script=> = Date();
- = Date();
- <5000 = ;
- = ; // Android端URL Schema
- window.location; // Android端URL Schema
- </script> <p=></p> <a==></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= /> <category= /> <category= /> <category= /> <data= = = =/> </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自带浏览器的测试,需要进行兼容性测试,但是按照个人感觉,应该不会有大问题。
如果哪位看官发现问题了,请评论中给我留言!