0

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.

rakitin
  • 1,569
  • 5
  • 17
  • 40

1 Answers1

1

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

Chetan Bansal
  • 1,216
  • 8
  • 15
  • Thanks @chetan-bansal - I do have this listener in my app. I'm confused about creating site association files for an app that doesn't have an accompanying website - is this an absolutely necessary step for deeplinking to work? The docs make some assumptions that don't apply to this situation and I'm trying to figure out what steps I need to take. – rakitin Sep 21 '20 at 14:18
  • In your question you talked about push notification too.. Deep linking and push notifications are two different things.. Push notifications appear in the notifications of the device when the app is installed.. Deep linking on the other hand is like a shareable URL. Now, firstly you cannot set up deep linking without site association file. It is absolutely critical.. Secondly, the push notifications plugin will not handle your deep links.. see my answer edit for deep linking.. – Chetan Bansal Sep 21 '20 at 14:53
  • thanks again @chetan-bansal. You answered my question that app association files will be required. And it looks like after doing those associations, I can use the Capacitor App Plugin in the PushNotificationActionPerformed listener to route appropriately. Will give it a shot – rakitin Sep 22 '20 at 14:52