Quantcast

OneSignal Ionic | La guía más completa disponible en español

Aitor Sánchez - Blog - Oct. 29, 2023, 1:02 p.m.

¿Interesado en incluir notificaciones push en tu app hecha en Ionic? O, quizás, lo que buscas es conocer algún detalle interno de la api de One Signal cómo, por ejemplo, los campos de clase o las funciones que tiene ¿verdad?.

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás a enviar y recibir notificaciones push en tu app mediante la plataforma One Signal.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

 

 

Instalación del módulo

Cómo con la mayoría de los componentes externos al core de Ionic, necesitamos realizar una instalación de la api para poder usarlos en nuestra app. Para ello vamos a usar las siguientes dos líneas de código:

$ ionic cordova plugin add onesignal-cordova-plugin
$ npm install --save @ionic-native/onesignal@4

 

Sencillito ¿verdad? La primera hace la instalación del plugin de Cordova que nos permitirá la comunicación con la parte nativa del api.

La segunda instala el código necesario para comunicarnos con el plugin desde nuestro código TS.

 

Configuración de One Signal en Ionic

Vale, esta sección solo le prestaremos atención si queremos poner iconos, o cambiarlos (change icon), y badges a nuestras notificaciones. Si no lo vas a hacer, pasa de esta parte.

En primera lugar tendremos que crear el siguiente archivo:

  • #hooks/copy_android_notification_icons.js

Posteriormente nos vamos a suscribir al gancho de la api “after_prepare” de la siguiente manera:

<platform name="android">   
...
<hook type="after_prepare" src="hooks/copy_android_notification_icons.js" />
...
</platform>

 

Y dentro de ese archivo tenemos que poner el siguiente código:

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');

var filestocopy = [{
    "resources/android/icon/drawable-hdpi-icon.png":
        "platforms/android/app/src/main/res/drawable-hdpi/ic_stat_onesignal_default.png"
}, {
    "resources/android/icon/drawable-mdpi-icon.png":
        "platforms/android/app/src/main/res/drawable-mdpi/ic_stat_onesignal_default.png"
}, {
    "resources/android/icon/drawable-xhdpi-icon.png":
        "platforms/android/app/src/main/res/drawable-xhdpi/ic_stat_onesignal_default.png"
}, {
    "resources/android/icon/drawable-xxhdpi-icon.png":
        "platforms/android/app/src/main/res/drawable-xxhdpi/ic_stat_onesignal_default.png"
}, {
    "resources/android/icon/drawable-xxxhdpi-icon.png":
        "platforms/android/app/src/main/res/drawable-xxxhdpi/ic_stat_onesignal_default.png"
} ];

module.exports = function(context) {

    // no need to configure below
    var rootdir = context.opts.projectRoot;

    filestocopy.forEach(function(obj) {
        Object.keys(obj).forEach(function(key) {
            var val = obj[key];
            var srcfile = path.join(rootdir, key);
            var destfile = path.join(rootdir, val);
            console.log("copying "+srcfile+" to "+destfile);
            var destdir = path.dirname(destfile);
            if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
                fs.createReadStream(srcfile).pipe(
                    fs.createWriteStream(destfile));
            }
        });
    });

};

 

Y, por último, desde la consola de desarrollo, y dentro del directorio del proyecto, ejecutas el siguiente comando:

chmod +x hooks/copy_android_notification_icons.js

 

Plataformas soportadas

Las plataformas que soporta el componente son las siguientes:

 

Hay una versión pro

Pues eso, en caso de que estemos buscando algo más profesional para nuestra integración. Aquí te dejo un enlace donde puedes ver todos los detalles de esta versión de pago: https://onesignal.com/pricing

Aprovecho para decir, que, si eres un usuario independiente, cómo yo, no es necesario pagar por algo así. O quizás tengas una app enorme, con millones de usuarios, y sí que te haga falta. Quién sabe :)

 

Cómo usar One Signal en Ionic ejemplo / example

Antes de continuar con todo esto, sería preferible que pasases por este enlace. En el que se explica toda la gestión y creación de las apis de One Signal. Una vez realizado todo este proceso vuelve aquí y continua.

 

Para poder seguir con el proceso de uso, necesitamos incluir nuestra clase a los providers para que podamos inyectar las instancias desde los constructores. Para tal fin vamos a utilizar el siguiente código:

 

…
providers: [
    … ,
    OneSignal,
    …
]
…

 

Y cómo acostumbro a comentar en los tutoriales, es que esta parte no es necesaria que la utilicemos en el AppModule directamente. Podemos importarla solo en la parte de la app que vayamos a usar el módulo. En ese caso sería meterlo en los providers del respectivo componente.

Y cómo ya estamos en disposición de usar el componente, vamos a ver un ejemplo de código:

 

import { OneSignal } from '@ionic-native/onesignal';


constructor(private oneSignal: OneSignal) { }

...

this.oneSignal.startInit('b2f7f966-d8cc-11e4-bed1-df8f05be55ba', '703322744261');
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
this.oneSignal.handleNotificationReceived().subscribe(() => {
 // do something when notification is received
});

this.oneSignal.handleNotificationOpened().subscribe(() => {
  // do something when a notification is opened
});

this.oneSignal.endInit();

 

Cómo es necesario, importamos la clase OneSignal donde la queramos utilizar. En este caso solo es necesario una clase, “OneSignal” del paquete “@ionic-native/onesignal”. Será la que se encargue de todo este lio de notificaciones :)

Posteriormente inyectamos una instancia de OneSignal en el constructor para poder acceder a su funcionalidad.

Llamamos a “startInit” para poner en marcha el sistema. Siendo el primer parámetro el appId que hemos generado en OneSignal. Y el segundo solo será pasa dispositivos Android y en caso de que queramos mediar con FCM. Que será el número de proyecto que nos genera Firebase al crearlo.

Con esto ya está la base configurada. Ahora con “inFocusDisplaying” le decimos cómo se tiene que comportar si la app está abierta cuando llega la petición. Veremos más adelante todas las posibilidades.

Y para terminar con el ejemplo, ponemos a escuchar la instancia de OneSignal con los métodos:

  • handleNotificationReceived -> Se emitirá cuando entre una nueva notificación.
  • handleNotificationOpened -> Se emitirá cuando se abra la app desde una notificación.

Ahora llamamos a “endInit” para que aplique la configuración y listo. Todo a funcionar. Muahahaha.

Con esto ya tendríamos un ejemplo 100% funcional para recibir notificaciones push y programar el comportamiento de la app cuando las reciba, o abra.

Ahora vamos a ponernos con la chicha, que es la parte que muchos venís a buscar directamente. Más que la explicación en sí, comenzamos…

Funciones y métodos de OneSignal

Comenzando esta segunda parte del artículo, vamos a ver los métodos y funciones en primer lugar.

 

startInit(appId, googleProjectNumber)

  • Esta función, cómo hemos visto en el ejemplo, inicializa todo el sistema.
  • Parametros:
    • appId: El id de aplicación que se ha generado en Firebase.
    • googleProjectNumber: Solo está disponible para Android y es número de proyecto de Firebase, en caso de que queramos usarlo.
  • Retorna una promesa que tendremos que controlar que nos permite conocer si se ha terminado de configurar onesignal del todo.

handleNotificationReceived()

  • Desde esta función podemos controlar cuando hemos recibido una notificación y ejecutar el código necesario cuando esto suceda. Se ejecutará se muestre, o no, la notificación.
  • Retorna un observable que lleva dentro una instancia de “OneSignalReceivedNotification” que lleva dentro toda la información de la notificación.

handleNotificationOpened()

  • Esta función se ejecutará cuando se acceda a la app desde una notificación (Android) o el centro de notificaciones (iOS). También se llamará cuando se cierra una notificación de alerta desde la misma aplicación (siempre que InAppAlert esté habilitado con inFocusDisplaying).
  • Retorna un observable que lleva dentro una instancia de “OneSignalReceivedNotification” que lleva dentro toda la información de la notificación.

iOSSettings(settings)

  • Esta función nos permite definir los ajustes que va a tomar el componente en dispositivos iOS.
  • Parámetros:
    • settings:
      • kOSSettingsKeyAutoPrompt -> booleano -> Lanza la solicitud de permisos para notificaciones de manera automática. -> true
      • kOSSettingsKeyInAppLaunchURL -> booleano -> Lanza la notificación con una URL dentro del WebView de la app. -> false.
    • Retorna un “any” que lleva información adicional de cómo está la configuración de la app.

endInit()

  • Esta es la función, que debe llamarse después de “startInit”, avisa al sistema que hemos terminado de configurar y que inicialice el sistema de notificaciones con OneSignal.
  • Retorna un “any” con información del estado de la configuración.

promptForPushNotificationsWithUserResponse()

  • Esta función muestra el diálogo de solicitud de permisos al usuario y solo está disponible en iOS. Y por otro lado, el callback solo será llamado cuando el usuario acepte, o decline, los permisos solicitados.
  • Retorna una promesa que hay que controlar y dentro lleva un booleano que nos permite conocer si se han aceptado o no.

getTags()

  • Recibe una lista de etiquetas que se han establecido en el usuario desde los servidores de OneSignal.
  • Nota: debe esperar a que la función se resuelva para volverla a llamar. En caso contrario solo se llevará a cabo la última petición y se descartará el resto.
  • Retorna una promesa que dentro lleva la información de las etiquetas en un “any”.

getIds()

  • Intenta obtener el id / ids (get ids) de usuario (get player id) y el token del dispositivo registrados en OneSignal. El manejador solo será llamado después de que el dispositivo se ha registrado correctamente.
  • Retorna una promesa que tenemos que manejar y dentro lleva un objeto con los datos. Veamos cuales son los campos:
    • userId -> string
    • pushToken -> string

 

sendTag(key, val)

  • Con esta función podemos enviar a los servidores de OneSignal una etiqueta y asociársela al usuario a través del token del dispositivo. Con esta etiqueta podremos, por ejemplo, crear segmentaciones.
  • Parámetros:
    • Key -> string -> Una cadena con el nombre de la KEY para recuperarla después.
    • Val -> string -> El valor asociado a la KEY.

 

sendTags(data)

  • Esta función es similar a la anterior, pero nos permite enviar varias tags de una.
  • Parámetros:
    • Data -> string -> Una cadena formateada cómo un JSON. Bastaría con usar “JSON.stringify” para serializarlo y poder enviarlo.
      • {“key1”: “val1”, “key2”:”val2”}

 

deleteTag(key)

  • Elimina una etiqueta asociada con el usuario.
  • Parámetros:
    • key -> string -> La KEY de la tag que quieres eliminar.

 

deleteTags(keys)

  • Similar a la anterior función. Pero con esta podemos eliminar varias a la vez.
  • Parámetros -> Array<string> -> Un array con todos los tags que queremos eliminar.

 

registerForPushNotifications()

  • Esta función solo está disponible para iOS y fuerza la solicitud de permisos para recibir notificaciones push. A parte, solo funcionará cuando los ajustes (iOSSettings) de “kOSSettingsAutoPrompt” esté seteados en false.

 

enableVibrate(status)

  • Este método solo funcionará en Android y en Amazon. Y sirve, en esencia, para que el dispositivo vibre cuando recibe una notificación.
  • Nota: La vibración también dependerá de los ajustes que tenga el usuario en su dispositivo.
  • Parámetros:
    • status -> booleano -> Por defecto es false. Si lo ponemos a true, vibrará. Pero si lo queremos desactivar tendremos que ponerlo en false explícitamente.

 

enableSound(status)

  • Similar a la función anterior, pero esta vez con el sonido de la notificación.
  • Parámetros:
    • status -> booleano -> -> Por defecto es false. Si lo ponemos a true, sonará. Pero si lo queremos desactivar tendremos que ponerlo en false explícitamente.

 

inFocusDisplaying(displayOptions)

  • Esta función nos permite definir cómo se comportará la aplicación cuando recibe una notificación y la app está abierta y en primer plano.
  • Parámetros:
    • displayOptions -> DisplayType -> Esta interfaz la vamos a ver más abajo.
  • Retorna un “any” que nos permite saber si todo se ha realizado correctamente.

 

setSuscription(status)

  • Con esta función puedes “dar de baja” a un usuario de recibir notificaciones de OneSignal.
  • Parámetros:
    • status -> booleano -> Si es true, el usuario recibirá notificaciones. Si es false no.

 

getPermissionSubscriptionStat()

  • Esta función devuelve el estado actual del sistema de notificaciones.
  • Retorna una promesa que hay que controlar y lleva consigo una instancia de “OSPermissionSubscriptionState”. Esta interfaz la veremos ahora en la sección de interfaces.

 

pushNotificationn(parameters)

  • Esta función hace una solicitud de envío de notificación push con los parámetros dados.
  • Parámetros -> notificationObj -> Esta interfaz la vamos a ver más abajo en la sección de interfaces.
  • Retorna una promesa que tendremos que controlar y se resuelve cuando la notificación ha sido enviada correctamente.

 

cancelNotification(notificationId)

  • “cancelNotification” nos permite cancelar el envío de una notificación si no ha sido enviada aún.
  • Parámetros:
    • notificationId -> string -> Será el id de la notificación enviada. Se consigue cuando se crea con la función “pushNotificationn” que hemos visto antes.

 

promptLocation()

  • Aunque no tenga mucho sentido tenerla aquí, realiza una solicitud para obtener la localización del usuario y así poder filtrar por localización en el panel de control de OneSignal.
  • Nota: Al no ser necesario para usar el sistema, no tiene una devolución. Es simplemente solicitar el permiso para que podamos usarla luego.

 

syncHashedEmail(email)

  • Nos permite relacionar el userId y el token que genera el sistema con un email. Para así poder hacer más cosas aún. Cómo enviar notificaciones solo a los Gmail, por ejemplo.
  • Nota: El mail tiene que ir codificado en Base64.

 

setLogLevel(contains)

  • En caso de que queramos realizar algún tipo de depuración, esta función nos permite hacer que la información de interés se muestre en la consola. A parte, le podemos decir que niveles queremos que muestre. Por ejemplo, solo los warnings.
  • Parámetros:
    • contains -> logLevel -> Un objeto que contiene 2 campos:
      • logLevel -> numérico -> muestra la información por el log.
      • visualLevel -> numérico -> muestra la información por un dialogo.
    • Los niveles son los siguientes:
      • 0 -> Nada (por defecto)
      • 1 -> Fatales
      • 2 -> Errores
      • 3 -> Advertencias
      • 4 -> Información
      • 5 -> Depuración
      • 6 -> Todo

 

setLocationShared(shared)

  • Activa, o desactiva, el seguimiento de geolocalización siempre y cuando tengamos los permisos de localización aceptados.
  • Parámetros:
    • shared -> booleano -> Si es verdadero, realizaremos el seguimiento de la geolocalización.

 

addPermissionsObserver()

  • Esta función nos permite conocer, y suscribirnos, cuando han sido realizados alguno de los siguientes eventos:
    • Cuando se ha mostrado el modal de solicitud de permisos para las notificaciones.
    • Cuando un usuario ha aceptado, o declinado, en permiso en el modal.
    • Si se activan, o desactivan, las notificaciones para la app en los ajustes del dispositivo después de la app.
  • Retorna un observable al que nos tenemos que suscribir. En él vienen un objeto con los datos de lo que ha pasado.

 

addSuscriptionObserver()

  • Este método es similar al anterior, pero se suscribe a los eventos de la suscripción y no del estado del sistema. Los eventos son los siguientes:
    • Cuando se obtiene un token de Apple o Google.
    • Obtiene el id de usuario registrado en One Signal.
    • Cuando setSubscription es llamado.
    • Cuando un usuario activa, o desactiva, las notificaciones.
  • Retorna un observable al que nos tenemos que suscribir y cuando nos notifica lleva los datos del estado de la suscripción.

 

addEmailSuscriptionObserver()

  • Esta función es similar a la anterior, pero con la peculiaridad de que se notificará el cambio de las suscripciones sobre el mail.
  • Los eventos que nos serán notificados son los siguientes:
    • Cuando se obtiene un token de Apple o Google.
    • Obtiene el id de usuario registrado en One Signal.
    • Cuando setSubscription es llamado.
    • Cuando un usuario activa, o desactiva, las notificaciones.
  • Nota: Son similares a las de “addSuscriptionObserver” pero solo se lanzarán cuando se haya asociado el mail del cliente con la función “setEmail” que vamos a ver a continuación.
  • Retorna un observable al que nos tenemos que suscribir y contiene la información de la suscripción.

 

setEmail(email, emailAuthToken)

  • Nos permite asociar un email con el dispositivo y el SDK de One Signal.
  • Parámetros
    • email -> string -> El email que queremos asociar al dispositivo.
    • emailAuthToken -> string -> Es opcional.

 

logoutEmail()

  • Si la app implementa algún sistema de desconexión con esta función podrás desasociar el email del dispositivo.

 

clearOneSignalNotifications()

  • Elimina todas las notificaciones de oneSignal pendientes, o enviadas.

 

setRequiresUserPrivacyConsent(required)

  • Nos permite retrasar la inicialización del SDK de OneSignal hasta el que el usuario haya aceptado los permisos de privacidad. Y para por inicializarlo cuando ya los haya aceptado, tendremos que llamar al método “provideUserConsent”, que vamos a ver a continuación, posteriormente para que todo se ponga en marcha.
  • Parámetros:
    • required -> booleano -> Nos permite definir si queremos, o no, usar esta funcionalidad.

 

provideUserConsent(granted)

  • Cómo he explicado en la función de arriba. Este método inicializará todo el sistema una vez que el consentimiento por parte del usuario este aceptado.
  • Nota: Hasta que este método no se haya llamado, el sistema no enviará ningún dato a OneSignal.
  • Parámetros
    • granted -> booleano -> Será para informar al sistema si se han concedido los permisos.

 

userProvidedPrivacyConsent(callback)

  • Esta función nos permite conocer cuando el usuario ha aceptado los permisos de privacidad. Para poder controlarlo tendremos que pasar una función cómo parámetro y dentro de ella nos llegará un booleano que nos permitirá conocer este dato.
  • Parámetros:
    • callback -> función -> Es la función que tenemos que pasarle que será ejecutada.

 

Bien, aquí ya hemos terminado con los métodos. Recordad que son métodos propios, no se incluyen aquí funciones del padre. Si ves que falta alguna, dímelo y la agrego en cuanto lo vea.

Y visto esto, vamos a comentar las interfaces y terminamos el artículo.

 

OSNotification

Esta interfaz nos llega cuando controlamos las notificaciones (notification) con “handleNotificationReceived”.

Recuerdo que todos los campos que vamos a ver a continuación son opcionales así que puede ser que no lleguen, o que lleguen vacíos.

Veamos que tenemos:

  • isAppInFocus -> booleano -> Si la app se encuentra en uso (usándose).
  • shown -> booleano -> Si una notificación fue mostrada al usuario. En caso de que tenga las notificaciones silenciadas será false.
  • androidNotificationId -> number -> El id de la notificación emitida en Android. Se puede usar para editar o elimina la notificación.
  • payload -> OSNotificationPayload -> El payload recibido desde OneSignal. Veremos más abajo que es lo que hace.
  • displayType -> OSDisplayType -> Nos permite definir cómo se va a mostrar la notificación al usuario. Veremos más abajo que es lo que hace.
  • groupedNotifications -> OSNotifcationPayload[] -> Solo para Android y trae la información de todas las notificaciones a la vez.
  • app_id -> string -> El ID de la app registrado en OneSignal.
  • content -> any -> Desde los servers de OneSignal, podemos enviar variables con las notificaciones. Se recuperarán desde aquí.
  • headings -> any -> Similar, pero para la petición de red. Por si trae alguna información adicional.
  • isIos -> boolean -> Nos permite conocer si la notificación es enviada solo a dispositivos iOS.
  • isAndroid -> boolean -> Similar a la anterior, pero para Android.
  • isWP -> boolean -> Similar a las dos anteriores, pero para saber si es Windows Phone.
  • isWP_WNS -> boolean -> Similar a la anterior, nos permite saber si el dispositivo es un Windows.
  • isAdm -> boolean -> Nos permite conocer si es un dispositivo de Amazon.
  • isChrome -> boolean -> Para cuando es un ChromeApp (extensión de navegador).
  • isChromWeb -> boolean -> Lo mismo que la anterior, pero para una webApp en Chrome.
  • isSafari -> boolean -> Para el navegador de Safari de MAC.
  • isAnyWeb -> boolean -> será verdadero si estamos recibiendo la notificación desde cualquier navegador web.
  • includes -> Información automática enviada en la notificación:
    • include_segments
    • exclude_segments
    • include_player_ids
    • include_ios_tokens
    • include_android_reg_ids
    • include_wp_uris
    • include_wp_wns_uris
    • include_amazon_reg_ids
    • include_chrome_reg_ids
    • include_chrome_web_reg_ids
  • app_ids -> string[] -> En caso de que la notificación se haya enviado a más de una app. Aquí vendrá.
  • tags -> any[] -> Los tags que tiene registrados el usuario para esta aplicación en los server de OneSignal.
  • ios_badgeType -> string -> Es el tipo de estilo de notificación que ha usado la app en aplicaciones IOS en el icono.
  • ios_badgeCount -> string -> Será el número que muestra el badge en el icono de la app en aplicaciones iOS.
  • ios_sound -> string -> Datos del sonido de la notificación en aplicaciones iOS.
  • android_sound -> string -> Similar a la anterior, pero para aplicaciones Android.
  • adm_sound -> string -> Similar a las 2 anteriores, pero esta vez para Amazon.
  • wp_sound -> string -> El sonido de la notificación en Windows Phone.
  • wp_wns_sound -> string -> El sonido de la notificación en Windows.
  • data -> any -> Similar a content, pero con más datos. Cómo, por ejemplo, las variables enviadas desde OneSignal.
  • buttons -> any -> Los botones que se han incluido en la notificación e información sobre ellos. Cómo, por ejemplo, si han sido pulsados.
  • collapse_id -> string
  • small_icon -> string -> Será la URL, o nombre del icono, que se haya puesto en la notificación cuando esta no esté expandida.
  • large_icon -> string -> Similar a la anterior, pero para cuando la notificación esté expandida y será el icono grande.
  • big_picture -> string -> En caso de que exista, será la imagen grande que se verá en las notificaciones.
  • Para las 3 anteriores, hay variaciones por cada navegador. Basta con agregarles los siguientes prefijos:
    • adm
    • chrome
    • chrome_web
    • firefox
  • url -> string -> Se puede pegar una URL para que la abramos desde la app. Si existe, va aquí.
  • send_after -> string -> Esta opción es un parámetro que nos permite conocer configuraciones de OneSignal. Por ejemplo, “manda la notificación 5 días después de la última interacción del usuario”.
  • delayed_option -> string
  • delivery_time_of_day -> string -> La hora en la que se ha enviado la notificación.
  • android_led_color -> string -> Lleva consigo el parámetro “hexadecimal” del color con el que se ha enviado la notificación.
  • adroid_accent_color -> string -> Será el color de fondo de la notificación.
  • android_visibility -> number
  • content_available -> boolean
  • amazon_background_data -> boolean
  • template_id -> string
  • android_group -> string -> Enviará el nombre del grupo al que va dirigida la notificación.
  • android_group_message -> any -> Si es un mensaje de grupo, aquí llegará.
  • adm_group -> string -> Similar al android_group pero para dispositivos Amazon
  • adm_group_message -> any -> Similar a android_group_message pero para dispositivos Amazon.
  • ttl -> number -> La caducidad de la aplicación.
  • priority -> number -> Será la prioridad que toma la notificación frente a otras que haya en la cola.
  • ios_category -> string -> Similar a los grupos, pero esta vez para iOS.

 

Bueno, pues con esto hemos terminado la interfaz, OSNotification. La realidad es que es la más extensa de todas, no te asustes. Ahora vamos con las que faltan para completar todo el artículo.

OSLockScreenVisibility

Esta es una interfaz que contiene 3 campos. Y cómo su nombre indica, se usar cómo parámetro de configuración para la visualización de la notificación cuando la pantalla está apagada.

  • Public, con valor 1 -> Se usa para que esté todo visible y es la opción por defecto.
  • Private, con valor 0 -> El contenido está escondido.
  • Secret, con valor -1 -> Indica que no se muestra nada.

 

OSDisplayType

Esta se usa para la configurar de cómo queremos que se muestre la notificación.

  • None -> con valor 0 -> Notificación silenciada, el inFocusDisplaying está deshabilitado.
  • InAppAlert -> con valor 1 -> Es la opción por defecto y usará el sistema nativo del dispositivo para mostrar un alert.
  • Notification -> con valor 2 -> Usará el sistema nativo para mostrar una notificación.

 

OSNotificationPayload

Esta interfaz llega dentro de OSNotification, cómo hemos visto en su sección, y trae consigo más datos sobre la notificación. Estos datos son los siguientes:

  • notificationID -> string -> La ID de la notificación en OneSignal.
  • title -> string El título de la notificación.
  • body -> string -> El mensaje extendido, o cuerpo, de la petición.
  • additionalData -> any -> Esto es un campo en el que se puede meter lo que queramos y recuperarlo desde el receptor de la notificación.
  • smallIcon -> string -> El nombre del recurso que ocupa el SmallIcon.
  • largeIcon -> string -> Similar al anterior, pero para el icono grande.
  • bigPicture -> string -> La url de la imagen seteada en la notificación.
  • smallIconAcentColor -> string -> El color de fondo acentuado del icono pequeño.
  • launchURL -> string -> La URL a abrir cuando se abra la notificación.
  • sound -> string -> Es el sonido que se utiliza cuando se muestra la notificación.
  • ledColor -> string -> Será el color del que se iluminará el LED cuando llegue la notificación. Y solo está disponible para Android.
  • lockScreenVisibility -> OSLockScreenVisibility -> Si subes un poco podrás ver la especificación de este campo, pero básicamente nos permite definir el comportamiento de la notificación cuando está la pantalla bloqueada.
  • groupKey -> string -> Solo está disponible en Android, y contiene la KEY del grupo al que ha sido enviada la notificación.
  • groupMessage -> string -> El texto de resumen mostrado en la notificación.
  • actionButtons -> OSActionButton[] -> Una lista con los botones que hay en la notificación. La clase la veremos ahora, más abajo.
  • fromProjectNumber -> string -> En caso de que lo tengamos asociado con un proyecto de Firebase, aquí llegará el nombre de este.
  • priority -> number -> La prioridad que tiene la notificación.
  • rawPayload -> string -> Es el cuerpo del payload sin formatear.

Bueno, pues otra cosa más terminada. Ya nos hemos quitado lo más gordo.

OSActionButton

Desde aquí accederemos a los parámetros de los botones que se ponen en la notificación. Hemos visto que están dentro de “OSNotificationPayload”.

Solo tienen los siguientes 3 campos:

  • id -> string -> La id asignada al botón.
  • text -> string -> El texto que aparece en el botón.
  • icon -> string -> Solo está disponible para Android y será el nombre del icono que contiene el botón.

 

OSBackgroundImageLayout

  • image -> string -> La URL, o el nombre, de la imagen de fondo usada en una notificación.
  • titleTextColor -> Será el color del texto del título de la notificación.
  • bodyTextColor -> Será el color del text del cuerpo de la notificación.

 

OSNotificationOpenedResult

  • action -> string -> Contiene el estado del resultado.
  • notification -> OSNotification -> Contiene una instancia de la notificación. Esta clase la hemos visto arriba. Si no sabes lo que lleva échale un vistazo.

OSActionType

Esta interfaz contiene los campos de evaluación para revisar que es lo que ha hecho el usuario con ella.

  • Opened -> con valor 0 -> El usuario simplemente ha abierto la notificación.
  • ActionTake -> con valor 1 -> El usuario ha realizado alguna acción en la notificación. Cómo, por ejemplo, abrirla desde un botón.

 

Por fin, por fin, hemos terminado. Después de 4000+ palabras de tutorial, por fin hemos acabado. La verdad que se me ha hecho un poco tedioso. Madre mía. Pero bueno, aquí está. Y seguro, y pongo la mano en el fuego, de que es la mejor que hay en internet en español.

 

Y el tutorial en vídeo para los más ganduletes

 

Algo más que quizás te interese

La optimización constante de tu logo es una de las estrategias ASO que más retorno te va a dar al principio de la vida de una aplicación. Para ayudarte con esto hemos hecho pública una herramienta propia para evalues, mejores y optimizes tus logos cómo lo hacemos nosotros. Es una IA entrenada con todos los logos de Google Play y aquí tienes el enlace. No te espoileo más, entra al enlace.

 

Bueno, pues solo queda despedirme y darte de nuevo las gracias por estar aquí. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien :)

Otros artículos que te pueden interesar

PayPal Ionic | Toda la información necesaria aquí

¿Quieres cobrar a tus usuario desde dentro de tu aplicación hecha en Ionic a trav&e...

Call Directory Ionic - ¡Qué es y cómo se usa!

¿Necesitas que tu usuario acceda a su directorio de llamadas y contactos desde tu aplicaci...

Action Sheet Ionic - Ejemplos / Examples y más ...

Así que quieres incluir un menú de acciones flotante con el plugin Action Sheet Ion...

FCM Ionic | Aquí te enseño a usarlo cómo un PRO

¿Quieres enviar notificaciones Push en tu aplicación Ionic mediante FCM Ionic c&oac...

SearchBar en Ionic - Qué es y cómo lo podemos usar

¿Pensando en incluir una barra de búsqueda, o search bar, en tu aplicación d...

Ionic Camera - Cómo usarla con ejemplos incluidos

¿Pensando en incluir funcionalidades de cámara en tu app Ionic con el compomente Io...

File Transfer Ionic | Aquí tienes la guía más c...

¿Necesitas que tu usuario pueda enviar, o recibir, archivos por internet desde tu app? O, ...

Ionic Slider con ejemplos claros y prácticos

¿Quieres hacer un step by step, o montar un carrousel de imágenes en tu app? O, tal...