DEV Community

Cover image for Ionic deeplink/universal link with Capacitor.
Ridwan Kasim
Ridwan Kasim

Posted on

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

Top comments (4)

Collapse
 
georges_mhanna_597ed526fa profile image
Georges Mhanna

Hello, im trying to set this up. However, im still building the app so I am on localhost.
In fact, it’s an angular app that we want to transform to native android using capacitor (running on localhost:4200)
A rest API (dotnet core) is running on localhost:8001.
Is it possible to have deeplinks working on a connected android tablet? Where do I need to put the assetlinks file ?

Collapse
 
dotmarn profile image
Ridwan Kasim

It should be in a directory accessible from your server.

Collapse
 
dotmarn profile image
Ridwan Kasim

After you place it there, ensure you were able to verify it before proceeding from here developers.google.com/digital-asse...

Collapse
 
alexcalispa profile image
alexCalispa

Disculpa, puse en practica tu ejemplo pero no redirecciona a la App, quizas me darias alguna ayuda extra , por favor.