Menu

Ionic Push Notifications

pushdemosionic2native - January 30, 2017 por Nicolas Molina
ionic2.0.0ionic-native2.4.1

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

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:

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

Nota: GCM ahora es FCM

Para enviar notificaciones Push a dispositivos Android y IOS debemos conectarnos al servicio de FCM (Firebase Cloud Message) de Android y a APNS (Apple Push Notification Service) de IOS, ellos son los que realmente hacen que la notificació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, si no lo recuerdas puedes ver esto con mas detalle en la Introduccion a Ionic 2. Vamos a nuestra terminal y ejecutamos:

ionic start demo110 blank --v2

Ahora entramos a la carpeta del proyecto desde nuestra terminal con:

cd demo110

Como iniciamos nuestro proyecto con el template blank 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 android
ionic platform add ios

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:

npm install @ionic/cloud-angular --save

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

ionic io init

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

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

@NgModule({
  ...
  imports: [
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings)
  ],
  ...
})
export class AppModule {}

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

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 firebase.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 > Certificates, así:

Luego debemos crear un perfil de seguridad:

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

Paso 5: Instalar Plugin Push

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

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

Además debemos añadir la configuración de notificaciones en src/app/app.module.ts, así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID',
  },
  'push': {
    'sender_id': 'SENDER_ID',
    'pluginConfig': {
      'ios': {
        'badge': true,
        'sound': true
      },
      'android': {
        'iconColor': '#343434'
      }
    }
  }
};

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

Paso 6: Escuchando notificaciones.

Ahora debemos registrar el PushToken de cada dispositivo, el PushToken es un identificador ú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í:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
....
import {
  Push,
  PushToken
} from '@ionic/cloud-angular';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;

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

  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);
    });
  }
}

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

1
2
3
4
this.push.rx.notification()
.subscribe((msg) => {
  alert(msg.title + ': ' + msg.text);
});

Paso 7: Enviando notificaciones

Ahora para enviar notificaciones podemos usar la plataforma de ionic.io y probar que recibimos una notificació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 notificación.

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 notificaciones segmentadas.

Luego seleccionamos el perfil de seguridad y enviamos.

Resultado:


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

Ver demo

¿Quieres saber más? Suscríbete a nuestro Newsletter o únete a nuestro canal en Slack y mantente atento. Espero sea de utilidad y sigan programando :)

Por: Nicolas Molina

¡Compártelo!

Nunca te pierdas una Noticia.