因为该协议没有注册处理程序，无法启动“URL”。

Question

我正在尝试使用Angular 11和Ionic 5构建一个社交分享组件。我使用锚标签来调用href="whatsapp://send?#text=some%20text"。这在安装了WhatsApp的设备上运行良好，但在没有安装WhatsApp的设备上，浏览器控制台只会显示以下错误消息：

“Failed to launch 'whatsapp://send?#text=text=some%20text' because the scheme does not have a registered handler.”

如何捕获此错误以向用户显示一个友好的消息，例如“抱歉，您没有安装WhatsApp”？

- Nico

Answer 1

如果直接使用href属性，似乎无法处理它。

然而，如果将此逻辑移至组件内部，则有几个选项：

应用内部：

您可以使用此插件检查应用程序的可用性，即：

let app;

if (this.platform.is('ios')) {
  app = 'twitter://';
} else if (this.platform.is('android')) {
  app = 'com.twitter.android';
}

this.appAvailability.check(app)
  .then(
    (yes: boolean) => console.log(app + ' is available'),
    (no: boolean) => console.log(app + ' is NOT available')
  );

浏览器内部：

1. Use timeout fallback i.e.

   <!-- Deep link URL for existing users with app already installed on their device -->
   window.location = 'yourapp://app.com/?screen=xxxxx';
   
   <!-- Download URL (TUNE link) for new users to download the app -->
   setTimeout("window.location = 'http://hastrk.com/serve?action=click&publisher_id=1&site_id=2';", 1000);
   

   Actually, this is the way we used in one of our web application and it worked successfully.

2. Use deep links handler library which allows you to work with deeplinks like this

   <a href           ="..."  Fallback  (and unsupported OSs)
      data-app       ="..."  Deep link (cross-OS)
      data-app-[os]  ="..."  Deep link (OS-specific)
      data-store-[os]="..."> Store ID  (OS-specific)
   

   I didn't use it before so can't tell anything special regarding it

- Sergey Mell

---

不幸的是，如果应用程序在浏览器中运行，则此方法无效。亚马逊是一个有效的示例： 产品页面-> DevTools-> 选择移动设备-> 重新加载页面-> 共享-> WhatsApp - Nico

是的，你说得对。appAvailability在浏览器中不起作用。这是我的错。让我研究一下，也许我能找到一个解决方案。 - Sergey Mell

@Nico，请查看我更新的答案，其中添加了纯浏览器解决方案。希望能有所帮助。 - Sergey Mell

appAvailability 只能在 iOS 和 Android 的原生应用程序中使用。我认为随着时间的推移，这归结为一种解决方法，例如一个定时器，假设在一定时间后会发生某个动作，否则该应用程序可能未安装在设备上或类似情况。 - Nico

我在之前的评论中说错了appAvailability。在我的最新回答更新中，我添加了纯浏览器解决方案。例如，你看到了setTimeout的解决方案吗？ - Sergey Mell

Answer 2

我使用这个来检查应用程序是否已安装。

 "intent://scan/#Intent;scheme=whatsapp://send?#text=text=some%20text;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.whatsapp;end"

- AllanRibas