Failed to launch ‘URL’ because the scheme does not have a registered handler

i’m trying to build a social share component with angular 11 and ionic 5. I’m using an anchor tag to call href=”whatsapp://send?#text=some%20text”. This works fine on devices with WhatsApp installed, but i only get the following error in the browser console on devices without WhatsApp installed:

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

How can i catch this error to show the user a nice message like “Sorry, you have no WhatsApp installed”

Answer

It seems it’s not possible to handle it if using href property directly.

However, if you move this logic inside your components there are several options

Inside application:

You can check the app availability using this plugin i.e.

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')
  );

Inside browser:

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