Introduction

This tutorial will show you how to add Deep Links to your Ionic 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:
https://www.roguefitness.com/women-s-rogue-red-tank-top

This is not a deep link:
https://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 user 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 Apps.

Select the deeplink

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: https://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

Install Deeplink Plugin

Deeplinks Plugin handles deeplinks 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.

Respond to deeplinks

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);
      });
    });
  }
}

Install Social Sharing Plugin

This is the easiest step. We will use social sharing cordova 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 need to add 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(() => {
  });
}

Test custom URL scheme DeepLinks

In the following video you will see how to test the app deeplinks in iOS:

Conclusion

In this Ionic Deeplinking tutorial we explained what deeplinks are and how to use them in your Ionic Framework applications.

Keep 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 your deeplink like demoapp.com. You can see how to achieve this in the following tutorial under the section Configuring Universal Links (iOS) and App Links (Android).

If you have any issues or questions about this tutorial please leave a comment below. Also, if you want to keep learning Ionic Framework, I suggest you the following tutorials:

At IonicThemes we are big fans of Learning by example, that's why all our ionic tutorials include a complete and free ionic code example that you can reuse in your ionic projects.

We strive to create the best content for Ionic Framework, both tutorials and templates to help the Ionic community succeed. We work towards empowering developers to achieve a free life through coding. That's what motivates us at IonicThemes everyday.

Also, you can check out our detailed and professional Ionic Starter App crafted with love and dedication to help you create better apps and supercharge your productivity.