Integración de mensajería en la nube de Firebase para aplicaciones híbridas de Cordova

Este es un recorrido básico y directo sobre cómo implementar notificaciones push en Android e iOS utilizando el complemento cordova para fcm y Google Firebase FCM desde cero. Usaré Ubuntu 16.04 LTS para esto, pero el sistema operativo utilizado para el desarrollo no debería importar mucho.

Integración de FCM para aplicaciones híbridas de Cordova

Implementación de Android

Crear una carpeta vacía pushSample

cd '/opt/lampp/htdocs' mkdir pushSample cd pushSample cordova create pushSample cd pushSample cordova platform add android cordova plugin add cordova-plugin-FCM

Al agregar el complemento cordova FCM, se mostrará un error:

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.

Nota: Esto se debe a que no hemos agregado el archivo google-services.json, que debe crearse en los siguientes pasos.

A continuación, abra la consola de Google Firebase y Agregar proyecto (básicamente significa crear un nuevo proyecto)

Una vez creado el proyecto, haga clic en la sección Notificaciones en el panel lateral izquierdo.

Ahora haga clic en el ícono de Android para agregar soporte de plataforma Android a nuestro proyecto.

En el siguiente formulario emergente, complete los detalles de la siguiente manera: Nombre del paquete de Android: el nombre o ID del paquete es el identificador único de una aplicación en Play Store. Tenga en cuenta que es un valor muy importante que no se puede cambiar para una aplicación una vez que se carga en Play Store. Será en la sintaxis de nombre de dominio inversa: por ejemplo, hello.pushSample.com tendrá la identificación de la aplicación: com.pushSample.hello. También en el archivo config.xml de su proyecto cordova, establezca el mismo ID de aplicación. Para nuestro proyecto de muestra estará en: pushSample / pushSample / config.xml, por ejemplo, para mí el contenido de este archivo es:

  HelloCordova  A sample Apache Cordova application that responds to the deviceready event.   Apache Cordova Team                  

Tenga en cuenta la etiqueta

Aquí el atributo id es el paquete de Identificación del cual se emitirá por defecto io.cordova.hellocordova cambiarlo por el ID de aplicación que ha especificado en la consola de base de fuego. Usaré com.pushSample.hello

El siguiente campo que se debe completar en la ventana emergente de la consola de firebase es:

Apodo de la aplicación (opcional): este puede ser el mismo nombre de la aplicación que se muestra en el menú de la aplicación, esto también se puede cambiar en el config.xml, por defecto será HelloCordova, lo actualizaré a PushSample

Certificado de firma de depuración SHA-1 (opcional): esto es opcional, déjelo en blanco.

A continuación, haga clic en Registrar aplicación

El siguiente paso es descargar el archivo json de los servicios de Google .

descargar google services json

Haga clic en el botón Descargar google-services.json , que debería descargar el archivo a su PC.

Una vez que obtenga el archivo, péguelo en la carpeta raíz de su proyecto cordova, en mi caso:

/opt/lampp/htdocs/pushSample/pushSample

Siguiente construye el proyecto

cordova build android

Después de agregar el archivo google-services.json, debería compilarse correctamente.

A continuación, tenemos que escribir el código del lado del cliente para manejar las notificaciones push:

FCMPlugin.getToken(function(token) { //this is the FCM token which can be used //to send notification to specific device console.log(token); //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) ) //Here you define your application behaviour based on the notification data. FCMPlugin.onNotification(function(data) { console.log(data); //data.wasTapped == true means in Background : Notification was received on device tray and tapped by the user. //data.wasTapped == false means in foreground : Notification was received in foreground. Maybe the user needs to be notified. // if (data.wasTapped) { // //Notification was received on device tray and tapped by the user. // alert(JSON.stringify(data)); // } else { // //Notification was received in foreground. Maybe the user needs to be notified. // alert(JSON.stringify(data)); // } }); });

Básicamente, el código primero llama a la función getToken para obtener un token FCM de firebase, luego, en la devolución de llamada, registra otra devolución de llamada onNotification para manejar lo que sucede cuando se recibe una notificación de inserción.

la función onNotification tiene un valor de datos que contiene los datos de notificación. data.wasTapped indica si la notificación se envía cuando la aplicación está en primer plano o en segundo plano, de modo que podamos definir una lógica separada para cada caso. Ahora, para activar una notificación push de muestra, haga clic en la sección Notificación en el panel lateral izquierdo, esto ahora debería mostrarle el redactor de notificaciones de base de fuego, que muestra la lista de notificaciones anteriores enviadas.

En caso de que aún no haya enviado ninguna notificación automática. Debería ver un botón para enviar su primera notificación .

Nota: El redactor de notificaciones se verá así:

envía tu primera notificación

Nota Al enviar una notificación push usando la consola de base de fuego, debe seleccionar el nombre de la aplicación com.pushSample.hello en mi caso.

Para enviar los datos específicos de la aplicación personalizada, seleccione opciones avanzadas -> Pares clave-valor.

opciones avanzadas

El objeto de datos en la devolución de llamada onNotification tendrá el siguiente aspecto

{myKey2: "valuefor2", myKey: "valuefor1", wasTapped: false}

También tenga en cuenta que al enviar notificaciones push usando las API REST desde su servidor de aplicaciones en lugar del redactor de notificaciones de base de fuego, debe usar la siguiente sintaxis:

//POST: //fcm.googleapis.com/fcm/send //HEADER: Content-Type: application/json //HEADER: Authorization: key=AIzaSy******************* { "notification":{ "title":"Notification title", "body":"Notification body", "sound":"default", "click_action":"FCM_PLUGIN_ACTIVITY", "icon":"fcm_push_icon" }, "data":{ "param1":"value1", "param2":"value2" }, "to":"/topics/topicExample", "priority":"high", "restricted_package_name":"" } //sound: optional field if you want sound with the notification //click_action: must be present with the specified value for Android //icon: white icon resource name for Android >5.0 //data: put any "param":"value" and retreive them in the JavaScript notification callback //to: device token or /topic/topicExample //priority: must be set to "high" for delivering notifications on closed iOS apps //restricted_package_name: optional field if you want to send only to a restricted app package (i.e: com.myapp.test)

Nota: " acción de clic ": el campo "FCM PLUGIN_ACTIVITY" es muy importante, ya que no mencionarlo no ejecutará la devolución de llamada onNotification en modo de primer plano.

hecho con la implementación de Android

Implementación de iOS

Para la implementación de iOS, necesitaremos que se generen las siguientes cosas en la página del desarrollador de Apple. Estoy usando XCODE 8.3

ID de la aplicación: com.example.app Apple Push Notification Authentication Key (APNs Auth Key) Perfil de aprovisionamiento de desarrollo con notificaciones push habilitadas. Certificados APN

Además, los documentos de Firebase para notificaciones push son un excelente punto de partida en profundidad.

Nota: No puede ejecutar notificaciones push en el simulador, necesitará un dispositivo real.

Vamos a empezar.

En primer lugar, inicie sesión en la consola del desarrollador de firebase y seleccione un proyecto existente o cree un nuevo proyecto, usaremos el mismo proyecto pushSample. En la descripción general del proyecto, agregue otra aplicación con iOS como plataforma. En la ventana emergente que aparece, ingrese los siguientes detalles:

  • Paso 1 ID del paquete: este es el identificador único que se utiliza para identificar una aplicación en la tienda de aplicaciones de Apple, debe ser el mismo que el ID del paquete que especificará en el archivo config.xml del proyecto cordova o la sección Bundle Id en xCode . vamos a utilizar com.pushSample.hello nombre de la aplicación : Esta es la opción de identificador de nombre de Nick, vamos a utilizar el mismo nombre que se mostrará en el menú de aplicaciones iOS que es PushSample. ID de la tienda de aplicaciones : déjelo en blanco.

Una vez que haga clic en registrar la aplicación, aparecerá el paso 2 de la aplicación iOS.

  • Paso 2 Aquí haga clic en el botón de descarga Googleservice-info.plist para descargar el archivo que usaremos en los pasos posteriores.

Podemos omitir los pasos 3 y 4 , ya que el complemento cordova FCM los manejará internamente.

Una vez que se haya agregado la aplicación iOS a su proyecto, haga clic en el icono de engranaje junto a la etiqueta de descripción general en el panel lateral izquierdo y seleccione la configuración del proyecto. (Consulte la imagen de abajo). Esto debería abrir por defecto la pestaña General de la configuración de su proyecto.

Configuración del proyecto

A continuación, haga clic en su aplicación iOS en Sus aplicaciones -> Aplicaciones iOS. En los detalles de la aplicación de iOS, actualice el Prefijo de ID de la aplicación , el valor que obtendrá en el Centro de miembros de Apple en la pestaña de membresía.

Ahora cambie a la pestaña Mensajería en la nube -> sección de configuración de la aplicación iOS.

mensajería en la nube

Here as discussed earlier upload the APNs Auth Key you generated in the Apple member center. Next we do the client side app setup. Create a new folder sampleApp in your development folder, for me it is

/Volumes/Development/

so the new folder will be

/Volumes/Development/pushSample cd /Volumes/Development/pushSample

Create a new cordova project, Note : Use sudo if required

cordova create pushSample cd pushSample

Now add the latest iOS platform

sudo cordova platform add ios

Now paste the Googleservice-info.plist file we downloaded earlier in the cordova project root folder, for me it is

/Volumes/Development/pushSample/pushSample

add the cordova fcm plugin.

cordova plugin add cordova-plugin-fcm

Update the default app id and app name with the bundle id we decided earlier while configuring firebase console and the app name.

 PushSample

At this point the sample code will have an app.js file, which you can modify and add the getToken and onNotification functions same as android. The javascript code is same for both platforms.

Next run cordova build command

sudo cordova build ios

Una vez que el comando cordova build sea exitoso, abra la aplicación en xcode. Para hacer esto, abra el archivo xcode.proj, que se ubicará en

your_cordova_project/platforms/ios/app_name.xcodeproj

para mi lo es

/Volumes/Development/pushSample/pushSample/platforms/ios/PushSample.xcodeproj
Proyecto Xcode

A continuación, habilite las notificaciones automáticas en la pestaña Capacidades del proyecto.

Conecte un dispositivo real y ejecute la aplicación.

Ahora active la notificación push del redactor de notificaciones de base de fuego y todo debería funcionar ...

feliz steve