16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Búsqueda personalizada de Google

Todo Hecho En Tutoriales Noticias Tips

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 ionic-cli 3.3.0

j
Ver código

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.

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 1/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

¿Qué tal lo estamos haciendo? Tomate 10 segundos en contestar una pregunta :)

Ir a la pregunta

Actualización (08/11/2017)

Ionic Push ya no será uno de los servicios de ionic, recomendamos manejas

noti caciones con Firebase o OneSignal.

Aqui nuestros artículos respecto al tema:

Ionic + OneSignal = PushNoti cation Awesome Easy.

Push Noti cations para IOS.

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:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 2/19
16/5/2018 Ionic Push Notifications

Ú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:

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
ionic start demo110 tabs

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 3/19
16/5/2018 Ionic Push Notifications

Ahora entramos a la carpeta dela nuestra

Únete proyecto desdeennuestra
comunidad Slack. terminal
Unirme con:
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:

d
ionic platform add android

Paso 2: Crear una cuenta en ionic.io

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

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
npm install @ionic/cloud-angular --save

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

d
ionic login

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 4/19
16/5/2018 Ionic Push Notifications

Luego, debemos crear nuestra

Únete aplicación en ionic.io,
a nuestra comunidad en Slack.lo podemos
Unirme hacer con:
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
...
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í:

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

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 5/19
16/5/2018 Ionic Push Notifications

Ú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 key
Sender ID

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í:

Ahora estas credenciales debemos adjuntarlas en la plataforma de ionic.io,

seleccionar la aplicación y luego ir a Setting > Certi cates, así:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 6/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Luego debemos crear un per l de seguridad:

Y por último editamos el per l de seguridad creado y en la sección de Android

agregamos nuestra FCM Server Key:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 7/19
16/5/2018 Ionic Push Notifications

Paso 5: Instalar Plugin Push

Únete a nuestra comunidad en Slack. Unirme

Ahora debemos instalar el plugin que nos permite enviar y recibir noti caciones
desde la aplicación con ionic.
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
const cloudSettings: CloudSettings = {
core: {
app_id: '20c91c51'
},
push: {
sender_id: '564553849534',
pluginConfig: {
ios: {
badge: true,
sound: true
},
android: {
iconColor: '#343434',
forceShow: true
}
}
}
};

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
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
https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 8/19
16/5/2018 Ionic Push Notifications

} from '@ionic/cloud-angular';
Únete a nuestra comunidad en Slack. Unirme
@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
private getNotifications(){
this.push.rx.notification()
.subscribe((msg) => {
alert(msg.title + ': ' + msg.text);
});
}

Paso 7: Enviando noti caciones

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 9/19
16/5/2018 Ionic Push Notifications

Ahora para enviar noti caciones podemos

Únete a nuestra usaren
comunidad laSlack.
plataforma de ionic.io y probar que
Unirme
recibimos una noti cación en la aplicación.

Primero vamos a la sección de Push:

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

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

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 10/19
16/5/2018 Ionic Push Notifications

Ú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.

Resultado:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 11/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 12/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 13/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 14/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

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

j
Ver código

Recuerda:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 15/19
16/5/2018 Ionic Push Notifications

Si quieres ejecutar este demoÚnete

en tua nuestra
computadora, debes
comunidad tener el
en Slack. entorno de ionic instalado y
Unirme
luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego
ejecutar
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 :)

Por: Nicolas Molina

¡Compártelo!

64 Comentarios Ng-Classroom 
1 Acceder

Ordenar por los mejores

 Recomendar 3 ⤤ Compartir

Únete a la conversación...

INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?

Nombre

Jonathan David Espitia Rivera • hace un año

si se pudo revisar el post
1△ ▽ • Responder • Compartir ›

Jonathan David Espitia Rivera • hace un año

mira https://gist.github.com/Sha...
1△ ▽ • Responder • Compartir ›
Artículos relacionados:

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 16/19
16/5/2018 Ionic Push Notifications

Únete a nuestra comunidad en Slack. Unirme

Push Noti cations para IOS

Ionic + OneSignal = PushNoti cation Awesome Easy

Formularios en Ionic
https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 17/19
16/5/2018 Ionic Push Notifications

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

Unete

juan@tu-empresa.com

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.

Inicio
Cursos
Autores
Meetups
Organizadores
Podcast
Foro

Jobs
https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 18/19
16/5/2018 Ionic Push Notifications
Jobs
Codigo de Conducta Únete a nuestra comunidad en Slack. Unirme

i k r m w

https://blog.ng-classroom.com/blog/ionic2/ionic-push-notifications/ 19/19