admin管理员组文章数量:1657206
需求背景
在H5页面上进行app引流。点击某个按钮时，判断用户是否已经安装某APP，若已安装，则直接打开APP；若未安装，则开始下载APP;
实际上，JS 是没有判断 APP 是否安装的方法的，那么我们只能想办法来解决这个问题了。
android端处理方案
在android端大多数是通过scheme命令直接打开APP。
首先定义好你的scheme命令已经app下载地址，如下：
let schemeUrl = 'com.***://***:8080/loadapp';
let downloadUrl = 'https://***/appdownload';
然后点击按钮时直接重定向至scheme地址。
接下来如果用户已经安装了就会直接打开APP，浏览器会被隐藏，那么当前页面会失去焦点，以此来进行判断。
完整代码如下：
window.location.href = schemeUrl ;
// 设置2秒的定时下载任务，2秒之后下载app
setTimeout(function () {
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden;
if (typeof hidden !== "undefined" && hidden === true) {
return;
}
window.location.href = downloadUrl;
}, 2000);
iOS端处理方案
1.在 xcode 中开启 Associated Domains 服务
2.在 Capabilities -> Associated Domains 添加跳转域名格式为 applinks:universal-link.example
3.准备两个域名（通用链接域名和当前域名一样，IOS 会默认判断在当前页面打开一个网页）一个是页面部署域名 h5.example，一个用来制作通用链接 universal-link.example。
4.在 universal-link.example 所对应的服务器更目录创建 apple-app-site-association 文件，内容为
{
"applinks": {
"apps": [],
"details": [
{
"appID": "苹果对每个APP给定的唯一ID",
"paths": [ "/open-app"]
}
]
}
}
配置好一定要确保该文件可以正常访问
5.同样是在 universal-link.example 服务器里启动一个 nginx，用来处理当手机没安装 app 时跳转到 APP store 的操作
server {
location /open-app/ {
rewrite ^ https://apps.apple/cn/app/xxxxx;
}
}
接下来就可以在H5中将跳转链接改为universal-link.example/open-app，如下：
window.location.href = 'universal-link.example/open-app';
注意：
1.用户点击跳转按钮，首先判断需要跳转的 url 是否和当前页面的 url 为同一域名，如果不是才能触发 universal-link 的方式跳转。
2.iOS 系统必须大于 9。
3.unisersal-link 的域名必须为 https。
点击之后系统的流程：
1.用户安装 app 后系统会检索是否开启 Associated Domains，如果开启去下载 apple-app-site-association 文件，然后对此 APP 进行标注。
2.用户点击跳转链接时系统会先对已标注的 APP 进行检索，如果匹配则直接打开 APP。
3.不匹配则重定向到跳转链接，此时跳转链接服务器的 nginx 对 path 进行匹配，成功则再次重定向到 app store 的链接。
本文标签： app
版权声明：本文标题：关于H5唤起某APP，未安装调起下载那些事 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729775296a1212437.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论