如何在WhatsApp分享功能不可用时展示对应的提示通知

原有实现仅通过时间差判断是否成功唤起应用，逻辑精度不足。正常情况下，点击链接如果成功唤起WhatsApp/Viber，当前浏览器页面会被切到后台、触发失焦事件，原有代码没有监听该事件来取消定时器，所以无论是否唤起成功，定时器到点都会执行判断，很容易出现误触发。

<a href="whatsapp://send/?phone=62812345678&amp;text=test" id="openWA">Send to WhatsApp</a>
<br>
<a href="viber://forward?text=paff" id="openV">Send to Viber</a>

<script>
// 封装通用的唤起检测函数，减少重复代码
function checkAppInstall(btnSelector, alertText) {
  const btn = document.querySelector(btnSelector);
  let launchTimer = null;

  btn.addEventListener('click', function() {
    // 点击时启动定时器，1秒后如果没被清除就弹未安装提示
    launchTimer = setTimeout(() => {
      alert(alertText);
    }, 1000);
  });

  // 页面失焦说明成功唤起APP，清除定时器
  window.addEventListener('blur', () => {
    if (launchTimer) {
      clearTimeout(launchTimer);
      launchTimer = null;
    }
  });

  // 页面回到前台时也清理残留的定时器，避免后续误触发
  window.addEventListener('focus', () => {
    if (launchTimer) {
      clearTimeout(launchTimer);
      launchTimer = null;
    }
  });
}

// 分别注册两个应用的检测
checkAppInstall('#openWA', '请安装WhatsApp应用！');
checkAppInstall('#openV', '请安装Viber应用！');
</script>

• 当用户点击分享链接时，首先启动定时器，约定1秒后如果没有收到唤起成功的信号就弹出未安装提示
• 如果设备已经安装了对应应用，点击链接后系统会直接拉起应用，当前浏览器页面进入后台，触发blur事件，此时会立刻清除定时器，不会弹出提示
• 如果设备未安装对应应用，或者是桌面端不支持自定义协议唤起，页面不会失焦，定时器到点就会正常弹出提示
• 额外增加了页面回到前台时的定时器清理逻辑，避免多次点击出现重复提示的问题

内容的提问来源于stack exchange，提问作者John Smith