Activa las notificaciones push PhoneGap Spain

Foro

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

This topic contains 4 replies, has 3 voices, and was last updated by manuweb manuweb 1 dia, 12 horas .

Viendo 5 respuestas - de la 1 a 5 (de 5 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
    ..
    }


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

You must be logged in to reply to this topic.