Link to Pages via URLs with Deep Linking in Ionic

Primarily, Ionic is a framework for building mobile applications with web tech that look, feel, and behave like “traditional” native applications. Naturally, it makes sense for the architecture of the framework to reflect that of the mobile application world – one that doesn’t rely on the use of URLs for navigation. Unlike the Angular framework that Ionic is built upon, Ionic has its own ideas for navigation that more closely reflect the native mobile app world, not websites.

A big part of using web tech is that it runs just about everywhere, and so naturally if you build something with web tech it can also run… on the web. We’ve seen the rising popularity of, and support for, Progressive Web Apps (PWAs) recently and the Ionic framework is at the forefront of that. A PWA runs on the web and does not rely on app stores or installation to run, so it will just run right there in your normal browser, and that brings prominence back to the URL bar.

Users will want to share and link to specific pages in an application, but since Ionic does not rely on URL routing for navigation, by default the URL for an Ionic application never changes when navigating the application. So, if you wanted to link to something in the application you would be forced to start on the applications first page.

This is where the concept of deep linking comes in, which does allow you to link to specific content in the application via the URL. Ionic has supported deep linking in the past, but now it is front and center in the framework as part of the @IonicPage decorator. In this tutorial, I am going to walk through the important concepts that you you will need to know to make use of deep linking in Ionic.

Before We Get Started

Last updated for Ionic 3.0.1

Before you go through this tutorial, you should have at least a basic understanding of Ionic concepts. You must also already have Ionic set up on your machine.

If you’re not familiar with Ionic already, I’d recommend reading my Ionic Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic, then take a look at Building Mobile Apps with Ionic.

Basic Deep Linking

To enable deep linking, you don’t need to do anything except make use of the new @IonicPage decorator. By default, new pages you generate will already include this.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
})
export class Second {
  // ..snip
}

You will notice that as you navigate throughout your application, the URL will change to represent whatever page you have navigated to. If you were to run the following code to launch that “Second” page:

this.navCtrl.push('Second');

and then took a look at the URL bar:

http://localhost:8100/#/second

You will notice that the URL now has /#/second at the end of it. If you were to now refresh the application, or visit that URL directly at any time, it would start the application and display the “Second” page rather than the normal root page for the application.

By default, the name used for referencing the page (i.e. in the push method above) will be whatever the class name for the page is, but you can easily customise that to something else by changing the name property:

@IonicPage({
    name: 'something-else'
})

Now you URL would instead use this to navigate to the page:

this.navCtrl.push('something-else');

You can also change the path of the URL by supplying the segment property, for example:

@IonicPage({
    name: 'something-else',
    segment: 'some-other-path'
})

Now if you were to navigate to this page the URL would look like this:

http://localhost:8100/#/some-other-path

This basic implementation of deep linking will work fine in some circumstances, but you will quickly run into problems with more complex applications. Often the context of how the user navigated to a certain page is as important as the page they are currently viewing.

In the example above, I am pushing the “Second” page and since I have pushed that page I will also be able to navigate back to the page I came from. However, if I were to load the application using that URL, I would lose the navigation history and no longer be able to go back to the original page.

Establishing Page History with Deep Linking

As I mentioned before, if we were to load the second page by visiting this URL:

http://localhost:8100/#/second

It would just load the “Second” page directly, it would no longer contain a back button to go back to the root page. In order to establish the navigation history for a particular page when loading it via a URL, we can use the defaultHistory property. All we have to do is supply it with a list of pages that reflect the desired navigation stack.

Let’s say we have a “Third” page, and to get to that you would need to first load the default home page, and then navigate to the second page, and then to the third page. In order to set up the default history correctly for this, we would do the following:

@IonicPage({
    defaultHistory: ['HomePage', 'Second']
})

Now if you were to load:

http://localhost:8100/#/third

You could successfully navigate back to the HomePage.

Passing Dynamic Data with Deep Linking

Another situation we may encounter is that the page we are viewing may depend on some data passed in from the last page, like in a typical “Master-Detail” pattern. You click on someones name, and then on the following page you can view more details about that person.

To do this, we can also make use of the segment property. You just need to specify the data you would like pass in preceeded by a : in the path. If we wanted to pass through an id for example:

@IonicPage({
    segment: 'second/:id'
})

We could then launch the “Second” page like this:

this.navCtrl.push('Second', {
  id: '4',
});

and then the id would be reflected in the URL:

http://localhost:8100/#/second/4

Now if we were to load that page directly via the URL, that id would still be available to us through NavParams as if we had pushed that data to the page. It’s important to note that this is currently limited to strings, you can not pass an entire object through like you can normally with NavParams.

Summary

This new version of deep linking is still quite new and theres probably a few features left to implement, but this is already a huge improvement and makes it much easier to integrate deep linking by default into an application.