Sunteți pe pagina 1din 19

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

Notifications Únete a nuestra comunidad en Slack. Unirme Búsqueda personalizada de Google Todo Hecho En Tutoriales

Búsqueda personalizada de Google

Búsqueda personalizada de Google

Ionic Push Noti cations

push demos native - November 08, 2017 por Nicolas Molina | Edita este Post.

ionic 3.3.0

ionic-native 3.10.3

ionic-app-scripts 1.3.7

cordova-cli 7.0.1

j

ionic-cli 3.3.0

Implementar el sistema de noti caciones push en una aplicación es una de las tareas más comunes y Ionic tiene un servicio que nos ahorra este trabajo.

y Ionic tiene un servicio que nos ahorra este trabajo.

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

Actualización (08/11/2017)

Ionic Push ya no será uno de los servicios de ionic, recomendamos manejas noti caciones con Firebase o OneSignal.

manejas noti caciones con Firebase o OneSignal. Aqui nuestros artículos respecto al tema: Ionic + OneSignal

Aqui nuestros artículos respecto al tema:

Ionic cuenta con un conjunto de servicios que tienen una gran integración con aplicaciónes hibridas. Se llama Ionic Cloud y ofrece varias herramientas que pueden potenciar las aplicaciónes:

varias herramientas que pueden potenciar las aplicaciónes:

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme En este artículo implementaremos el
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

En este artículo implementaremos el sistema Ionic Push + Ionic, pero primero revisaremos cómo funciona el sistema de noti caciones, con la siguiente grá ca:

el sistema de noti caciones, con la siguiente grá ca: Nota: GCM ahora es FCM Para

Nota: GCM ahora es FCM

Para enviar noti caciones Push a dispositivos Android y IOS debemos conectarnos al servicio de FCM (Firebase Cloud Message) de Android y a APNS (Apple Push Noti cation Service) de IOS, ellos son los que realmente hacen que la noti cación llegue al dispositivo. Para comunicarnos con FCM o APNS vamos a usar Ionic Push, el cual nos ahorra todo el trabajo de crear un servicio que se comunique con FCM o APNS.

Paso 1: Iniciando el proyecto

Lo primero que haremos será iniciar un nuevo proyecto con ionic, vamos a nuestra terminal y ejecutamos:

d
d

ionic start demo110 tabs

16/5/2018

Ionic Push Notifications

Ahora entramos a la carpeta del proyecto desde nuestra terminal con: Únete a nuestra comunidad
Ahora entramos a la carpeta del proyecto desde nuestra terminal con:
Únete a nuestra comunidad en Slack.
Unirme
d
cd demo110

Como iniciamos nuestro proyecto con el template tabs tendremos una estructura básica del proyecto, la carpeta en la que vamos a trabajar sera app.

Luego agregamos la plataforma para las que vamos a desarrollar:

ionic platform add androidagregamos la plataforma para las que vamos a desarrollar: Paso 2: Crear una cuenta en ionic.io

Paso 2: Crear una cuenta en ionic.io

Ahora debemos crear una cuenta en ionic.io, para poder usar Ionic Push.

crear una cuenta en ionic.io , para poder usar Ionic Push. Paso 3: Instalar Ionic Cloud.

Paso 3: Instalar Ionic Cloud.

Luego de crear la cuenta en Ionic.io, debemos implementar la librería para empezar a usar cualquier servicio de Ionic Cloud. Así que vamos a nuestra terminal y ejecutamos:

d
d

npm install @ionic/cloud-angular --save

Luego debemos conectar nuestro usuario de ionic.io con la aplicación, así:

d
d

ionic login

16/5/2018

Ionic Push Notifications

Luego, debemos crear nuestra aplicación en ionic.io, lo podemos hacer con: Únete a nuestra comunidad
Luego, debemos crear nuestra aplicación en ionic.io, lo podemos hacer con:
Únete a nuestra comunidad en Slack.
Unirme
d
ionic link

Esto genera un ID para la aplicación, que lo encontramos en ionic.config.json , ahora debemos agregar ionic cloud a los módulos de la aplicación en

src/app/app.module.ts , así:

e
e

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = { 'core': { 'app_id': 'APP_ID'

};

}

@NgModule({

imports: [

CloudModule.forRoot(cloudSettings)

],

}) export class AppModule {}

Si todo quedo bien dentro de la cuenta de ionic.io debe mostrar la aplicación creada, así:

cuenta de ionic.io debe mostrar la aplicación creada, así: ¿ Te gusta este articulo ? No

¿ Te gusta este articulo ? No te pierdas ninguna actualización uniendote al newsletter.

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme Me quiero unir.
Únete a nuestra comunidad en Slack.
Unirme
Me quiero unir.

Paso 4: Generar tus llaves en Firebase

Ahora para enviar mensajería para Android debemos generar las siguientes llaves:

Server keypara Android debemos generar las siguientes llaves: Sender ID Estas llaves se generan desde

Sender IDAndroid debemos generar las siguientes llaves: Server key Estas llaves se generan desde rebase.google.com, donde

Estas llaves se generan desde rebase.google.com, donde debemos crear un proyecto y luego ir a la página de Setting > Cloud Messaging, así:

ir a la página de Setting > Cloud Messaging , así: Ahora estas credenciales debemos adjuntarlas

Ahora estas credenciales debemos adjuntarlas en la plataforma de ionic.io, seleccionar la aplicación y luego ir a Setting > Certi cates, así:

y luego ir a Setting > Certi cates , así:

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme Luego debemos crear un per
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

Luego debemos crear un per l de seguridad:

Slack. Unirme Luego debemos crear un per l de seguridad: Y por último editamos el per

Y por último editamos el per l de seguridad creado y en la sección de Android agregamos nuestra FCM Server Key:

la sección de Android agregamos nuestra FCM Server Key :

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

Ahora debemos instalar el plugin que nos permite enviar y recibir noti caciones desde la aplicación con ionic.

d
d

ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=your_sender_id --save

Además debemos añadir la con guración de noti caciones en

src/app/app.module.ts , así:

e
e

const cloudSettings: CloudSettings = { core: { app_id: '20c91c51'

}, push: { sender_id: '564553849534', pluginConfig: { ios: { badge: true, sound: true

}, android: { iconColor: '#343434', forceShow: true

}

};

}

}

iconColor : '#343434' , forceShow : true } }; } } La variable forceShow debe estar

La variable forceShow debe estar en true en android si queremos que la noti cación se muestre cuando al app en primer plano o segundo plano, es decir cuando la app este abierta o cerrada.

Nota: Hay varias opciones que se pueden con gurar como el sonido, icono etc, para ver todas las opciones revisar la documentación o cial de Ionic Push

Paso 6: Escuchando noti caciones.

Ahora debemos registrar el PushToken de cada dispositivo, el PushToken es un identi cador único de cada dispositivo y debemos obtenerlo y luego registrarlo en ionic.io. Para esto crearemos el método registerToken en app.component.ts , así:

e
e

import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { Push, PushToken

16/5/2018

Ionic Push Notifications

} from '@ionic/cloud-angular' ;

} from '@ionic/cloud-angular';

Únete a nuestra comunidad en Slack.

@Component({ templateUrl: 'app.html'

 

}) export class MyApp { rootPage = 'TabsPage';

 

constructor( public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public push: Push { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); this.registerToken(); this.getNotifications(); });

)

 

}

private registerToken(){ this.push.register().then((t: PushToken) => { return this.push.saveToken(t,{ ignore_user: true }); }).then((t: PushToken) => { console.log('Token saved:', t.token); });

 

}

private getNotifications(){ this.push.rx.notification() .subscribe((msg) => { alert(msg.title + ': ' + msg.text); });

 

}

}

Finalmente para recibir y controlar noti caciones, puedes agregar el método getNotifications en el lugar que se necesite, puede ser en HomePage de la aplicación luego que el usuario ingrese o desde el inicio en app.component.ts :

e
e

private getNotifications(){ this.push.rx.notification() .subscribe((msg) => { alert(msg.title + ': ' + msg.text); });

}

Paso 7: Enviando noti caciones

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

Primero vamos a la sección de Push:

en Slack. Unirme Primero vamos a la sección de Push: Luego creamos los detalles de nuestro

Luego creamos los detalles de nuestro aplicacion, como mensaje, título, sonido etc.

de nuestro aplicacion, como mensaje, título, sonido etc. Luego seleccionamos los usuarios a los que queremos

Luego seleccionamos los usuarios a los que queremos que llegue la noti cación.

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme Nota: Puedes usar el servicio
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

Nota: Puedes usar el servicio de Ionic Auth + Ionic Push para así registrar a los usuarios y así poder organizarlos en grupos y poder enviar noti caciones segmentadas.

Luego seleccionamos el per l de seguridad y enviamos.

Luego seleccionamos el per l de seguridad y enviamos. Resultado:

Resultado:

el per l de seguridad y enviamos. Resultado:

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme Nota: Este demo solo funciona
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme

Nota: Este demo solo funciona desde el dispositivo o emulador.

Recuerda:

j

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

ejecutar

d
d

npm install

esto es para descargar todas las dependencias del proyecto.

Te ha gustado el Post? No te olvides dejarnos una Cali cación en Facebook y darle Like al Facebook Page. Espero sea de utilidad y sigan programando :)

¡Compártelo!

64 Comentarios

1

Acceder

Recomendar

3
3

Compartir

Ordenar por los mejores

Únete a la conversación Recomendar 3 ⤤ Compartir Ordenar por los mejores I N I C I A R

Compartir Ordenar por los mejores Únete a la conversación I N I C I A R

INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS

?
?

Nombre

si se pudo revisar el post

1

Responder

Compartir ›

1

Responder

Compartir ›

Artículos relacionados:

• Responder • Compartir › Artículos relacionados:

16/5/2018

Ionic Push Notifications

16/5/2018 Ionic Push Notifications Únete a nuestra comunidad en Slack. Unirme Push Noti cations para IOS
Únete a nuestra comunidad en Slack. Unirme
Únete a nuestra comunidad en Slack.
Unirme
comunidad en Slack. Unirme Push Noti cations para IOS Ionic + OneSignal = PushNoti cation Awesome
IOS Ionic + OneSignal = PushNoti cation Awesome Easy Formularios en Ionic

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme r Únete a nuestro canal de slack y
Únete a nuestra comunidad en Slack.
Unirme
r
Únete a nuestro canal de slack y podras interactuar con toda la
comunidad hispana en ionic.
Unete

juan@tu-empresa.com

la comunidad hispana en ionic. Unete juan@tu-empresa.com Somos un pequeño pedazo del Internet empoderado por la

Somos un pequeño pedazo del Internet empoderado por la Comunidad de Ionic en Español. Aprende a crear apps con HTML, CSS y Javascript con nuestros Tutoriales, Libro, Slack y Publicaciones.

16/5/2018

Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Únete a nuestra comunidad en Slack.

i k r m w
i
k
r
m
w