Introduction

This tutorial will show you how to add Deep Links to your Ionic 3 App. The most common use case for deep links is for sharing content buried within the navigation tree of the app. That’s why we built a sample app that contains a feed of items that users can share.

I found this great tutorial, however, the code is outdated so I felt it need an overhaul.

What are deep links?

The simplest explanation of a deep link is “a link that takes you to specific content.”

Let's see a simple example!

This is a deep link:
http://www.roguefitness.com/women-s-rogue-red-tank-top

This is not a deep link:
http://www.roguefitness.com/ because it links to the homepage, not to a particular item.


A mobile deep link let users share content that's hidden deep inside an app. For example, if you want to send someone a link to a particular t-shirt from an app, you will do so by using a deep link. Without a deep link, your friend will have to find the specific app, open it in the homepage and then find the t-shirt (and hopefully they don’t get lost in the way).

Why do we need Deep Links?

The bad thing about apps is that they have to be downloaded on the device, and even if they're downloaded, there is no standard way to find and share items within the app because this is very specific to each one.

Unlike most of the information from the internet, content within mobile applications is not publicly accessible, so you need to go deep inside in order to find it.

If you want to give your users a good experience and improve conversions and engagement, you should add deep linking capabilities to your app.

Deep linking has evolved over the last years, with mobile devices going from supporting custom URL schemes (like amazon://) to now opening native apps in response to navigation to URLs (like www.amazon.com). Additionally, OS’s now support powerful ways to index and search data inside of native apps.

For these reasons we have created this tutorial to help you add and set up deep linking in your Ionic 3 mobile apps.

Step 1: Let’s Choose a Deep link

The first thing we need to do is to choose what kind of deep link we want our app to respond to.

To continue with the Rouge example from above, the website url from a specific t-shirt is: http://www.roguefitness.com/women-s-rogue-red-tank-top

We can launch our app when someone navigates to this URL on a mobile device and go directly to this t-shirt product page. Also, let’s say we want to enable a custom URL scheme like roguefitness://app/women-s-rogue-red-tank-top

Step 2: Install Deeplinks Plugin

Deeplinks Plugin handles deep links on iOS and Android for both custom URL scheme links (like demoapp://) and Universal App Links (like demoapp.com). In order to install this plugin we need to choose our URL scheme, website, and deeplinking path.

To install it just type the following code: (Note that you should replace demoapp and demoapp.com with your own values.)

$ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=demoapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=demoapp.com

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

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

Step 3: Responding to deep links

We need to define the deeplink routes we want to respond to. If one of them matches against an incoming deeplink, we can automatically navigate in our app to display the appropriate content.

To achieve this, add your deep link routes in your src/app/app.component.ts like we did below: 

	import { Component, ViewChild } from '@angular/core';
	import { Platform, Nav, NavController} from 'ionic-angular';
	import { Deeplinks } from '@ionic-native/deeplinks';
	import { SplashScreen } from '@ionic-native/splash-screen';
	import { StatusBar } from '@ionic-native/status-bar';
	import { TabsPage } from '../pages/tabs/tabs';
	import { ItemDetailsPage } from '../pages/item-details/item-details';
	import { AboutPage } from '../pages/about/about';
	import { ContactPage } from '../pages/contact/contact';


	@Component({
	  template: `<ion-nav [root]="rootPage"></ion-nav>`
	})
	export class MyApp {
	  rootPage = TabsPage;
	  @ViewChild(Nav) navChild:Nav;

	  constructor(
		platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public deeplinks: Deeplinks
		) {
	    platform.ready().then(() => {
	      this.statusBar.styleDefault();

				//This is the code who responds to the app deeplinks
				//Deeplinks if from Ionic Native
	      this.deeplinks.routeWithNavController(this.navChild, {
	        '/about': AboutPage,
	        '/contact': ContactPage,
	        '/items/:itemId': ItemDetailsPage
	      }).subscribe((match) => {
	        console.log('Successfully routed', match);
	      }, (nomatch) => {
	        console.log('Unmatched Route', nomatch);
	      });
	    });
	  }
	}

Step 4: Install Social Sharing Plugin

This is the easiest step. We will use this plugin to give our app the ability to share text, files, images, and links via social networks, sms, and email.

In our Item component we added a ShareItem method:

	shareItem(item) {
    // this code is to use the social sharing plugin
    // message, subject, file, url
    this.socialSharing.share("Check this item:  demoapp://home/items/" + item.id, item.title, item.img)
    .then(() => {
    })
    .catch(() => {
    });
  }

Step 5: Test custom URL scheme DeepLinks

See how we tested the app in iOS:

Next steps

Have in mind that before you deploy this to a production app, you need to configure Universal Links on iOS and App Links on Android so your app can be opened when someone navigates to demoapp.com. You can see how to achieve this in the following tutorial under the section Configuring Universal Links (iOS) and App Links (Android).


Now that you’ve learned more about deep links and social sharing, why don’t you give a chance to this Ionic2 template and apply this new knowledge?