How to open app + specific url from a push notification in Ionic 5?

Issue

I'm developing an app with ionic 5 (react) and capacitor.js. I have a handler for performing a task when I receive a push notification and take an action (currently I'm just logging out the data). What I need to happen in this handler is to route the user to a specific route in the app e.g. myapp/my-movies/:movie-id. Originally I thought I'd need to use a plugin to support universal links, but now I'm questioning that mainly because we aren't launching to production a corresponding web/pwa application, and my understanding is that a universal link is one that ties a website URL to an app-specific URI Scheme & Route (from this helpful SO post). I'm also reading that universal links are a forced replacement for custom uri schemes, and the more I read, the less clear this becomes.

So my question is, How can I route to an specific, authenticated uri in my app from an event handler in a push notification? (assuming its installed) Can this be accomplished using a plugin like the capacitor.js deeplinks or ionic/native ? It looks like I'll need to create "a two-way association between your website and app", but like I mentioned, we don't have an accompanying website for this app.

Solution

Referring the official plugin docs, You should have this handler implemented in your app.

Whenever the user taps on a push notification, while the app is closed, this listener will be fired. Inside this you can route to the specific page.

Additionally, you will have to add payload in your push notification that is being sent from your server. That payload can be read inside the listener. Based on that, your app can decide where should it navigate.

Example

PushNotifications.addListener('pushNotificationActionPerformed',
  (res: PushNotificationActionPerformed) => {
    this.zone.run(() => {
      console.log(res);
      if (res.notification.data && res.notification.data.value) {
        //assuming your payload has a key 'value'
        this.navigateToMyMovies(res.notification.data.value);
      }
    })
  });

UPDATE:-

For handling deep links, push notifications plugin will not handle that.. You will have to use Capacitor App Plugin for that purpose. Specifically this code..

App.addListener('appUrlOpen', (data: any) => {
   console.log('App opened with URL: ' +  data.url);
});

Personally, after toiling hard with deep links in capacitor, I went on to implement Firebase Dynamic links which work even if the app is not installed on the device.

But still, app association files will be required..

Answered By - Chetan Bansal