Ionic deeplink/universal link with Capacitor.

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;

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

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

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

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("?")

The above line gives an array as seen below:

["http://example.com/signup", "ref=1234"]

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

const slug = data.url.split("?")[0];

Then check if it matches before performing a redirect:

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

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

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

And we can use it like this:

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

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!!!