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?
Enjoyed reading this Ionic Tutorial?
Subscribe to keep learning Ionic Framework! You will receive offers, new ionic tutorials and free code examples from IonicThemes.