时间戳

首页 > 解决方案 > 检测是否安装了 WhatsApp

javascript - 检测是否安装了 WhatsApp

问题描述

使用 Android 或桌面浏览器，请访问此WhatsApp 测试页面并单击Send按钮。如果未安装 WhatsApp，它将向您显示一条消息。

该页面上的代码检测如何工作？我尝试了以下但没有任何反应。

try {
  location.href = 'whatsapp://send/?phone=62812345678&text=test';
} catch (e) {
  console.log(e);
}

标签： javascriptwhatsapp

解决方案

查看该页面，似乎至少在 Chrome 上，他们以编程方式打开了一个带有 .src 的 iframe whatsapp://send/?phone=<number>&text=test。然后他们开始一个 1000 毫秒的超时，之后“看起来你没有安装 WhatsApp！” 显示文本。此超时由blur事件处理程序取消，这意味着它们的检查基于您的设备在加载该 URL 时打开 WhatsApp，这会使窗口模糊。

超时后触发的函数似乎也检查超时时间是否超过 1250 毫秒。我怀疑这可以处理手机浏览器在更改应用程序时停止执行 JS 计时器的情况。

在 IE 上，他们使用window.navigator.msLaunchUri，它接受noHandlerCallback.

打开浏览器的开发工具并搜索WhatsAppApiOpenUrl. 在 Chrome 上，可以从 devtools 的菜单中找到搜索：

可以在 Chrome 的 devtools 中找到搜索工具的屏幕截图

这是一些示例代码。

const detectWhatsapp = (phone, text) => {
  const uri = `whatsapp://send/?phone=${encodeURIComponent(
    phone
  )}&text=${encodeURIComponent(text)}`;

  const onIE = () => {
    return new Promise((resolve) => {
      window.navigator.msLaunchUri(
        uri,
        () => resolve(true),
        () => resolve(false)
      );
    });
  };

  const notOnIE = () => {
    return new Promise((resolve) => {
      const a =
        document.getElementById("wapp-launcher") || document.createElement("a");
      a.id = "wapp-launcher";
      a.href = uri;
      a.style.display = "none";
      document.body.appendChild(a);

      const start = Date.now();
      const timeoutToken = setTimeout(() => {
        if (Date.now() - start > 1250) {
          resolve(true);
        } else {
          resolve(false);
        }
      }, 1000);

      const handleBlur = () => {
        clearTimeout(timeoutToken);
        resolve(true);
      };
      window.addEventListener("blur", handleBlur);

      a.click();
    });
  };

  return window.navigator.msLaunchUri ? onIE() : notOnIE();
};

请注意，它每次调用时都会添加一个事件侦听器。如果您将其推广到生产中，请在承诺解决后使用window.removeEventListener删除。handleBlur如果这对您很重要，它还会将 DOM 节点附加到正文中。

使用示例：

detectWhatsapp('<your number here>', 'test').then(hasWhatsapp =>
  alert(
     'You ' + 
        (hasWhatsapp ? 'have WhatsApp' : "don't have WhatsApp")
  )
)

推荐阅读