Añadir notificaciones Push a Phonegap con OneSignal

1 – Registraremos nuestra aplicación en la consola de Firebase https://console.firebase.google.com/

2 – Nos daremos de alta en OneSignal https://onesignal.com/

3 – Crearemos una aplicación en OneSignal y añadiremos los datos Google Server API Key y Google Project Number que obtendremos de la aplicación creada en el punto 1.

4 – Una vez creada la aplicación, OneSignal nos dará un OneSignal App ID y una REST API Key con las cuales configuraremos en nuestro servidor el envío de mensajes push.

5 – Instalamos en nuestra APP el plugin correspondiente

phonegap plugin add onesignal-cordova-plugin --save

6 – En nuestra APP añadimos el siguiente código para registrar el dispositivo en OneSignal. En “YOUR_APPID” añadiremos el OneSignal App ID del punto 4. Una vez tengamos un dispositivo registrado, desde el panel de OneSignal ya podemos enviar mensajes manualmente.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
    var notificationOpenedCallback = function(jsonData) {
                console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
                //myApp.alert(JSON.stringify(jsonData));
              };
            
            window.plugins.OneSignal
            .startInit("YOUR_APPID")
            .handleNotificationOpened(notificationOpenedCallback)
            .endInit();
}

7 – Además de registrar la APP en OneSignal, debemos recoger y guardar el token id del usuario (dispositivo) para poder enviarle mensajes solo a ese dispositivo. Podemos recogerlos de la siguiente forma.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
var notificationOpenedCallback = function(jsonData) {
                console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
                //myApp.alert(JSON.stringify(jsonData));
              };
            
            window.plugins.OneSignal
            .startInit("794d71b5-1bde-48af-aaed-6c05c14362da")
            .handleNotificationOpened(notificationOpenedCallback)
            .endInit();

            window.plugins.OneSignal.getPermissionSubscriptionState(function(status) {
                var userId = status.subscriptionStatus.userId;
                $.ajax({
                    type: "GET",
                    url: domainpath + "save-token",
                    crossDomain: true,
                    beforeSend: function() {},
                    complete: function() {},
                    data: {
                        api_token_id: storage.getItem("api_token_id"),
                        api_token_key: storage.getItem("api_token_key"),
                        token_push_id: userId
                    },
                    dataType: 'jsonp',
                    success: function(response) {
                        console.log(JSON.stringify(response));
                        return response.error;
                    },
                    error: function() {
                        console.error("error");
                        myApp.alert("Se ha producido un error, vuélvelo a intentar más tarde.");        
                    }
                });
            });
}

8 – Una vez tenemos guardado el Token User ID, podemos enviar mediante PHP por ejemplo mensajes push. El siguiente ejemplo está basado en Laravel, pero es una función sencilla que usa cURL y se puede adaptar a cualquier otro Framework.

Función en ApiController.php

static public function sendNotification($message, $users){
        $content = array(
            "en" => $message
        );

        $fields = array(
            'app_id' => "794d71b5-1bde-48af-aaed-6c05c14362da",
            'include_player_ids' => $users,
            'data' => array("foo" => "bar"),
            'contents' => $content
        );

        $fields = json_encode($fields);
        print("\nJSON sent:\n");
        print($fields);

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, "https://onesignal.com/api/v1/notifications");
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json; charset=utf-8',
            'Authorization: Basic NDAzYzk5YjQtNTYyMC00MTQzLWFhMGUtMjE3MGJiY2ZiNzI2'));
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
        curl_setopt($ch, CURLOPT_HEADER, FALSE);
        curl_setopt($ch, CURLOPT_POST, TRUE);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);

        $response = curl_exec($ch);
        curl_close($ch);

        return $response;
    }

Llamada a la función

$message = "Va súper bien!!";
                $users = array();
                $response = ApiController::sendNotification($message, $users);
                $return["allresponses"] = $response;
                $return = json_encode( $return);

                print("\n\nJSON received:\n");
                print($return);
                print("\n");

9 – Ya tenemos nuestra aplicación lista para compilar en PhoneGap Build https://build.phonegap.com/ y para subir posteriormente a Google Play https://developer.android.com/distribute/console/

* Si al compilar con PhoneGap Build nos da un error de versión del Sdk, cambiaremos la versión en nuestro config.xml. Puede que encontremos definida el valor 14, lo sustituiremos por el 23. A partir de agosto de 2018, las aplicaciones nuevas se deben orientar como mínimo a Android 8.0 (nivel de API 26).

<preference name="android-minSdkVersion" value="14" />