襄阳门做网站,建设部网站注册中心,网站开发合同及报价,爱用建站平台的优势从同构的角度和降级支持的角度来看#xff0c;使用Android和iOS系统增强的AppLinks和Universal Links#xff0c;通过HTTPS统一标准打开APP是标准的选择。使用自定义Scheme打开APP适用于#xff1a;网站尚不支持HTTPS#xff1b;App的iOS版本尚未添加Universal Links支持使用Android和iOS系统增强的AppLinks和Universal Links通过HTTPS统一标准打开APP是标准的选择。使用自定义Scheme打开APP适用于网站尚不支持HTTPSApp的iOS版本尚未添加Universal Links支持APP的Android版本尚未添加AppLinks支持同时需要支持Android 6.0以下版本。使用自定义Scheme打开App的难点在于浏览器的兼容性问题和alert弹窗的提示干扰问题。在iOS和Android中可以用location.href请求自定义Scheme可以打开App用iframe只能在Android中打开在iOS中无法打开。故下面的实现用location.href请求的方案。在DEEP-LINK.JS基础上修改为applink放在团队代码库下。将原来DeepLink的方案扩展为AppLink使其兼容常见下载的需求。基本思路自动跳转链接赋值给href属性作为下载的默认值将AppStore地址、Android下载包地址、应用宝推广链接和应用deeplink地址赋值给自定义属性供程序使用将下载链接进行优化避免302跳转带来的性能损失监听a链接点击事件当存在deeplink时尝试打开App打开失败后进行下载或AppStore跳转(微信内部跳转到应用宝)visibility发生变化后取消备用方案执行。核心代码hrefdownload-link // 服务器端设置的根据UA判断的自动跳转链接包含下面4中情况data-href-androidandroid-download-link // Android包下载地址data-href-iositunes-link // itunes地址data-href-qq-androidmyapp-link // 应用宝推广地址data-href-qq-iosmyapp-link // 应用宝推广地址data-deeplinkdeep-link // 跳转App地址立即打开复制代码// 下载链接优化代码// 根据agent取指定的值进行优化赋值function optimize(anchor) {if (!anchor) {return;}var href anchor.getAttribute(data-href- agent);if (!href) {return;}anchor.href href;}复制代码// 尝试打开App代码// App打开之后浏览器转入后台运行计时器会暂停根据这个时间差判断是否打开了App// 如果App打开失败则执行后备方案跳转到href地址进行App下载活安装document.body.addEventListener(click, function (e) {// Hijack click eventvar target e.target,deeplink target.getAttribute(data-deeplink),start;if (target.tagName.toLowerCase() ! a || !deeplink || clicked || timeout) {return;}e.preventDefault();e.stopImmediatePropagation();// Store start timestart Date.now();clicked true;// Timeout to detect if the link workedtimeout setTimeout(function () {// Check if any of the values are unsetif (!clicked || !timeout) {return;}// Reset thingsclicked false;timeout null;// Has the user left the screen? ABORT!if (Date.now() - start delay * 2) {return;}open(target.href);}, delay);// Go to appopen(deeplink);}, false);复制代码// 取消备用代码执行// 当浏览器窗口发生visibility变化时App应该被调起过function handleVisibilityChange() {// Triggered on blurif (!clicked || !timeout) {return;}// Reset everythingclearInterval(timeout);timeout null;clicked false;}document.addEventListener(visibilityChange, handleVisibilityChange, false);复制代码测试结果任何技术方案和要交付的工作必须做足够多的测试因为我们要为自己的产出负责要为下游的测试同事负责——而且自我再多的测试也是不足够充分的总有一些小漏洞在暗处等着你我出现问题解决问题这是我们的态度。已安装启动测试结果系统版本\浏览器系统浏览器UC浏览器百度浏览器QQ浏览器猎豹浏览器iOS 8.4.1直接启动ActionSheet确认打开AppStore返回后触发ActionSheet确认打开AppStore直接启动直接启动返回后打开应用宝App页面直接启动返回后浏览器内部打开AppStoreiOS 9.3.5弹窗确认直接启动直接启动直接启动返回后打开应用宝App页面直接启动iOS 10.1.1弹窗确认ActionSheet确认直接启动直接启动返回后打开应用宝App页面直接启动返回后浏览器内部打开AppStoreZ2 Android 4.4.2直接启动ActionSheet确认返回后触发下载无法启动触发下载弹窗确认返回后触发下载弹窗确认MX5 Android 5.0.1直接启动触发下载直接启动触发下载无法启动触发下载弹窗确认返回后触发下载弹窗确认X6 Android 5.0.2ActionSheet确认返回后触发下载ActionSheet确认返回后触发下载无法启动触发下载弹窗确认返回后触发下载弹窗确认返回后触发下载T2 Android 5.1.1直接启动ActionSheet确认无法启动触发下载弹窗确认返回后触发下载直接启动Mi5 Android 6.0.1直接启动ActionSheet确认返回后触发下载无法启动触发下载弹窗确认返回后触发下载弹窗确认返回后触发下载6P Android 7.0.0直接启动ActionSheet确认返回后触发下载无法启动触发下载弹窗确认弹窗确认返回后触发下载未安装下载测试结果系统版本\浏览器系统浏览器UC浏览器百度浏览器QQ浏览器猎豹浏览器iOS 8.4.1先显示链接错误弹窗再AppStore打开确认先显示链接错误弹窗之后ActionSheet提醒打开AppStore直接打开AppStore打开应用宝App页面提示应用未安装之后在浏览器内部打开AppStoreiOS 9.3.5先显示链接错误弹窗再AppStore打开确认ActionSheet提醒打开AppStore直接打开AppStore打开应用宝App页面提示应用未安装之后打开AppStoreiOS 10.1.1先显示链接错误弹窗再AppStore打开确认直接打开AppStore直接打开AppStore打开应用宝App页面浏览器内部打开AppStoreZ2 Android 4.4.2打开自定义scheme页面ActionSheet提示打开App关闭ActionSheet后开始下载直接下载直接下载直接下载MX5 Android 5.0.1直接下载直接下载直接下载直接下载直接下载X6 Android 5.0.2直接下载ActionSheet提示打开App关闭ActionSheet后开始下载直接下载直接下载直接下载T2 Android 5.1.1直接下载直接下载直接下载直接下载直接下载Mi5 Android 6.0.1直接下载ActionSheet提示打开App关闭ActionSheet后开始下载直接下载直接下载直接下载6P Android 7.0.0选择下载器下载ActionSheet提示打开App关闭ActionSheet后开始下载直接下载直接下载直接下载参考资料
