Activa las notificaciones push PhoneGap Spain

Foro

Home Forums PhoneGap Build Notificaciones Push con PhoneGap para Android e iOS

This topic contains 9 replies, has 5 voices, and was last updated by  gerarifes 17 horas, 31 minutos .

Viendo 10 respuestas - de la 1 a 10 (de 10 en total)
  • Notificaciones Push con PhoneGap para Android e iOS

    Intervenciones
  • manuweb
    manuweb 
    Participant

    Os pongo un ejemplo de como he logrado hacer las push en Android e ios:

    En el archivo config.xml debemos tener los siguientes plugins declarados:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.

    <plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
      <variable name="SENDER_ID" value="XXXXXXX" />
    </plugin>
    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
    <gap:plugin name="cordova-plugin-badge" version="0.7.4" source="npm" />

    Para phonegap-plugin-push la versión que me ha funcionado es la 1.8.0, cordova-plugin-device para el uso de device y cordova-plugin-badge para que muestre el número de notificaciones en el badge. SENDER_ID es el valor de la ID de mi proyecto creado en Firebase para Google Cloud Messaging (GCM)

    El archivo index.html:

     Code: arbitrary (select
    1.
    2.
    3.

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    En mi caso uso jQuery pero podría usar cualquier otro framework, lo he usado para una llamada AJAX a mi servidor.

    El archivo index.js:

     Code: arbitrary (select
    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.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.

    var app = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        onDeviceReady: function() {
            console.log('Received Device Ready Event');
            console.log('calling setup push');
            plataforma=device.platform;
            var element = document.getElementById('deviceProperties');

            element.innerHTML = 'Device Platform: ' + plataforma + '<br />' +
                            'Device UUID: '     + device.uuid     + '<br />' +
                            'Device Version: '  + device.version  + '<br />';
            app.setupPush();

        },
        setupPush: function() {
            console.log('calling push init');
            var push = PushNotification.init({
                "android": {
                    "senderID": "XXXXXX"
                },
                "browser": {},
                "ios": {
                    "sound": true,
                    "vibration": true,
                    "badge": true
                },
                "windows": {}
            });
            console.log('after init');

            push.on('registration', function(data) {
                console.log('registration event: ' + data.registrationId);

                     jQuery.ajax({
            url: 'URL-PARA-REGISTRO-DISPOSITIVO/archivo.php',
            type:'POST',
            data:'datos='+data.registrationId+'||'+plataforma,
            dataType:'json',
            success:function(response){
              if (response.msg=='primera'){
                alert('Su teléfono ha quedado registrado');

              }


            },
            error:function(xhr, status){
              alert(status, 'ERROR');

            }
          });

                var parentElement = document.getElementById('registration');
                var listeningElement = parentElement.querySelector('.waiting');
                var receivedElement = parentElement.querySelector('.received');

                listeningElement.setAttribute('style', 'display:none;');
                receivedElement.setAttribute('style', 'display:block;');
            });

            push.on('error', function(e) {
                console.log("push error = " + e.message);
                
          alert("push error = " + e.message);

            });

            push.on('notification', function(data) {
                console.log('notification event');

        cordova.plugins.notification.badge.set(0);
                navigator.notification.alert(
                    data.message,         // message
                    null,                 // callback
                    data.title,           // title
                    'Ok'                  // buttonName
                );
           });
        }
    };

    Eso es todo en cuanto a la aplicación.

    El archivo.php donde se registran los dispositivos (en mi servidor):

     Code: arbitrary (select
    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.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.

    <?php
    include "conexion.php";
    include "MySQL/DataBase.class.php";

      $checking=false;
      $msg="error POST";

    if (isset($_POST['datos'])) {
      $datos = explode("||", $_POST['datos']);
      $IdTel = $datos[0];
      $Plataforma=$datos[1];

      $sql="SELECT id FROM gcm_devices WHERE gcm_regid='".$IdTel."'";
      $db = DataBase::getInstance();  
      $db->setQuery($sql);  
      $telefono = $db->loadObjectList();  
      $db->freeResults();
      if (count($telefono)==0) {
          $checking=false;
          $msg="primera";
          $sql="INSERT INTO gcm_devices ( gcm_regid, name, email, plataforma, created_at) VALUES ('".$IdTel."', '', '','".$Plataforma."', CURRENT_TIMESTAMP)";

          $db = DataBase::getInstance();  
          $db->setQuery($sql);  
          $telefono = $db->loadObjectList();  
          $db->freeResults();
          if (count($telefono)<0) {
              $checking=false;
              $msg="Error";
          }
          else {
            $checking=true;
          }

      }

      else {
        $checking=true;
        $msg="Ya estaba";

      }



    }
      $json=array("valid"=>$checking, "msg" => $msg);
      echo json_encode($json);

    ?>

    En mi caso utilizo una clase MYSQL pero el script lo que hace básicamente es insertar los datos del teléfono en una tabla y por JSON devuelve true tanto si ya estaba como si es nuevo.

    En el servidor, para enviar la notificación lo hago de la siguiente manera: por POST envío los datos de un formulario con las variables regId (la id del dispositivo), message (el mensaje), title (titulo) y plataforma (para iOS o Android). Evidentemente se podría hacer un script que usara todos los registros de la tabla donde están almacenados las ID de los dispositivo.

     Code: arbitrary (select
    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.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.
    88.
    89.
    90.
    91.
    92.
    93.
    94.
    95.
    96.
    97.
    98.
    99.
    100.
    101.
    102.
    103.
    104.
    105.
    106.
    107.
    108.
    109.
    110.
    111.
    112.
    113.
    114.
    115.
    116.
    117.
    118.
    119.
    120.
    121.
    122.
    123.
    124.
    125.
    126.
    127.
    128.
    129.
    130.
    131.
    132.
    133.
    134.
    135.
    136.
    137.
    138.
    139.
    140.
    141.
    142.

    <?php
    if (isset($_POST["regId"]) && isset($_POST["message"])) {
        $regId = $_POST["regId"];
        $plataforma= $_POST["plataforma"];
        $message = $_POST["message"];
        $title= $_POST["title"];
        
        if ($plataforma=='iOS') {
            // El password del fichero .pem - >  passphrase
            // El mensaje push

            echo "enviando:".$message."<br>";
            
            $ctx = stream_context_create();
            //Especificamos la ruta al certificado .pem que hemos creado
            stream_context_set_option($ctx, 'ssl', 'local_cert', 'test.pem');
            stream_context_set_option($ctx, 'ssl', 'passphrase', $title);
            
            // Abrimos conexión con APNS
            $fp = stream_socket_client(
                    'ssl://gateway.sandbox.push.apple.com:2195', $err,
                    $errstr, 60, STREAM_CLIENT_CONNECT|STREAM_CLIENT_PERSISTENT, $ctx);
            
            if (!$fp) {
                    exit("Error de conexión: $err $errstr" . PHP_EOL);
            }
            
            echo 'Conectado al APNS' . PHP_EOL;
            
            // Creamos el payload
            $body['aps'] = array(
                    'alert' => $message,
                    'sound' =>'bingbong.aiff',
                    'badge' => 1
                    );
            
            // Lo codificamos a json
            $payload = json_encode($body);
            
            // Construimos el mensaje binario
            $msg = chr(0) . pack('n', 32) . pack('H*', $regId) . pack('n', strlen($payload)) . $payload;
            
            // Lo enviamos
            $result = fwrite($fp, $msg, strlen($msg));
            
            if (!$result) {
                    echo 'Mensaje no enviado' . PHP_EOL;
            } else {
                    echo 'Mensaje enviado correctamente' . PHP_EOL;
            }
            
            // cerramos la conexión
            fclose($fp);        
            
        }
        else { // Android
            
            
            $gcm = new GCM();

            $registatoin_ids = array($regId);
            $mensaje = array(
            'message'     => $message, //mensaje a enviar
          'title'      => $title,// Titulo de la notificación
          'msgcnt'    => '1',
          /*Número que sirve para informar cantidad de mensajes o eventos.
                       Se muestra en la parte derecha de la notificación
                    (En Android 2.3.6 no me lo muestra, me imagino que debe depender de la versión)*/
          //'soundname'  => 'sonido.wav',//Sonido a reproducir *debe estar en la carpeta raíz
          //'collapseKey' => 'demo',
            /*Texto que sirve para colapsar las notificaciones cuando el dispositivo esta offline.
            Esto detecta si el dispositivo estaba sin acceso a red,
            de tal manera que una vez este en línea no le lleguen un montón
            de notificaciones al tiempo; solo llegará la última de cada notificación
            que tenga el mismo collapseKey*/
          'timeToLive' => 3000,/* Tiempo en segundos para mantener la notificación en GMC
                      y volver a intentar el envío de esta.
                      Default 4 semanas (2,419,200 segundos) si no es especificado.*/
          //'delayWhileIdle' => true, //Default is false
          //Mas opciones en http://developer.android.com/google/gcm/server.html#params
          );

            $result = $gcm->send_notification($registatoin_ids, $mensaje);
            echo $result;
        }
    }

    // clase GCM

    /*
    * Google API Key
    */
    define("GOOGLE_API_KEY", "XXXXXXXXXXXXXXXXXXXXX");
    // Coloca tu Api key aquí


    class GCM {
        function __construct() {    
        }
        /*--- Enviando notificaciones push ----*/
        public function send_notification($registatoin_ids, $message) {
            
            // variable post http://developer.android.com/google/gcm/http.html#auth
            $url = 'https://android.googleapis.com/gcm/send';

            $fields = array(
                'registration_ids' => $registatoin_ids,
                'data' => $message,
            );

            $headers = array(
                'Authorization: key=' . GOOGLE_API_KEY,
                'Content-Type: application/json'
            );
            // abriendo la conexion
            $ch = curl_init();

            // Set the url, number of POST vars, POST data
            curl_setopt($ch, CURLOPT_URL, $url);

            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

            // Deshabilitamos soporte de certificado SSL temporalmente
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

            // ejecutamos el post
            $result = curl_exec($ch);
            if ($result === FALSE) {

                die('Curl failed: ' . curl_error($ch));
            }
            // Cerramos la conexion
            curl_close($ch);
            echo $result;
        }
    }

    ?>

    Espero que sea de ayuda.

    Saludos,

    Manuel Sánchez


    sseawayss 
    Participant

    hola manuweb, donde puedo encontrar el proyecto completo? necesito estudiarlo a fondo
    gracias


    manuweb
    manuweb 
    Participant

    sseawayss, he puesto un ejemplo completo, ya depende de ti desarrollarlo.


    felias83 
    Participant

    Buenas! una pregunta para usar firebase cloud messaging y las notificaciones push debo agregar a mi proyecto la plataforma de android?


    manuweb
    manuweb 
    Participant

    felias83 si solo vas a usar android usa sólo el código que está en el último archivo entre el
    else { // Android
    ..
    }


    jlgomeza 
    Participant

    para poder probar las notificaciones en ios es necesario hacer el instalable o se puede hacer desde phonegap de escritorio?


    manuweb
    manuweb 
    Participant

    jlgomeza, necesitas el ipa (archivo de instalación) de desarrollo o de producción. Con la app de Phonegap no me ha funcionado.

    Ten en cuenta que cuando registras un telefono te da un token distinto en desarollo y otro distito en producción.

    En iOS son distintos los servidores pare envio :
    ssl://gateway.push.apple.com:2195 –> Produccion
    ssl://gateway.sandbox.push.apple.com:2195 –> Desarrollo

    Saludos.

    • This reply was modified 1 mes by manuweb manuweb.

    • This reply was modified 1 mes by manuweb manuweb.
    gerarifes 
    Participant

    Manuweb muchas gracias por el aporte, es el que mejor me ha ido a la hora de avanzar con las notificaciones push.

    Ya consigo que se registren los dispositivos, solo un pequeño inconveniente, lo realiza la segunda vez que inicias la app, a la primera no funciona( pero eso no es lo que me preocupa, ya lo solucionaré).

    Lo que no consigo hacer funcionar es el envío de notificaciones, me devuelve este error
    “Invalid (legacy) Server-key delivered or Sender is not authorized to perform request. Error 401″
    El sender id esta correcto y creo que la GOOGLE_API_KEY también, tengo algo del estilo AIzaSyAu******VC3M9RRZkD-U

    Ene firebase obtengo la clave api, me pone de servidor heredado

    Alguna ayuda por favor estoy atascado en este punto .

    Gracias

    • This reply was modified 1 dia, 16 horas by  gerarifes.

    • This reply was modified 1 dia, 16 horas by  gerarifes.
    manuweb
    manuweb 
    Participant

    Hola gerarifes, acabo de ver esto. Gracias por tu comentario.

    Supongo, por lo que comentas que estas trabajanco con Android.

    Haz una prueba con este codigo PHP:

     Code: arbitrary (select
    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.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.
    88.
    89.
    90.
    91.
    92.

    $message =  'Mensaje de prueba';
    $title= 'Hola';

    echo "Titulo:".$title."<br>";

    echo "Mensaje:".$message."<br>";

    $regId='id_del_telefono_Android_registrado_debe_ser_una_cadena_de_numeros_y_letras';    

    $correctos_A=0;
    $incorrectos_A=0;

        

    define("GOOGLE_API_KEY", "tu_ggogle_api_key__debe_ser_una_cadena_de_numeros_y_letras");
        
    $gcm = new GCM();

    $registatoin_ids = array($regId);
    $mensaje = array(
        'message'     => $message,
        'title'      => $title,
        'msgcnt'    => '1',
        'timeToLive' => 3000

    );


    $result = $gcm->send_notification($registatoin_ids, $mensaje);
    $resul=json_decode($result,true);
    if ($resul['success']==1) {  
        $correctos_A ++;
    }
    if ($resul['failure']==1) {  
        $incorrectos_A ++;
    }



    echo "Dispositivos Android:".($correctos_A+$incorrectos_A)."<br>";
    echo "Correctos:".$correctos_A." - Incorrectos:".$incorrectos_A."<br>";

    class GCM {
        function __construct() {    
        }
        /*--- Enviando notificaciones push ----*/
        public function send_notification($registatoin_ids, $message) {
      
            // variable post http://developer.android.com/google/gcm/http.html#auth
            $url = 'https://android.googleapis.com/gcm/send';

            $fields = array(
                'registration_ids' => $registatoin_ids,
                'data' => $message,
            );

            $headers = array(
                'Authorization: key=' . GOOGLE_API_KEY,
                'Content-Type: application/json'
            );
            // abriendo la conexion
            $ch = curl_init();

            // Set the url, number of POST vars, POST data
            curl_setopt($ch, CURLOPT_URL, $url);

            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

            // Deshabilitamos soporte de certificado SSL temporalmente
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

            // ejecutamos el post
            $result = curl_exec($ch);
            if ($result === FALSE) {

                fwrite($file, "Curl failed: " . curl_error($ch). PHP_EOL);
                //die('Curl failed: ' . curl_error($ch));
                return '{"success":0,"failure":1}';
            }
            // Cerramos la conexion
            curl_close($ch);
            return $result;
            fwrite($file, "valor:" .$result . PHP_EOL);
        }
    }


    ?>

    Eso te debe mandar el mensaje al dispositivo $idtel que hayas puesto.

    Ya nos cuenta que tal te va.

    Saludos.

    • This reply was modified 18 horas, 32 minutos by manuweb manuweb.
    • This reply was modified 18 horas, 31 minutos by manuweb manuweb.

    • This reply was modified 18 horas, 32 minutos by manuweb manuweb.
    • This reply was modified 18 horas, 31 minutos by manuweb manuweb.
    gerarifes 
    Participant

    Muchas gracias manuweb, funciona perfectamente, llevaba días sin encontrar solución y la verdad andaba un poco saturado de tanto buscar.
    Ahora voy a darle forma a alguna parte que falta de las push.

    Muchas Gracias


Viendo 10 respuestas - de la 1 a 10 (de 10 en total)

You must be logged in to reply to this topic.