How to add Deep Linking in Ionic OR Deep Linking alternative for ionic

What is Deep Links :

In place of URLs, All mobile apps are operate by URIs (Uniform Resource Identifier). A deep link can trigger on a installed mobile app in users mobile.

Deep linking is very simply way for app developers to link or open specific pages within this mobile apps. With the help of deep linking, we can link one app to another app or any url to our app. i.e, sending users to store pages, store listings or specific deals.

Let's take a example :

A link to opens WhatsApp would look like this:

<a href="whatsapp://app">This will open WhatsApp</a>

<a href="whatsapp://send?text=Hello%20Dear">Send "Hello Dear" from WhatsApp</a>

There are a few things we have to consider before implementing this :

• Is your app installed on the mobile?
• Has the device setup to manage deep link correctly?

Here we will integrate deep link by two methods :

1. Install Deeplinks Plugin From Ionic :
We need to first install the Ionic native plugins in our project :

$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=myappurl.com --variable ANDROID_PATH_PREFIX=/

$ npm install --save @ionic-native/deeplinks

URL_SCHEME : This refers to the custom scheme the app will handle.
DEEPLINK_HOST : This refers to the domain the app will respond to.
DEEPLINK_SCHEME : This is the protocol the app will listen for, which most of the times is https as it’s required on iOS and Android.

Now import plugin in your TS file :
import { Deeplinks } from '@ionic-native/deeplinks';

Add in providers :
providers: [Deeplinks]

Add in constructor :
constructor(private deeplinks: Deeplinks) { }

Now add below code in your function to manage deep link :
this.deeplinks.route({

     '/about-us': AboutPage,

     '/universal-links-test': AboutPage,

     '/products/:productId': ProductPage

   }).subscribe(match => {

     // match.$route - the route we matched, which is the matched entry from the arguments to route()

     // match.$args - the args passed in the link

     // match.$link - the full link data

     console.log('Successfully matched route', match);

   }, nomatch => {

     // nomatch.$link - the full link data

     console.error('Got a deeplink that didn\'t match', nomatch);

   });

For detail information of this plugin click here.


2. Custom URL scheme Cordova/PhoneGap Plugin :This plugin allows you to open your app by clicking on URL, i.e myapp://path?res=reg

Install plugin by using below command :
$ cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp


Add this code below import section. I.e,

import { NewUserPage } from '../pages/newUser/newUser';

(window as any).handleOpenURL = (url: string) => {

 (window as any).handleOpenURL_LastURL = url;

};

Add below code in construct :

// This code will override the open handler to navigate mobile app on further custom url scheme. Please check below code for this  

(window as any).handleOpenURL = (url: string) => {

setTimeout(() => {

this.handleOpenUrl(url);

 }, 0);

 };

// check if app was opened by custom url scheme

const lastUrl: string = (window as any).handleOpenURL_LastURL || "";

if (lastUrl && lastUrl !== "") {

delete (window as any).handleOpenURL_LastURL;

this.handleOpenUrl(lastUrl);

 }

Create function to handel deeplinking :

private handleOpenUrl(url: string) {

// custom url parsing, etc...

alert(url);

// navigate to page with reactive forms

// this.navCtrl.push(MyReactiveFormsPage, { param: "my param" });

 }

URL Scheme hints :

You need to take care of below points for URL_SCHEME.

• Please don't use an already registered scheme like fb, twitter, etc.
• Please use only lowercase characters.
• Please don't use a dash - because on Android it will become underscore _.
• Please use only 1 word (no spaces).

For detail information click here.