What is mobile deeplinking and how to implement it with Cordova ?

What is deeplinking ?

A deep link is a way to access a resource inside an application thanks to an URL, e.g. myApp://place/123 redirects to the place resource whose id is 123inside the application myApp. The first element, called the scheme name, is the identifier of the application you want to launch.

When you want to develop deeplink for your app, pay attention to your scheme name as there isn't any official authority to regulate to avoid conflits between names of differents apps. So try to be unique!

Twitter and Facebook were among the first to use it. For example :

• twitter://timeline would launch the native Twitter app and redirects to your own timeline
• fb://profile/12345678901234 would link to the Facebook's profile page of user 12345678901234.

A classic example of deeplinking is e-commerce apps that offer a discount on a product. In this case, deeplinking enables other applications to reference your discount and with it, a user can directly access the discount instead of arriving on the home page and having to cross all the app to find the discount he was looking for. For instance, you can make a deeplink to the Amazon Appstore : amzn://apps/android?p=com.amazon.mp3.

The URL depends on the platform : on Android, a deeplink looks like myApp://place/123 whereas on iOS, it is myApp://launch?place=123.

If no apps on your device can handle the deeplink you are trying to open, you will be redirected to the store (Play Store/App Store) on a page of a app that can process your deeplink.

Use it in a Cordova app

You can use this plugin https://github.com/EddyVerbruggen/Custom-URL-scheme :

• Install the plugin : cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycustomscheme, replace mycustomscheme with the scheme you want, e.g. the name of your app.

• Add the URL handler in your JS :

function handleOpenURL(url) {  
  // write code with the 'url' param
  // to redirect to the corresponding page in your page
}

This function will probably be executed before the deviceready event. So you better wait for this event to be triggered, before redirecting. If you use Ionic, you can plug on ionic.Platform.ready() to be sure that everything has been loaded.

• Launch your deeplinking and be redirected in your app. For instance, in another Cordova app, you can use the InAppBrowser pluginhttps://github.com/apache/cordova-plugin-inappbrowser and call it with :

<button onclick="cordova.InAppBrowser.open('mycustomscheme://somePath/place/123', '_system')">  
Open my app on place 123  
</button>  

Sources:

http://mobiledeeplinking.org