JS 如何判断是否安装某个 Android APP?

简介: 在实际工作场景中,我们经常会遇到这种需求:需要提示用户下载 App,而如果用户已经安装,我们希望是直接打开 App。

作者:UC 国际研发 何惧

image.png


在实际工作场景中,我们经常会遇到这种需求:需要提示用户下载 App,而如果用户已经安装,我们希望是直接打开 App。

实际上,JS 是没有判断 App 是否安装的方法的,那么我们只能想办法来解决这个问题了。

首先,我们需要有 call 起 App 的 schema 以及下载地址,比如:

image.png

接着,便是考虑 JS 与 App 间通信的问题,这里我们使用 WebSocket 来实现。

使用 WebSocket 实现页端和 App 的通信

我们的思路如下:

Android App 需要实现 WebSocket 的连接功能,开放一个特定的端口,如:8899;

页端 JS 建立 WebSocket连接;

image.png

当点击下载按钮的时候,调用 download(schema,downUrl) 方法即可。

P.S.: 但是这种方法存在一个严重的问题:当 App 不在进程中存活时,我们是无法成功 call 起的。因此我们需要在客户端做一些工作,让你的 App 一直存活在进程中。此处不做深入讨论。

判断是否需要调用下载

实现了页端与 App 的通信之后,我们开始判断是否需要调用下载。

首先,我们的想法是,当用户点击下载后,先尝试 call 起 App,使用 setTimeout 做延时处理,在延时中判断是否 call 起成功。如果不成功,则直接下载。那我们如何认为 call 起成功呢?

这里我用到了一个小 trick:当成功调起另一个应用时,浏览器会被隐藏,那么当前页面会失去焦点,以此来进行判断。

image.png

那么如何来设置 isBlur 的值呢,这里提供两种方法:

1.监听 window 的 blur 事件

image.png

监听 document 的 visibilityChange 事件,来判断 document 的 hidden 属性

【简单写法】

image.png

【兼容写法】

image.png

这里我使用将两者配合使用的方案,代码如下。
image.png

这样,当用户点击下载按钮,如果 call 起 App 成功,浏览器不会继续下载。如果没有成功 call 起 App, 浏览器会继续下载流程。

目录
相关文章
|
2天前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
3天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
3天前
|
小程序 Android开发 iOS开发
uni-app 安装与配置
uni-app 安装与配置
11 1
|
3天前
|
存储 Java 开发工具
在Eclipse配置安装Android详细教程(新手)
在Eclipse配置安装Android详细教程(新手)
26 1
|
2天前
|
XML Dart Java
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
|
3天前
|
XML API Android开发
android S 上 安装apk出现android.os.FileUriExposedException
android S 上 安装apk出现android.os.FileUriExposedException
18 6
|
3天前
|
Java 开发工具 Android开发
Android mk 集成app
Android mk 集成app
14 5
|
3天前
|
移动开发 资源调度 前端开发
nbcio-vue下载安装后运行报错,diagram-js没有安装
nbcio-vue下载安装后运行报错,diagram-js没有安装
|
3天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
6 0
|
3天前
|
移动开发 jenkins 持续交付
jenkins编译H5做的android端编译卫士app记录
jenkins编译H5做的android端编译卫士app记录