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.

En la guía utilizaremos un proyecto nuevo de las plantillas de Ionic pero tranquilamente podrán adaptar las instrucciones a un proyecto ya existente, recuerden siempre hacer una actualización de Ionic.

ionic start devIonicPush blank
$ cd devIonicPush

Ionic Cloud nos permite interactuar nuestra aplicación con los servicios que nos proveen, en este caso utilizaremos el de Push.

$ npm install @ionic/cloud --save

Una vez instalado, tenemos que copiar el archivo de JavaScript ionic.cloud.min.js en el directorio www/lib de la aplicación:

cp node_modules/@ionic/cloud/dist/bundle/ionic.cloud.min.js www/lib

A continuación, tenemos que incluirlo en el index.html de su proyecto después del archivo ionic.bundle.js, por ejemplo:

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Promise no tiene soporte universalmente, lo podemos usar en iOS Safari y Android 4.4.4+ (caniuse.com). Si necesitamos brindar soporte a dispositivos que no ofrecen Promise de forma nativa, tenemos alternativas como bluebird que puede ser instalado e incluirlo antes de Ionic.

npm install bluebird --save
$ cp node_modules/bluebird/js/browser/bluebird.min.js www/lib

Así quedaría el código en nuestro index.html:

<script src="lib/bluebird.min.js"></script>

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>

Antes de poder configurar los servicios Ionic Cloud, necesitaremos tener un ID de aplicación. En el directorio del proyecto, ejecutaremos:

$ ionic io init

Esto creará automáticamente una aplicación en el Panel de Control, y establecerá el ID de la aplicación generado en el archivo de ionic.config.json.

Si ya has creado una aplicación en el Panel de Control y desea sincronizar un proyecto local, pondremos el ID de aplicación en el archivo ionic.config.json.

{
  "name": "NOMBRE_APP",
  "app_id": "APP_ID"
}

Para proporcionar su configuración, inyectaremos una dependencia angular. En el archivo www/js/app.js:

• Añadir el módulo ionic.cloud al resto de las dependencias.
• Inyectar $ionicCloudProvider en el .config de angular y acá haremos la configuración de Ionic Cloud. Reemplazar APP_ID con el ID de la aplicación, que se puede encontrar en el archivo de ionic.config.json.

angular.module('starter', ['ionic', 'ionic.cloud', 'starter.controllers'])
.config(function($ionicCloudProvider) {
  $ionicCloudProvider.init({
    "core": {
      "app_id": "APP_ID"
    }
  });
})

.run(function($ionicPlatform) {
  ...
})