loading...
Cover image for Ionic deeplink/universal link with Capacitor.

Ionic deeplink/universal link with Capacitor.

dotmarn profile image Kasim Ridwan ・2 min read

This article will assume you have already done the appropriate configurations for both android and ios but if you haven't then quickly check the steps here:

The code samples in this article will be strictly for Angular. Let's get started.

Open your app.component.ts file and import NgZone, Router from Angular, then App from Capacitor at the beginning of the file as seen below:

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { App } = Plugins;
Enter fullscreen mode Exit fullscreen mode

Then, add Router and NgZone to the constructor as seen below:

constructor(private router: Router, private zone: NgZone) {
    this.initializeApp();
}
Enter fullscreen mode Exit fullscreen mode

The next thing is to listen to the appUrlOpen event, and redirect when a deep link is found or matched.

initializeApp() {
    App.addListener('appUrlOpen', (data: any) => {
        this.zone.run(() => {
            // Example URL: https://example.com/signup?ref=1234           
            const slug = data.url.split("?")[0];
            if (slug == 'https://example.com/signup') {
                this.router.navigateByUrl('/signup');
            }
            // If there's no match do nothing
        });
    });
}
Enter fullscreen mode Exit fullscreen mode

From the snippet above, data.url contains the original link that was clicked. But there's need to know what URL was returned by the appUrlOpen event so as to be able to handle redirects to the appropriate screen within your app. So we split the URL into parts by using the ? as the point of separation:

data.url.split("?")
Enter fullscreen mode Exit fullscreen mode

The above line gives an array as seen below:

["http://example.com/signup", "ref=1234"]
Enter fullscreen mode Exit fullscreen mode

So we assign the item with the zero index to slug:

const slug = data.url.split("?")[0];
Enter fullscreen mode Exit fullscreen mode

Then check if it matches before performing a redirect:

if (slug == 'https://example.com/signup') {
     this.router.navigateByUrl('/signup');
}
Enter fullscreen mode Exit fullscreen mode

The cool part is that using this technique, you can have other URLs like https://example.com/reset-password which should take your users to the password reset screen within your app. To do this, modify your code like this:

  // URL 1: https://example.com/signup?ref=1234
 //  URL 2: https://example.com/reset-password?email=test@gmail.com   
       const slug = data.url.split("?")[0];
       if (slug == 'https://example.com/signup') {
            this.router.navigateByUrl('/signup');
       } 
       else if (slug == 'https://example.com/reset-password') {
            this.router.navigateByUrl('/reset');
       }
Enter fullscreen mode Exit fullscreen mode

Handling query params.

It is possible sometimes we are not just redirecting but we need to get the query params and use it within the app. Let's use the signup link https://example.com/signup?ref=1234 as an example. This can be done with the help of this regex expression which returns value of ref from the link:

    getQueryParams(params, url) {
        let reg = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
        let queryString = reg.exec(url);
        return queryString ? queryString[1] : null;
    };
Enter fullscreen mode Exit fullscreen mode

And we can use it like this:

let url = 'https://example.com/signup?ref=1234';
const params = this.getQueryParams('ref', url);
//params is 1234
Enter fullscreen mode Exit fullscreen mode

That's it!!! I hope you had fun reading and learning from the article to continue the conversation you can follow me on Twitter: @oluwasheyii

Gracias!!!

Discussion

pic
Editor guide