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, 浏览器会继续下载流程。

目录
相关文章
|
5月前
|
缓存 监控 Android开发
App Trace 快速安装解析(开发者视角)
App Trace 是一款应用性能监控工具,可追踪启动时间、方法耗时及卡顿等指标,助力开发调试与性能优化。支持 Android 和 iOS 平台,提供依赖引入、初始化配置和自动化脚本等快速安装方案,同时包含采样率、本地缓存等高级配置选项。集成后可通过日志检查与测试事件验证功能,注意在发布版本中使用 no-op 版本以减少性能影响,并确保隐私合规。
|
6月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
118 0
|
4月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
328 14
|
5月前
|
监控 测试技术 Android开发
App Trace技术解析:传参安装、一键拉起与快速安装
本文从开发者视角解析App Trace技术的关键功能与实现方法,涵盖传参安装、一键拉起和快速安装技术。详细介绍了Android和iOS平台的具体实现代码与配置要点,探讨了参数丢失、跨平台一致性及iOS限制等技术挑战的解决方案,并提供了测试策略、监控指标和性能优化的最佳实践建议,帮助开发者提升用户获取效率与体验。
|
4月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
1024 11
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
8月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7142 24

热门文章

最新文章