CODEWITHSUNDEEP
ionic-frameworkpush-notificationionic3onesignal
publicator
publicator

Reputation: 75

Ionic 3 OneSignal Push Notification Click Open Page

I use OneSignal Push Notification for Ionic 3 . I want to when click notification application open page.

My app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { OneSignal } from '@ionic-native/onesignal';


import { DuyurularPage } from '../pages/duyurular/duyurular';

@Component({
 templateUrl: 'app.html',
 providers:[OneSignal],
 template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'

})
export class MyApp {
 rootPage:any = 'MenuPage';
 bgColor: string = '#fff';
 @ViewChild('myNav') nav: NavController;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen, private oneSignal: OneSignal,) {
  platform.ready().then(() => {

   statusBar.styleDefault();
   splashScreen.hide();

   window["plugins"].OneSignal
  .startInit("**************", "***********")
  .handleNotificationOpened()
  .handleNotificationReceived()
  .endInit();
  });

  this.oneSignal.handleNotificationOpened().subscribe((jsonData) => {
   alert(JSON.stringify(jsonData));
   this.nav.push(DuyurularPage);
  });
  this.oneSignal.handleNotificationReceived().subscribe((jsonData) => 
  {
   alert(JSON.stringify(jsonData));
   this.nav.push(DuyurularPage);
  });
 }

}

When I do mistake I don' t know. Notification coming but not show alert or not push DuyurularPage, just open homepage.

Upvotes: 0

Views: 4411

Answers (3)

Mohamed Arshath
Mohamed Arshath

Reputation: 423

if you Need to Open a Specific page on Notification Tapped. Follow the technique. In App.component.ts

          this.oneSignal.handleNotificationOpened().subscribe((data) => {
            // do something when a notification is opened
            console.log('Tapped',data);
             if(data.notification.payload.additionalData.landing_page != undefined && data.notification.payload.additionalData.landing_page != ''){
               this.PushProvider.landing_page = data.notification.payload.additionalData.landing_page;
             }
             if(data.notification.payload.additionalData.product_id != undefined && data.notification.payload.additionalData.product_id != ''){
               this.PushProvider.product_id = data.notification.payload.additionalData.product_id;
             } 
          });
          this.oneSignal.endInit();

//On Home Page

  if(this.PushProvider.landing_page != undefined){
      console.log('on home if',this.PushProvider.landing_page);
      this.navCtrl.push('offerzonePage',{ from_tab: this.PushProvider.landing_page});
    }
    if(this.PushProvider.product_id != undefined){
      console.log('on home if',this.PushProvider.product_id);
      this.navCtrl.push('ProductPage',{ product_id: this.PushProvider.product_id });
    }

On Pushprovicer.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class PushProvider {


   // Produc ID
   product_id: any;

   // Landing pages
   landing_page: any;

}

Upvotes: 1

user1027620
user1027620

Reputation: 2785

What I would do is create an obsevable and subscribe to it anywhere needed in my app. The observable will emit its next value whenever the plugin callback is fired.

  • RxJS Observable
  • Emit next value on callback
  • Subscribe anywhere in your app
  • Use provided NavCtrl to push a component into the view

The same principle would work if you inject ionic's Event.

Btw you have a random comma at the end of your constructor

Upvotes: 0

HexaCrop
HexaCrop

Reputation: 4263

can you use the below syntax and try;

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { OneSignal } from '@ionic-native/onesignal';


import { DuyurularPage } from '../pages/duyurular/duyurular';

@Component({
 templateUrl: 'app.html',
 providers:[OneSignal],
 template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'

})
export class MyApp {
 rootPage:any = 'MenuPage';
 bgColor: string = '#fff';
 @ViewChild('myNav') nav: NavController;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
SplashScreen, private oneSignal: OneSignal,) {
  platform.ready().then(() => {

   statusBar.styleDefault();
   splashScreen.hide();

  this.oneSignal.startInit('*****', '***');
  this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);

  this.oneSignal.handleNotificationOpened().subscribe((jsonData) => {
   alert(JSON.stringify(jsonData));
   this.nav.push(DuyurularPage);
  });
  this.oneSignal.handleNotificationReceived().subscribe((jsonData) => 
  {
   alert(JSON.stringify(jsonData));

  });
 }

You cannot use NavController in app.component.ts it seems.

Can you use Nav or App

Upvotes: 0

Related Questions