Fix ERR_UNKNOWN_URL_SCHEME on Android WebView for tel:\sms:\geo:\etc links

I am building a hybrid mobile app with Visual Studio Tools for Apache Cordova that is able to make phone calls, send text message or emails, view a location on a map, etc. These are all handled with external applications (for instance use Gmail to send an email or Maps to pinpoint a location). They are placed in an anchor tag in HTML, such as <a href="tel:12345678">, <a href="sms:12345678">, <a href="mailto:name@domain.com"> or <a href="geo:...">. These work fine except that when you execute one of these actions and the system opens another app you see for a short time a webview with an error: “Web page not available”. Then the external app opens, you take the action and then go back to the app. At that point you again see this webview with the error as shown below.

This seem to be a known issue as I found many references of it on the web. Here are several for reference:

• Android WebView “tel:” links show web page not found
• Getting net::ERR_UNKNOWN_URL_SCHEME while calling telephone number from HTML page in Android
• Android Webview ERR_UNKNOWN_URL_SCHEME Error
• Webview shouldoverrideurlloading doesn’t work

I am using the InAppBrowser plugin to open links in external apps. In order for this to work the schemes must be white-listed in Cordova’s config.xml file and the launch-external attribute should be set to true (which was already set in my case).

  
<access origin="mailto:*" launch-external="true" />
<access origin="tel:*" launch-external="true" />
<access origin="sms:*" launch-external="true" />
<access origin="geo:*" launch-external="true" />
<access origin="maps:*" launch-external="true" />

The indicated solution is to override WebView.shouldOverrideUrlLoading method.

I added the following in plugins\cordova-plugin-inappbrowser\src\android\InAppBrowser.java in the plugin’s WebView extension, but that did not work as the code did not even execute.

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
   if( url.startsWith("http:") || url.startsWith("https:") ) {
      return false;
   }

   // Otherwise allow the OS to handle it
   Intent intent = new Intent(Intent.ACTION_VIEW);
   intent.setData(Uri.parse(url));
   cordova.getActivity().startActivity(intent);
   return true;
}

Looking for a solution I have noticed that this was only working OK for tel: and for others it was exhibiting this behavior. Then I found the following code in the InAppBrowser plugin class, in the execute() method.

//Load the dialer
else if (url.startsWith(WebView.SCHEME_TEL))
{
    try {
        Log.d(LOG_TAG, "loading in dialer");
        Intent intent = new Intent(Intent.ACTION_DIAL);
        intent.setData(Uri.parse(url));
        cordova.getActivity().startActivity(intent);
    } catch (android.content.ActivityNotFoundException e) {
        LOG.e(LOG_TAG, "Error dialing " + url + ": " + e.toString());
    }
}

I have changed that to include the other schemes and that fixed the problem.

else if (url.startsWith(WebView.SCHEME_TEL) || 
         url.startsWith("sms:") ||
         url.startsWith(WebView.SCHEME_MAILTO) ||
         url.startsWith(WebView.SCHEME_GEO) ||
         url.startsWith("maps:"))
{
    try {
        Log.d(LOG_TAG, "loading in external app");
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setData(Uri.parse(url));
        cordova.getActivity().startActivity(intent);
    } catch (android.content.ActivityNotFoundException e) {
        LOG.e(LOG_TAG, "Error opening external app " + url + ": " + e.toString());
    }
}

With this in place, the web page error no longer shows up for any URL scheme.

I’m not sure if this is the best solution, but it is the only one that I managed to implement.