Push Notifications en ionic

by @nicobytes

¿Qué vamos a ver? 

- Módulo 1: Presentación

- Módulo 2: Introducción

- Módulo 3: Implementación para Android

- Módulo 4: Implementación para IOS

- Módulo 5: Administración de push

 

PARTE 1: Introducción

¿Qué son las push notifications?

¿Qué son las push notifications?

¿Cómo funcionan?

¿CÓMO FUNCIONAN?

Proveedores

PARTE 2: IMPLEMENTACIÓN para android

CONFIGURACIÓN ONESIGNAL

configuración onesignal

configuración onesignal

configuración onesignal

configuración onesignal

configuración onesignal

configuración onesignal

configuración ionic

configuración ionic

// 1. Create project
ionic start app301 blank
// 2. inside
cd demo301
// 3. add android
ionic cordova platform add android
// 4. add plugin
ionic cordova plugin add onesignal-cordova-plugin
npm install --save @ionic-native/onesignal

configuración ionic

...
import { OneSignal } from '@ionic-native/onesignal';
...

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    OneSignal,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

configuración ionic

export class MyApp {
  rootPage:any = 'HomePage';

  constructor(
    private platform: Platform,
    private statusBar: StatusBar,
    private splashScreen: SplashScreen,
    private oneSignal: OneSignal
  ) {
    this.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.statusBar.styleDefault();
      this.splashScreen.hide();
      this.handlerNotifications();
    });
  }

  private handlerNotifications(){
    // code
  }
}

configuración ionic

private handlerNotifications(){
  this.oneSignal.startInit('app id', 'sender id');

  this.oneSignal.handleNotificationOpened()
  .subscribe(jsonData => {
    let alert = this.alertCtrl.create({
      title: jsonData.notification.payload.title,
      subTitle: jsonData.notification.payload.body,
      buttons: ['OK']
    });
    alert.present();
    console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
  });
  this.oneSignal.endInit();
}

configuración ionic

ionic cordova build android --prod
ionic cordova run android --prod

send notification

SEND NOTIFICATION

PARTE 3: IMPLEMENTACIÓN PARA IOS

Crear ID

PARTE 4: Administración de push

gracias...

Push Notifications with Ionic

By Nicolas Molina

Push Notifications with Ionic

Implementar Push Notifications + Ionic con OneSignal

  • 2,217