Blog

Guía completa para implementar Ionic Push en nuestras Apps

Introducción

La gente de Ionic se encuentra desde hace tiempo trabajando duro para brindarnos siempre buenas alternativas a la hora de desarrollar aplicaciones híbridas con un ecosistema de posiblidades asombrosas, las cuales podríamos aprovechar para desarrollar apps muy similares a las nativas.

Hace un tiempo que vengo experimentando y fastidiandome con el tema de las notificaciones push, siendo hoy en día una característica muy demandada en el mercado, luego de probar varios servicios decidí intentar implementar Ionic Push para mis apps, que justamente están hechas con Ionic.

Me ha tomado un tiempo y dolor de cabeza lograr hacerlo andar, si bien Ionic se caracteriza por tener una buena documentación hemos recibido actualizaciones de ambos lados tanto Ionic como las plataformas de mensajería push de Apple y Google, y esta documentación no está del todo actualizada y ni hablar del idioma.

Requisitos previos

  • Ionic Cloud instalado y configurado.
  • Un dispositivo físico Android o iOS, hay que tener en cuenta que no funcionan las notificaciones push en simuladores.
  • Un Perfil de Seguridad (como lo llama Ionic) con sus respectivas credenciales, aquí esta la diferencia con la documentación de Ionic Push y que tantos dolores de cabeza nos puede producir con el tedioso error GCM_INVALID_AUTH (Google ha dejado de utilizar GCM  para migrar a Firebase). Necesitaremos el ID del remitente y un API Key de Firebase, mientras que para Apple necesitamos un Certificado Push.

Instalación

Plugin de Push

Utilizaremos el plugin Push de Phonegap para recibir notificaciones push nativas en dispositivos iOS y Android. Al instalar el plugin, es necesario suministrar una variable ID del remitente (SENDER_ID), que es el equivalente a número de proyecto GCM en la documentación de Ionic Cloud.

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=12341234 --save

Configuración de Ionic Cloud

También es necesario que agregemos el ID del Remitente que obtuvimos en la creación del proyecto en Firebase. Además, podemos agregar configuraciones que tiene el plugin de push de Phonegap.

.config(function($ionicCloudProvider) {
  $ionicCloudProvider.init({
    "core": {
      "app_id": "APP_ID"
    },
    "push": {
      "sender_id": "SENDER_ID",
      "pluginConfig": {
        "ios": {
          "badge": true,
          "sound": true
        },
        "android": {
          "iconColor": "#343434"
        }
      }
    }
  });
})

Implementación Ionic Push

Especificamos ionic.cloud como una dependencia para su módulo. Esto nos dará acceso a $ionicPush.

angular.module('myapp.controllers', ['ionic.cloud'])

.controller('MyCtrl', function($scope, $ionicPush) {
  ...
})

Manipulación del Token del dispositivo

Antes de que un dispositivo pueda recibir notificaciones push nativas, debe estar registrado en Ionic Cloud. Desde Ionic se recomienda llamar a la función de register() cada vez que se abre la aplicación para que el dispositivo siempre se encuentre registrado y listo para recibir las notificaciones, recordemos que esta acción tiene que ejecutarse una vez que el dispositivo está listo.

$ionicPlatform.ready(function() {
  $ionicPush.register().then(function(t) {
    return $ionicPush.saveToken(t);
  }).then(function(t) {
    console.log('Token saved:', t.token);
  });
});

Almacenamos el token dispositivo generado con el usuario actual. Si usted no quiere que ellos se asocien, se puede pasar la opción ignorar usuario ignore_user. Se pueden ver los documentos de la API saveToken() para obtener más información.

Sería una buena idea almacenar de manera local una variable en la cual el usuario pueda configurar si desea recibir notificaciones. Se puede anular el registro de un dispositivo llamando a la función el unregister().

Manipulación de Notificaciones

Para manejar las notificaciones push en la aplicación, es necesario escuchar al evento cloud:push:notification usando el método $on de AngularJS.

$scope.$on('cloud:push:notification', function(event, data) {
  var msg = data.message;
  alert(msg.title + ': ' + msg.text);
});

Enviar Notificaciones Puh

Se pueden crear notificaciones desde el Panel de Control de la App, dirigiéndose a Push > Nueva notificación (New Notificación).

También podemos utilizar los endpoints de la API de Ionic Cloud para crear notificaciones push.

No comments
Gabriel FiocchiGuía completa para implementar Ionic Push en nuestras Apps

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *