检测是否安装了 WhatsApp

Question

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

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

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

Answer 1

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

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

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

通过打开浏览器的开发工具并搜索WhatsAppApiOpenUrl. 在 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.removeEventListenerto remove handleBlur。如果这对您很重要，它还会将一个 DOM 节点附加到正文中。

用法示例：

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

Answer 2

这是我在 Android 上的测试：

• Built-in Browser (Webview) and Firefox如果安装了 WA 您可以使用iframe自动打开 WhatsApp

• Chrome and Opera需要用户点击操作

这个简单的代码可以检查 WhatsApp 是否已安装

let clickTimeout;
document.querySelector('#openWA').addEventListener('click', function() {
  let start = Date.now();
  clickTimeout = setTimeout(function() {
    if (Date.now() - start > 1250)
      return;
    alert('WA not installed')
  }, 1e3);

  // reset the setTimeout or the alert will always be fired
  window.addEventListener("blur", function() {
    clearTimeout(clickTimeout)
  });
})

<a href="whatsapp://send/?phone=62812345678&amp;text=test" id="openWA">Send to WhatsApp</button>

<!-- Auto open on WebView and Firefox -->
<iframe id="launcher" src="whatsapp://send/?phone=62812345678&amp;text=test" style="display: none;"></iframe>