CODEWITHSUNDEEP
react-nativeapple-push-notifications
tsaebeht
tsaebeht

Reputation: 1680

How to make notification clicks on apple devices redirect to links?

I am successfully able to send APNs to apple devices. I have coded up my app in react native. When someone clicks on the notification, I want to redirect them to a deep link I have configured my app to recognise - ne://page/id via deep linking, I don't need help with that. How do I redirect a notification click to a link ?

I have tried everything from my end. I looked at the official documentation here - it saysn nothing about urls and redirection - https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server/generating_a_remote_notification

Moreover, I have using the apn-node library to send notifications via my server. Their notification docs have no url option, just something called urlArgs.

Upvotes: 7

Views: 2447

Answers (2)

kishore kingmaker
kishore kingmaker

Reputation: 476

For Further reference, after my response You can refer https://medium.com/@stasost/ios-how-to-open-deep-links-notifications-and-shortcuts-253fb38e1696 .

When the app is closed or running on the background more, tapping on the notification banner will trigger didReceiveRemoteNotification appDelegate method:

    func application(_ application: UIApplication, 
didReceiveRemoteNotification userInfo: [AnyHashable : Any], 
fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {

    }

This method will also be triggered when the app received a push notification while it is running in the foreground mode. Because we only considering the scenarios when you want to open the app on the certain page, we will not cover handling notifications in the foreground mode.

To handle the Notifications we will create a NotificationParser:

class NotificationParser {
   static let shared = NotificationParser()
   private init() { }
   func handleNotification(_ userInfo: [AnyHashable : Any]) -> DeeplinkType? {
      return nil
   }
}

Now we can connect this method to the Deeplink Manager:

func handleRemoteNotification(_ notification: [AnyHashable: Any]) {
   deeplinkType =                       NotificationParser.shared.handleNotification(notification)
}

And complete the appDelegate didReceiveRemoteNotification method:

func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
   Deeplinker.handleRemoteNotification(userInfo)
}

The last step is to finish the parsing method in the NotificationParser. This will depend on your notification structure, but the basic parsing technic will be similar:

func handleNotification(_ userInfo: [AnyHashable : Any]) -> DeeplinkType? {
   if let data = userInfo["data"] as? [String: Any] {
      if let messageId = data["messageId"] as? String {
         return DeeplinkType.messages(.details(id: messageId))
      }
   }
   return nil
}

If you configured the app to support the push notifications and want to test it, here is the notification I am using to deliver a message:

apns: {
    aps: {
        alert: {
            title: "New Message!",
            subtitle: "",
            body: "Hello!"
        },
        "mutable-content": 0,
        category: "pusher"
    },
    data: {
        "messageId": "1"
    }
}

Upvotes: 1

Shahrukh Alam
Shahrukh Alam

Reputation: 194

  • set URL in the payload object of node-apn like this:
notification.payload = {
  url: "https://www.google.com"
}

  • parse the URL from the userInfo object in didReceiveRemoteNotification delegate method of AppDelegate

  • Open the URL in an in-App WebView or Safari

Upvotes: 1

Related Questions