Notificaciones Push Phonegap. Parte 2. Instalación y uso del phonegap-plugin-push en la aplicación.

Hace tiempo escribí un tutorial sobre como recibir las notificaciones push en una aplicación phonegap usando el PushPlugin. El PushPlugin fue abandonado y hace tiempo que no recibe actualizaciones, por lo que el tutorial también se ha quedado desactualizado.

Por suerte han creado un plugin el nuevo phonegap-plugin-push con soporte para Android, iOS y Windows Universal y es el que usaremos en el tutorial.

Antes de empezar vamos a abrir el android SDK manager e instalar o actualizar lo siguiente:

  • Android Support Repository versión 25 o superior
  • Android Support Library versión 23 o superior
  • Google Play Services version 29 o superior
  • Google Repository version 24 o superior

AndroidSDK

Cuando lo tengamos listo crearemos nuestra aplicación cordova y añadimos las plataformas ios 4 y android

cordova create tutorialPush es.phonegap.tutorialpush tutorialPush
cd tutorialPush
cordova platform add ios@4 android

Ahora instalamos el plugin

cordova plugin add phonegap-plugin-push

Vamos a la carpeta www y borramos todo menos el index.html

Abrimos el index.html y lo dejamos así

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Tutorial Push</title>
    </head>
    <body>
        <div class="app">
            <h1>Tutorial Push</h1>
            <p id="idDispositivo"></p>
            <ul id="notificacionesPush">
            </ul>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
    </body>
</html>

Añadimos el eventListener para el deviceready y la función deviceReady donde llamaremos al inicializador del plugin. En el apartado de android añadimos el senderID, que es el “Google Cloud Messaging Project ID” que obtuvimos en el tutorial anterior. En iOS configuramos los permisos que se pedirán (mostrar alertas, globos y sonidos).

Añadimos también un listener para el evento “registration”, que se llamará cuando se inicia la app y obtiene el identificador de iOS y android. Lo mostraremos en el párrafo con id idDispositivo.

    document.addEventListener("deviceready", deviceReady, false);
    function deviceReady() {
        var push = PushNotification.init({
            android: {
                senderID: "455908641475"
            },
            ios: {
                alert: "true",
                badge: "true",
                sound: "true"
            }
        });
                                                 
        push.on('registration', function(data) {
            document.getElementById("idDispositivo").innerText = data.registrationId;
        });
    }

Vamos a ejecutar la app para comprobar que todo está bien, conectamos el dispositivo ios y/o android reales (no funcionará en simuladores/emuladores) y ejecutamos este comando.

cordova run --device

Si todo ha ido bien, se instalará la app y se abrirá mostrando los identificadores de ambas aplicaciones.

Por último añadimos el listener para las notificaciones, y las iremos añadiendo al ul con id notificacionesPush creando elementos nuevos li con el título y el mensaje de la notificación

push.on('notification', function(data) {
    var ul = document.getElementById("notificacionesPush");
    var li = document.createElement("li");
     li.appendChild(document.createTextNode(data.title+": "+data.message));
     ul.appendChild(li);
});

Con esto ya estaría todo lo básico en la parte de la app, tan solo nos quedaría el servidor, que ya lo veremos en la parte 3 del tutorial

También sería recomendable poner un listener para posibles errores y echar un ojo al resto de métodos disponibles en la API

push.on('error', function(e) {
    // e.message
});

Aquí podéis encontrar el index.html completo

 

 

23 comentarios en “Notificaciones Push Phonegap. Parte 2. Instalación y uso del phonegap-plugin-push en la aplicación.

  1. Buenos días, he probado el tutorial y funciona correctamente, solo una duda, en el id que devuelve ahora tiene dos parámetros.
    Ejemplo: du3bddsj: APAkdnspsdkmñvkn84nvkdjl.

    En el plugins anterior solo se usaba el segundo parámetro. ¿Necesito guardar en mi BD los dos o con el segundo como antiguamente es suficiente?

    Muchas gracias

    1. Pues tendría que hacer más pruebas, pero de momento con guardar la parte que empieza con APA parece que llegan bien las push al dispositivo. Investigaré a ver que es el primer parámetro y para que sirve

  2. Buenas tardes jcesar, agradecerte el tutorial, me ha servido para aclararme un poco las ideas pero aún tengo mil dudas más.

    Esperando la parte 3 del servidor como agua de mayo, nunca mejor dicho 🙂

  3. Hola de nuevo!

    Estoy haciendo pruebas siguiendo el tutorial, pero el Registration ID que obtengo no se parece en nada al formato que comentáis con APA…

    Esto obtengo: fEVzyX1d6Hk%3AAPA91bHwAJ3kokCqtOI8bcXlVcwEXifY_iODNzc0Yq2n-t9z0LMrqIxeErUHQSDWl-J6Op1QQ9a5DvY2l4NwoOhe5b0NcdEAOwk-R_tD7iPtxn1lvVb0vqAkVN99Vl7vkKnpbDOYAgEF

    Si intento enviar una notificación desde el servidor con este registration ID, obtengo un error:

    {“multicast_id”:6843874794782143404,”success”:0,”failure”:1,”canonical_ids”:0,”results”:[{“error”:”InvalidRegistration”}]}

    ¿Alguna idea?

    1. No se si ha sido el blog que ha editado tu comentario o si realmente se ha publicado tal cual lo has puesto
      El id deberia ser fEVzyX1d6Hk:APA91b… en vez de fEVzyX1d6Hk%3AAPA91b…, es decir, cambiando el %3A por :

  4. No, no fue el blog. Fallo mío.

    Por fin pude realizar una notificación push en android!!

    Desde las 14 de la tarde llevo intentando hacer lo mismo en iOS pero sin éxito. He leido que desde hace unos meses, ahora apple acepta los request bajo el protocolo http/2 pero casi no encuentro información útil sobre este tema.

    La mejor referencia fue esta: http://coding.tabasoft.it/ios/sending-push-notification-with-http2-and-php

    Pero siguiendo su ejemplo desde el terminal me he encontrado con problemas (he escrito lo siguiente en su blog):

    Hello there! Thanks for your post.

    I am trying to get my push notifications working but It’s seems that I am doing something wrong:

    when I try to execute command line like this:

    /usr/local/Cellar/curl/7.49.0/bin/curl -d ‘{“aps”:{“alert”:”[MESSAGE]”,”sound”:”default”}}’ –cert “/path/to/file.pem”:”” -H “apns-topic: [bundle.id]” –http2 https://api.development.push.apple.com/3/device/bdd07cc28c5c088cf5279200ef060c0a10397b4fc7b4ece1c4da99c67e82e12a

    I obtain {“reason”:”BadDeviceToken”}.

    I don’t know what the problem is beacuse de deviceToken it’s seems to be right.

    Any ideas?

    Thanks!

    1. Si, desde navidad se puede usar HTTP2, pero no he probado a hacerlo. El certificado que usas lo has creado para el mismo app ID (bundle identifier) que el que has puesto en el campo apns-topic: [bundle.id]? y es el mismo que el del proyecto cordova?

  5. Si, para el mismo bundleid que la APP compilada y también el mismo del config.xml del proyecto.

    He probado con certificado de desarrollo y también con el certificado conjunto que vale tanto para sandbox como para producción, pero siempre me dice el mismo error de BadDeviceToken

    Lo cual me confirma que al menos a nivel de conectividad y de certificado parece estar bien, algo es algo..

  6. Algo avancé anoche: Cambiando el certificado de nuevo parece que el device token es correcto.

    Ahora recibo siempre otro error: {“reason”:”DeviceTokenNotForTopic”}. Parece que no está registrado el device token enviado en el topic solicitado en el comando con curl.

    De momento sigo sin dar con el bundle-id que está enviando la APP al servicio APNs. He abierto un ticket en la página github del proyecto explicando un poco mejor el caso: https://github.com/phonegap/phonegap-plugin-push/issues/920

    A ver si así me entero de cual es el bundle-id registrado

    Alguna idea?

  7. Hola, muy buen tutorial, pero al agregar el plugin me sale este error:
    Error: Variable(s) missing (use: –variable SENDER_ID=value).
    Y cuando ejecuto la aplicacion en mi dispositivo no me aparece el ID del dispositivo

    1. Hola. El plugin ha cambiado un poco desde que escribí el tutorial y ahora hay que instalarlo así:

      cordova plugin add phonegap-plugin-push –variable SENDER_ID=”XXXXXXX”

      En mi ejemplo sería
      cordova plugin add phonegap-plugin-push –variable SENDER_ID=”455908641475″

      El SENDER_ID es el mismo que ahora usamos en el método init

      1. Buenos días, cuando hago esto a traves de la consola, me da el siguiente error

        Unmet project requirements for latest version of phonegap-plugin-push:
        cordova-ios (4.1.1 in project, >=4.3.0 required)
        cordova-android (5.1.1 in project, >=6.0.0 required)
        Fetching highest version of phonegap-plugin-push that this project supports: 1.8.4 (latest is 1.9.0)

        ¿Alguien sabe como actualizar el proyecto a 4.3 y 6.0?

        1. Lo primero que tienes que hacer es actualizar el CLI con npm install -g cordova
          Luego actualizas las plataformas desde la carpeta de tu proyecto con cordova platform update ios o cordova platform update android.

    1. Tomo nota.

      Lo malo de las push es que es algo muy concreto para tu proyecto. El código es casi el mismo, pero en iOS los certificados tienen que ser los tuyos, y en android los códigos de proyecto/sender ID, y si no se configuran bien esas cosas aunque tengas el código bien no lo harás funcionar.

  8. ¿En algún momento se publicará un tutorial con el provider para ios? Para android, con GCM, tengo el manejo implementado del lado del servidor con php.

    1. Hola, estoy usando phonegap-plugin-push para notificaciones en android e ios. Con Android me funciona perfecto y envío notificaciones vía FireBase desde mi servidor a los token que me genera la App (uso phonegap bajo ionic). El caso es que al empezar a hacer pruebas con IOS, no me funciona. Al principio al enviar la petición a FCM (FireBase) me indicaba que el token no existía. El código que tenía era:

      var push = Push.init({
      android: {
      senderID: this.cfgApp.FCM_SENDER_ID
      },
      ios: {
      alert: true,
      badge: true,
      sound: true
      },

      En este caso me generaba un token del estilo a:

      1ec457d23c71eb69254a314f4ff4fb72ee905ef43f36d9714c126fbbf2ca0fc7

      El error en el token me daba también cuando desde la consola de FireBase enviaba una notificación a dicho token.

      En algún sitio leí que para IOS había que poner en la inicialización:

      var push = Push.init({
      android: {
      senderID: this.cfgApp.FCM_SENDER_ID
      },
      ios: {
      senderID: “XXXXXXX”,*/ //If using GCM for ios, project token number (12 digit) from https://console.developers.google.com
      gcmSandbox: ‘true’,*/ //If using GCM for ios
      alert: true,
      badge: true,
      sound: true
      },

      Desde que he puesto el senderID también en IOS, ya no me da error al enviar el mensaje (ni desde mi servidor, ni desde la consola de FireBase), obteniendo una respuesta de FCM desde mi servidor del estilo a:

      {“multicast_id”:7285896205884577572,”success”:1,”failure”:0,”canonical_ids”:0,”results”:[{“message_id”:”0:1487196523974805%1fbc3fe3f9fd7ecd”}]}

      En este caso me genera un token del estilo a los que genera para Android.

      ¿Cuál es la forma correcta de configurar este plugin para IOS? Cuando lo instalé también añadí mi id en el comando de instalación:

      cordova plugin add phonegap-plugin-push –variable SENDER_ID=”XXXXXXXXXXXXX”

      ¿Qué formato es el correcto para un token generado a través de phonegap para IOS, el que aparentemente son 8 bloques de 8 caracteres:

      1ec457d2 3c71eb69 254a314f 4ff4fb72 ee905ef4 3f36d971 4c126fbb f2ca0fc7

      …o el que se genera al estilo android, como el siguiente?

      cMUb4E6v7Mo:APA91bGKOIA0G_2s … etc.

      En teoría tengo los certificados de IOS correctamente cargados en FireBase (probado con el de desarrollo y el de producción) pero no me llegan las notificaciones a mi iPhone.

      Cualquier ayuda me vendría de perlas.

      Muchas gracias de antemano.

      1. Para usar FCM deberías usar la versión 2 del plugin, aunque todavía está en beta
        https://github.com/phonegap/phonegap-plugin-push/tree/v2.0.x

        FCM parece estar funcionando bien en la versión 1.9.x del plugin para Android, aunque no debería. Lo mejor es que pruebes la v2.0.x, esta versión tiene un hook que copiará el google-services.plist al proyecto para que pueda funcionar bien en iOS, lo tienes que descargar de la consola de firebase y ponerlo en la raíz de tu proyecto y el hook lo copiará.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *