CODEWITHSUNDEEP
androidionic-frameworkandroid-notificationslocalnotification
UIB
UIB

Reputation: 113

Open a specific page on local notification click Ionic

I am trying to open my app when the user click on a local notification and want to open a specific page depending on that. Given below is my sample code but it doesn't redirect to the page which I given.

platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
          this.localNotification.on('click', (event, notification, state) => {     
              this.isNotification = true;
              console.log(this.isNotification);
              this.notificationData = notification;
          });
      setTimeout(()=>{
        splashScreen.hide();  
      },500);
      statusBar.styleDefault();
      this.pushSettings();
      if (localStorage.getItem("email")) {
        if (localStorage.getItem("userName")) {
          this.rootPage = TabstorePage
        } else {
          console.log(this.isNotification);
          if(this.isNotification == true){
            console.log("SalePage");
            this.rootPage = SalePage
          }else{
            console.log("TabsPage");
            this.rootPage = TabsPage
          }
        }
      } else {
        this.rootPage = LoginPage
      }
    });
  }

Upvotes: 2

Views: 2279

Answers (3)

starterProgrammer
starterProgrammer

Reputation: 300

In Ionic 7 i had the same issue, when i click on notification does not open Specific Route...

My Solution:

in app.component.ts

constructor(private localNotifications: LocalNotifications, private fcm:FCM){
   
 this.initializeApp();

}

 

 // Notification FCm SetUp 
  push_type
  order_id
  link_id;
  image_url;
  private async initializeApp() {

    this.platform.ready().then(() => {
      this.fcm.onNotification().subscribe((payload) => {
        this.push_type = JSON.parse(payload['data']).push_type;
        this.order_id = JSON.parse(payload['data']).order_id;
        this.link_id = JSON.parse(payload['data']).push_route
        this.image_url = JSON.parse(payload['data']).image;

        // console.log('on nitification', payload)
        console.log("Received in background -> ", JSON.stringify(payload));
        console.log("ID " + this.link_id);
        console.log("order_id " + this.order_id);
        console.log("push_type " + this.push_type);
        console.log("image_url " + this.image_url);

        if (payload.wasTapped) {
          switch (this.push_type) {
            case 'product': {
              this.router.navigate(['/product', { id: this.link_id }]);
              break;
            }
            case 'category': {
              this.router.navigate(['category/subcategoryproduct', { category_id: this.link_id, name: 'subcategry' }]);
              break;
            }
            case 'promo':
            case 'alert': {
              this.router.navigate(['notifications/sub-notif'], { queryParams: { selected: this.push_type } })
              break;
            }
            default: {
              this.router.navigateByUrl("notifications");
              break;
            }
          }

        } else {
          console.log("Received in foreground -> ", payload);
          // console.log(JSON.parse(payload['data']));



          this.localNotifications.schedule({
            id: 1,
            text: payload['body'],
            title: payload['title'],
            foreground: true,
            // actions: [{ id: 'open', title: 'Open Notification' }],
            smallIcon: payload['image'],
            // icon: payload['image'],
            data: { secret: 'key' },
            // launch: true,
            priority: 2,
            led: { color: '#FF00FF', on: 500, off: 500 }
          });

          this.localNotifications.on('click').subscribe(() => {

            switch (this.push_type) {
              case 'product': {
                this.router.navigate(['/product', { id: this.link_id }]);
                break;
              }
              case 'category': {
                this.router.navigate(['category/subcategoryproduct', { category_id: this.link_id, name: 'subcategry' }]);
                break;
              }
              case 'promo':
              case 'alert': {
                this.router.navigate(['notifications/sub-notif'], { queryParams: { selected: this.push_type } })
                break;
              }
              default: {
                this.router.navigateByUrl("notifications");
                break;
              }
            }
            // console.log('Local Notification Tapped With Notification Type', this.notification_type);

          })
        }
      })
    })

  }

It Worked For me, Hope it will Help :)

Upvotes: 0

wobsoriano
wobsoriano

Reputation: 13472

For Capacitor users there is a localNotificationActionPerformed event:

LocalNotifications.addListener('localNotificationActionPerformed', (payload) => {
      // Redirect here
});

I use it like this:

LocalNotifications.schedule({
    notifications: [
      {
        id: 1,
        title: 'Hello',
        body: 'World',
        extra: {
          route: '/whatever',
        },
      },
    ],
});

LocalNotifications.addListener('localNotificationActionPerformed', (payload) => {
      const route = payload.notification.extra.route;
      // use route to redirect
});

Upvotes: 3

Jeisson
Jeisson

Reputation: 21

I have to face same problem, this is my approach.

In app commponents, in initializeApp() call to a service funtion that subscribe to observable like this:

initializeApp(){//in app components
...
this.localnotification.initHandler();//call to function in service

this is in localnotification service

initHandler(){
this.localNotifications.on("click").subscribe(res =>{
  console.log(res);
  if (res.data.redirect != null && res.data.redirect != undefined){
    //make redirect to place you want
  }
});

I hope that be useful to someone.

Upvotes: 2

Related Questions