前端 - 如何判断H5是否通过通用链接成功唤起了app？

Question

如何判断H5是否通过通用链接成功唤起了app？
有什么检测方法吗？比如之前scheme的跳转，可以通过监听页面的hidden事件？

Answer 1

你在唤起APP的时候执行以下代码，在urlschemes后面携带一个参数

<a href="test://enter?a=1">唤起app<a>

在app端获取参数

let args = plus.runtime.arguments;console.log(plus.runtime.arguments, typeof args, 'plus.runtime.arguments');if (typeof args == 'string' || typeof args == 'object') {args = args.split('entry?');console.log(args,'args');if (args.length == 2 && args[1]) {  args = args[1];  try {    //获取到参数，处理跳转逻辑  } catch (e) {    console.log('处理参数失败', e);  }}//值清空这里有坑的,可能是官方bugplus.runtime.arguments = null;plus.runtime.arguments = '';return false;}

Answer 2

一个比较常见的做法就是延迟(setTimeout)几秒后弹出一个启动失败的弹窗或者相应的逻辑。
然后添加一个 pagehide 和 visibilitychange 的事件监听，当 hide 后，取消掉这个 setTimeout。

因为如果跳转成功了，页面一般都会切出去，反之则不会。

大致的代码

function redirectToApp (path) {  function handleRedirectFailed () {    const timer = setTimeout(function () {      // 显示失败的弹窗或者逻辑    }, 3e3);    return function () {      clearTimeout(timer);    };  }  const timer = handleRedirectFailed();  window.addEventListener('pagehide', timer);  document.addEventListener('visibilitychange', () => {    if (document.visibilityState === 'hidden' || document.hidden) {      timer();    }  });  setTimeout(function () {    document.removeEventListener('visibilitychange', timer);    window.removeEventListener('pagehide', timer);  }, 3e3);  // 使用 schema 跳转  window.open(url, '_blank');}

有些手机在跳转前可能会询问用户，这个过程可能也会触发 pagehide、visibilitychange，要避免这种情况，可以把 addEvenetListener 延迟一下

当然，如果你要想 100% 严谨，那就每次启动的时候额外携带一个随机参数，让后接口轮询，App 启动成功后，就把这个参数提交到后端去，页面轮询这个参数的结果就好了。不过一般都没啥必要。。。前面的方法就够了

Answer 3

要判断H5页面是否通过通用链接成功唤起了app，你可以采用以下几种方法：

1. 使用URL Scheme：
   如果app支持特定的URL Scheme，你可以在H5页面中的JavaScript代码中尝试打开一个该Scheme的URL。如果app已经安装并且正确处理了这个Scheme，它会被唤起。如果app没有安装，浏览器通常会显示一个错误页面或提示。

   function checkAppInstallation() {    var url = 'yourappscheme://path';    window.open(url, '_blank');    // 监听页面隐藏事件    window.addEventListener('visibilitychange', function() {        if (document.visibilityState === 'hidden') {            console.log('App was opened successfully!');            // 在这里执行当app被唤起时的逻辑        }    });}

2. 使用Universal Links (iOS)：
   对于iOS，你可以使用Universal Links。通过配置app的apple-app-site-association文件，你可以让iOS设备在点击符合app关联的链接时直接打开app。为了检测是否成功唤起了app，你可以使用aswebauthenticationsession或者监听continueuseractivity代理方法。

   // 使用aswebauthenticationsession (仅适用于iOS)if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.callbackHandler) {    window.webkit.messageHandlers.callbackHandler.postMessage(null);}

在app中，你需要处理来自web页面的消息。

3. 使用Intents (Android)：
   对于Android，你可以使用Android App Links或自定义Intents。Android App Links类似于iOS的Universal Links，而自定义Intents则需要用户安装app并在app中配置相应的Intent Filter。

   // 监听页面隐藏事件window.addEventListener('visibilitychange', function() {    if (document.visibilityState === 'hidden') {        // 对于Android，可以通过检查是否打开了自定义的URL来判断        console.log('App was opened successfully!');    }});

在app中，你需要处理来自web页面的Intent。

4. 使用第三方库：
   还有一些第三方库，如branch.io或firebase dynamic links，可以帮助你实现跨平台的深度链接，并提供API来检测链接是否被成功处理。

请注意，以上方法可能因浏览器和操作系统版本的不同而有所差异，因此建议查阅相关文档和测试以确保兼容性。同时，确保你的app正确配置了URL Scheme、Universal Links或App Links，以便能够响应来自web的链接。