What is deeplinking ?

A deep link is a way to access a resource inside an application thanks to an URL, e.g. ++code>myApp://place/123++/code> redirects to the ++code>place++/code> resource whose id is ++code>123++/code>inside the application ++code>myApp++/code>. 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 :

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

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 : ++code>amzn://apps/android?p=com.amazon.mp3++/code>.

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

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 : ++code>cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=mycustomscheme++/code>, replace ++code>mycustomscheme++/code> with the scheme you want, e.g. the name of your app.
• Add the URL handler in your JS :

++pre>++code>++code class=" language-js">function handleOpenURL(url) {  
 // write code with the 'url' param
 // to redirect to the corresponding page in your page
}
++/code>++/code>++/pre>

This function will probably be executed before the ++code>deviceready++/code> event. So you better wait for this event to be triggered, before redirecting. If you use Ionic, you can plug on ++code>ionic.Platform.ready()++/code> 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 :

++pre>++code>++code class=" language-js"><button onclick="cordova.InAppBrowser.open('mycustomscheme://somePath/place/123', '_system')">
Open my app on place 123  
</button>
++/code>++/code>++/pre>

Sources:

http://mobiledeeplinking.org