Notificaciones push de Firebase en React

 

 

 

  • SmashingConf Friburgo 2024
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. Tipos de mensajes de Firebase
    2. Configurar un proyecto de Firebase
      1. Interfaz
      2. backend
    3. Empezando
    4. Configuración de mensajes de administrador de Firebase en el backend
    5. Envío de notificaciones automáticas desde el backend
    6. Configuración de notificaciones de mensajería de Firebase en el cliente

    En este tutorial, aprenderemos cómo trabajar con las notificaciones push de Firebase en el backend y el frontend. Configuraremos el sistema de notificaciones con un servidor back-end Express. Luego, escucharemos las notificaciones en una aplicación frontal de React.

     

    Las notificaciones se han convertido en una parte estable de la web hoy en día. No es raro encontrar sitios que soliciten permiso para enviar notificaciones a su navegador. La mayoría de los navegadores web modernos implementan la API push y son capaces de manejar notificaciones push. Una comprobación rápida de caniuse muestra que la API goza de un amplio soporte entre los navegadores modernos basados ​​en Chrome y el navegador Firefox.

    Existen varios servicios para implementar notificaciones en la web. Los más notables son Pusher y Firebase . En este artículo, implementaremos notificaciones automáticas con el servicio Firebase Cloud Messaging (FCM), que es "una solución de mensajería multiplataforma que le permite enviar mensajes de manera confiable y sin costo".

    Supongo que el lector está algo familiarizado con la escritura de una aplicación back-end en Express.js y/o algo de familiaridad con React. Si se siente cómodo con cualquiera de estas tecnologías, entonces podría trabajar con el frontend o el backend. Primero implementaremos el backend y luego pasaremos al frontend. De esa manera, puedes utilizar la sección que más te guste.

    Entonces empecemos.

    Tipos de mensajes de Firebase

    La documentación de Firebase especifica que una implementación de FCM requiere dos componentes.

    1. Un entorno confiable, como Cloud Functions para Firebase o un servidor de aplicaciones en el que crear, orientar y enviar mensajes.
    2. Una aplicación cliente de iOS, Android o web (JavaScript) que recibe mensajes a través del servicio de transporte específico de la plataforma correspondiente.

    Nos encargaremos del elemento 1 en nuestra aplicación de back-end express y del elemento 2 en nuestra aplicación de front-end de reacción.

     

    Los documentos también afirman que FCM nos permite enviar dos tipos de mensajes.

    1. Los mensajes de notificación (a veces considerados "mensajes de visualización") son manejados automáticamente por el SDK de FCM.
    2. Los mensajes de datos son manejados por la aplicación cliente.

    Los mensajes de notificación son manejados automáticamente por el navegador en la web. También pueden aceptar una datacarga útil opcional, que debe ser manejada por la aplicación cliente. En este tutorial, enviaremos y recibiremos mensajes de datos, que deben ser manejados por la aplicación cliente. Esto nos brinda más libertad para decidir cómo manejar el mensaje recibido.

    Configurar un proyecto de Firebase

    Lo primero que debemos hacer es configurar un proyecto de Firebase. FCM es un servicio y, como tal, necesitaremos algunas claves API. Este paso requiere que tengas una cuenta de Google. Crea uno si aún no tienes uno. Puede hacer clic aquí para comenzar.

    Después de configurar su cuenta de Google, diríjase a la consola Firebase .

    Haga clic en agregar proyecto . Ingrese un nombre para su proyecto y haga clic en continuar . En la siguiente pantalla, puede optar por desactivar los análisis. Siempre puedes activarlo más tarde desde el menú Análisis de la página de tu proyecto. Haga clic en continuar y espere unos minutos hasta que se cree el proyecto. Generalmente es menos de un minuto. Luego haga clic en continuar para abrir la página de su proyecto.

    Una vez que hayamos configurado con éxito un proyecto, el siguiente paso es obtener las claves necesarias para trabajar con nuestro proyecto. Cuando trabajamos con Firebase, debemos completar un paso de configuración para el frontend y el backend por separado. Veamos cómo podemos obtener las credenciales necesarias para trabajar con ambos.

    Interfaz

    En la página del proyecto, haga clic en el ícono para agregar Firebase a su aplicación web.

    Agregue Firebase a un proyecto web. ( Vista previa grande )

    Dale un apodo a tu aplicación . No es necesario configurar el alojamiento de Firebase. Haga clic en Registrar aplicación y espere unos segundos para completar la configuración. En la siguiente pantalla, copie las credenciales de la aplicación y guárdelas en algún lugar. Puedes dejar esta ventana abierta y volver a ella más tarde.

    Credenciales de la aplicación web Firebase. ( Vista previa grande )

     

    Necesitaremos el objeto de configuración más adelante. Haga clic en continuar a la consola para regresar a su consola.

    backend

    Necesitamos una credencial de cuenta de servicio para conectarnos con nuestro proyecto Firebase desde el backend. En la página de su proyecto, haga clic en el ícono de ajustes junto a Descripción general del proyecto para crear una cuenta de servicio para usar con nuestro backend Express. Consulte la siguiente captura de pantalla. Siga los pasos del 1 al 4 para descargar un JSONarchivo con las credenciales de su cuenta. Asegúrese de mantener el archivo de su cuenta de servicio en un lugar seguro.

    Pasos para crear una credencial de cuenta de servicio. ( Vista previa grande )

    Le aconsejaré que no lo descargue hasta que esté listo para usarlo. Sólo recuerde volver a estas secciones si necesita un repaso.

    Ahora hemos configurado con éxito un proyecto de Firebase y le hemos agregado una aplicación web. También hemos visto cómo obtener las credenciales que necesitamos para trabajar tanto con el frontend como con el backend. Trabajemos ahora en el envío de notificaciones automáticas desde nuestro backend expreso.

    Empezando

    Para facilitar la realización de este tutorial, configuré un proyecto en Github con un servidor y un cliente. Por lo general, tendrá un repositorio separado para su backend y frontend respectivamente. Pero los he reunido aquí para que sea más fácil trabajar en este tutorial.

    Cree una bifurcación del repositorio, clónelo en su computadora y pongamos en marcha nuestros servidores front-end y back-end.

    1. Bifurca el repositorio y revisa la 01-get-startedsucursal.
    2. Abra el proyecto en el editor de código de su elección y observe el contenido.
    3. En la raíz del proyecto, tenemos dos carpetas client/y server/. También hay un .editorconfigarchivo, un .gitignorey un README.md.
    4. La carpeta del cliente contiene una aplicación React. Aquí es donde escucharemos las notificaciones.
    5. La carpeta del servidor contiene una aplicación express. Desde aquí es desde donde enviaremos las notificaciones. La aplicación es del proyecto que creamos en mi otro artículo Cómo configurar un proyecto backend de API Express con PostgreSQL .
    6. Abra una terminal y navegue hasta la client/carpeta. Ejecute el yarn installcomando para instalar las dependencias del proyecto. Luego ejecute yarn startpara iniciar el proyecto. Visita https://localhost:3000para ver la aplicación en vivo.
    7. Cree un .envarchivo dentro de la server/carpeta y agregue la CONNECTION_STRINGvariable de entorno. Esta variable es una URL de conexión de base de datos que apunta a una base de datos PostgreSQL. Si necesita ayuda con esto, consulte la Connecting The PostgreSQL Database And Writing A Modelsección de mi artículo vinculado. También debes proporcionar la PORTvariable de entorno ya que React ya se ejecuta en el puerto 3000. Lo puse PORT=3001en mi .envarchivo.
    8. Abra una terminal separada y navegue hasta la server/carpeta. Ejecute el yarn installcomando para instalar las dependencias del proyecto. Ejecute yarn runQuerypara crear la base de datos del proyecto. Ejecute yarn startdevpara iniciar el proyecto. Visite https://localhost:3001/v1/messages y debería ver algunos mensajes en formato JSON.

    Servidores frontend y backend en ejecución. ( Vista previa grande )
    Aplicación de interfaz React ejecutándose. ( Vista previa grande )
    Aplicación de backend Express ejecutándose. ( Vista previa grande )

     

    Ahora que tenemos nuestras aplicaciones de front-end y back-end en ejecución, implementemos notificaciones en el backend.

    Configuración de mensajes de administrador de Firebase en el backend

    El envío de notificaciones push con FCM en el backend requiere el SDK de administración de Firebase o los protocolos del servidor FCM . Usaremos el SDK de administrador en este tutorial. También está el compositor de notificaciones , que es bueno para "probar y enviar mensajes de marketing y participación con potentes análisis y segmentación integrados".

    En su terminal, navegue hasta la server/carpeta e instale el SDK de administrador.

    # install firebase admin SDKyarn add firebase-admin

    Abra su .envarchivo y agregue la siguiente variable de entorno.

    GOOGLE_APPLICATION_CREDENTIALS="path-to-your-service-account-json-file"

    El valor de esta variable es la ruta a las credenciales de su cuenta de servicio descargadas. En este punto, probablemente quieras volver a la sección donde creamos la cuenta de servicio para nuestro proyecto. Debe copiar el código de inicialización del administrador desde allí y también descargar el archivo de clave de su cuenta de servicio. Coloque este archivo en su server/carpeta y agréguelo a su .gitignore.

    Recuerde, en un proyecto real, debe almacenar este archivo en una ubicación muy segura en su servidor. No dejes que caiga en manos equivocadas.

    Abra server/src/settings.jsy exporte la ruta del archivo de credenciales de la aplicación.

    # export the service account key file pathexport const googleApplicationCredentials = process.env.GOOGLE_APPLICATION_CREDENTIALS;

    Cree un archivo server/src/firebaseInit.jsy agregue el siguiente código.

    import admin from 'firebase-admin';import { googleApplicationCredentials } from './settings'const serviceAccount = require(googleApplicationCredentials);admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL: 'your-database-url-here'});export const messaging = admin.messaging();

    Importamos el módulo de administración desde firebase-admin. Luego inicializamos la aplicación de administración con nuestro archivo de cuenta de servicio. Finalmente, creamos y exportamos la función de mensajería.

    Tenga en cuenta que podría haber pasado la ruta al archivo de clave de mi cuenta de servicio directamente, pero es la opción menos segura. Utilice siempre variables de entorno cuando maneje información confidencial.

    Para comprobar que completó la inicialización correctamente, abra server/src/app.js e incluya las siguientes líneas.

     

    import { messaging } from './firebaseInit'console.log(messaging)

    Importamos la instancia de mensajería y la registramos en la consola. Deberías ver algo como la imagen de abajo. Debe eliminarlos una vez que verifique que su administrador esté configurado correctamente.

    Registro de consola de la función de mensajería. ( Vista previa grande )

    Si tiene algún problema, puede consultar la rama 02-connect-firebase-admin de mi repositorio para comparar.

    Ahora que hemos configurado correctamente los mensajes de administrador, escribamos el código para enviar las notificaciones.

    Envío de notificaciones automáticas desde el backend

    La configuración del mensaje de datos de FCM es muy sencilla. Todo lo que tiene que hacer es proporcionar uno o más objetivos y uno JSONde los mensajes que desea enviar a los clientes. No hay claves requeridas en el archivo JSON. Sólo usted decide qué pares clave-valor desea incluir en los datos. El formulario de mensajes de datos funciona en todas las plataformas, por lo que nuestra notificación también podría ser procesada por dispositivos móviles.

    Hay configuraciones adicionales para otras plataformas. Por ejemplo, hay androidconfiguraciones que solo funcionan con dispositivos Android y apnsconfiguraciones que funcionan solo en dispositivos iOS. Puedes encontrar la guía de configuración aquí .

    Cree un archivo server/src/notify.jse ingrese el siguiente código.

    import { messaging } from './firebaseInit';export const sendNotificationToClient = (tokens, data) = { // Send a message to the devices corresponding to the provided // registration tokens. messaging .sendMulticast({ tokens, data }) .then(response = { // Response is an object of the form { responses: [] } const successes = response.responses.filter(r = r.success === true) .length; const failures = response.responses.filter(r = r.success === false) .length; console.log( 'Notifications sent:', `${successes} successful, ${failures} failed` ); }) .catch(error = { console.log('Error sending message:', error); });};

    Creamos una función que acepta una matriz de cadenas de tokens y un objeto de datos. Cada cadena de token representa un dispositivo que aceptó recibir notificaciones de nuestra aplicación de back-end. La notificación se enviará a cada cliente en la matriz de tokens. Veremos cómo generar el token en la sección de inicio del tutorial. Betflix Apk 2023 ✔️ APP Plus ✔️ Descargar App Oficial

    El sendMulticastmétodo de la instancia de mensajería devuelve una promesa. En caso de éxito, obtenemos una matriz a partir de la cual contamos el número de éxitos y las notificaciones fallidas. Ciertamente podrías manejar esta respuesta como quieras.

    Usemos esta función para enviar una notificación cada vez que se agrega un nuevo mensaje a la base de datos.

    Abra server/src/controllers/message.jsy actualice la addMessagefunción.

    import { sendNotificationToClient } from '../notify';export const addMessage = async (req, res) = { const { name, message } = req.body; const columns = 'name, message'; const values = `'${name}', '${message}'`; try { const data = await messagesModel.insertWithReturn(columns, values); const tokens = []; const notificationData = { title: 'New message', body: message, }; sendNotificationToClient(tokens, notificationData); res.status(200).json({ messages: data.rows }); } catch (err) { res.status(200).json({ messages: err.stack }); }};

    Esta función maneja una solicitud de publicación en el /messagespunto final. Una vez que un mensaje se crea exitosamente, la función envía una notificación sendNotificationToClientseguida de la respuesta al cliente. La única pieza que falta en este código es la tokensde enviar las notificaciones.

     

    Cuando conectemos la aplicación cliente, copiaremos el token generado y lo pegaremos en este archivo. En una aplicación de producción, almacenará los tokens en algún lugar de su base de datos.

    Con este último fragmento de código, hemos completado la implementación del back-end. Pasemos ahora a la interfaz.

    La rama correspondiente en mi repositorio en este momento es 03-send-notification .

    Configuración de notificaciones de mensajería de Firebase en el cliente

    Echemos un vistazo a los componentes principales de nuestra aplicación React front-end.

    Abra client/src/App.jse inspeccione el contenido. Dejaré de lado la mayoría de las declaraciones de importación y solo miraré la lógica del programa.

    # library importsimport { Messaging } from './Messaging';axios.defaults.baseURL = 'https://localhost:3001/v1';const App = () = { return ( Fragment ToastContainer autoClose={2000} position="top-center" / Navbar bg="primary" variant="dark" Navbar.Brand href="#home"Firebase notifictations with React and Express/Navbar.Brand /Navbar Container className="center-column" Row Col Messaging / /Col /Row /Container /Fragment );};export default App;

    Este es un componente de reacción normal diseñado con react-bootstrap . Hay un componente de brindis justo en la parte superior de nuestra aplicación, que usaremos para mostrar notificaciones. Tenga en cuenta que también configuramos baseURLpara la axiosbiblioteca. Todo lo importante sucede dentro del Messaging /componente. Veamos ahora su contenido.

    Abra client/src/Messaging.jse inspeccione el contenido.

    export const Messaging = () = { const [messages, setMessages] = React.useState([]); const [requesting, setRequesting] = React.useState(false); React.useEffect(() = { setRequesting(true); axios.get("/messages").then((resp) = { setMessages(resp.data.messages); setRequesting(false); }); }, []); return ( Container {/* form goes here */} div className="message-list" h3Messages/h3 {requesting ? ( Spinner animation="border" role="status" span className="sr-only"Loading.../span /Spinner ) : ( {messages.map((m, index) = { const { name, message } = m; return ( div key={index} {name}: {message} /div ); })} / )} /div /Container );};

    Tenemos dos variables de estado messagesy requesting. messagesrepresenta la lista de mensajes de nuestra base de datos y requestingsirve para alternar el estado de nuestro cargador. Tenemos un React.useEffectbloque donde realizamos nuestra llamada API al /messagespunto final y configuramos los datos devueltos en nuestro messagesestado.

     

    En la declaración de devolución, asignamos los mensajes y mostramos los campos namey message. En la misma página incluimos un formulario para crear nuevos mensajes.

    Formik initialValues={{ name: "", message: "", }} onSubmit={(values, actions) = { setTimeout(() = { alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }, 1000); }} {(prop) = { const { handleSubmit, handleChange, isSubmitting } = prop; return ( InputGroup className="mb-3" InputGroup.Prepend InputGroup.TextName/InputGroup.Text /InputGroup.Prepend FormControl placeholder="Enter your name" onChange={handleChange("name")} / /InputGroup InputGroup className="mb-3" InputGroup.Prepend InputGroup.TextMessage/InputGroup.Text /InputGroup.Prepend FormControl onChange={handleChange("message")} placeholder="Enter a message" / /InputGroup {isSubmitting ? ( Button variant="primary" disabled Spinner as="span" size="sm" role="status" animation="grow" aria-hidden="true" / Loading... /Button ) : ( Button variant="primary" onClick={() = handleSubmit()} Submit /Button )} / ); }}/Formik

    Estamos usando la Formikbiblioteca para administrar nuestro formulario. Pasamos el Formik /componente un initialvaluesprops, un onSubmitprop y el componente del formulario que queremos renderizar. A cambio, recuperamos algunas funciones útiles, como handleChangelas que podemos usar para manipular las entradas de nuestro formulario y handleSubmitlas que usamos para enviar el formulario. isSubmittinges un booleanque usamos para alternar el estado del botón de envío.

    Te animo a que pruebes formik. Realmente simplifica el trabajo con formularios. Reemplazaremos el código en el onSubmitmétodo más adelante.

    Implementemos ahora el método que solicitará el permiso de un navegador y le asignaremos un token.

    Para comenzar a usar Firebase en el frontend, debemos instalar la biblioteca cliente Firebase JavaScript . Tenga en cuenta que este es un paquete diferente del firebase-admin SDK.

    # install firebase client libraryyarn add firebase

    Cree un archivo client/src/firebaseInit.jsy agregue el siguiente contenido.

    import firebase from 'firebase/app';import 'firebase/messaging';const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID"};firebase.initializeApp(config);const messaging = firebase.messaging();// next block of code goes here

    Los documentos de Firebase afirman que:

     

    "El cliente Firebase JavaScript completo incluye soporte para Firebase Authentication, Firebase Realtime Database, Firebase Storage y Firebase Cloud Messaging".

    Entonces aquí importamos solo la función de mensajería. En este punto, puedes consultar la sección sobre cómo crear un proyecto de Firebase para obtener el configobjeto. Luego inicializamos Firebase y exportamos la función de mensajería. Agreguemos el bloque final de código.

    export const requestFirebaseNotificationPermission = () = new Promise((resolve, reject) = { messaging .requestPermission() .then(() = messaging.getToken()) .then((firebaseToken) = { resolve(firebaseToken); }) .catch((err) = { reject(err); }); });export const onMessageListener = () = new Promise((resolve) = { messaging.onMessage((payload) = { resolve(payload); }); });

    La requestFirebaseNotificationPermissionfunción solicita el permiso del navegador para enviar notificaciones y se resuelve con un token si se concede la solicitud. Este es el token que utiliza FCM para enviar una notificación al navegador. Es lo que activa el mensaje que aparece en los navegadores solicitando permiso para enviar una notificación.

    La onMessageListenerfunción sólo se invoca cuando el navegador está en primer plano. Más adelante, escribiremos una función separada para manejar la notificación cuando el navegador esté en segundo plano.

    Abra client/src/App.jse importe la requestFirebaseNotificationPermissionfunción.

    import { requestFirebaseNotificationPermission } from './firebaseInit'

    Luego, dentro de la función de la aplicación, agregue el siguiente código antes de la declaración de devolución.

    requestFirebaseNotificationPermission() .then((firebaseToken) = { // eslint-disable-next-line no-console console.log(firebaseToken); }) .catch((err) = { return err; });

    Una vez que la aplicación se carga, esta función se ejecuta y solicita permiso al navegador para mostrar notificaciones. Si se concede el permiso, registramos el token. En una aplicación de producción, debes guardar el token en algún lugar al que tu backend pueda acceder. Pero para este tutorial, simplemente copiaremos y pegaremos el token en la aplicación de back-end.

    Ahora ejecute su aplicación y debería ver el mensaje de solicitud de notificación. Haga clic en permitir y espere a que el token se registre en la consola. Dado que le ha otorgado permiso al navegador, si actualizamos la página ya no verá el banner, pero el token seguirá registrado en la consola.

    Solicitud de aplicación para mostrar notificaciones. ( Vista previa grande )

    Debes saber que el navegador Firefox (v75) no solicita permiso de notificación de forma predeterminada. La solicitud de permiso debe activarse mediante una acción generada por el usuario, como un clic.

    Este es un buen punto para confirmar mis cambios. La rama correspondiente es 04-solicitud-permiso .

    Ahora completemos el código para guardar un mensaje en nuestra base de datos.

    Abra client/src/Messaging.jsy reemplace la onSubmitfunción de nuestro formulario con el siguiente código.

     

    onSubmit={(values, actions) = { axios .post("/messages", values) .then((resp) = { setMessages(resp.data.messages.concat(messages)); actions.setSubmitting(false); toast.success("Submitted succesfully"); }) .catch((err) = { console.log(err); toast.error("There was an error saving the message"); });}}

    Realizamos una postsolicitud al /messagesendpoint para crear un nuevo mensaje. Si la solicitud tiene éxito, tomamos los datos devueltos y los colocamos en la parte superior de la messageslista. También mostramos un brindis de éxito.

    Probémoslo para ver si funciona. Inicie los servidores front-end y back-end. Antes de probar la solicitud de publicación, abra server/src/controllers/messages.jsy comente la línea donde enviamos la notificación.

    # this line will throw an error if tokens is an empty array comment it out temporarily// sendNotificationToClient(tokens, notificationData);

    Intente agregar algunos mensajes a la base de datos. ¿Obras? Genial. Ahora descomente esa línea antes de continuar.

    Copie el token de notificación de la consola del desarrollador y péguelo en la matriz de tokens. El token es una cadena muy larga, como se muestra a continuación.

     const tokens = [ 'eEa1Yr4Hknqzjxu3P1G3Ox:APA91bF_DF5aSneGdvxXeyL6BIQy8wd1f600oKE100lzqYq2zROn50wuRe9nB-wWryyJeBmiPVutYogKDV2m36PoEbKK9MOpJPyI-UXqMdYiWLEae8MiuXB4mVz9bXD0IwP7bappnLqg', ];

    Abra client/src/Messaging.js, importe onMessageListenere invoque justo debajo del useEffectbloque. Cualquier posición dentro de la función está bien siempre que esté antes de la returndeclaración.

    import { onMessageListener } from './firebaseInit'; React.useEffect(() = { ... }, []); onMessageListener() .then((payload) = { const { title, body } = payload.data; toast.info(`${title}; ${body}`); }) .catch((err) = { toast.error(JSON.stringify(err)); });

    El oyente devuelve una promesa que se resuelve en la carga útil de notificación en caso de éxito. Luego mostramos el título y el cuerpo en un brindis. Tenga en cuenta que podríamos haber tomado cualquier otra acción una vez que recibamos esta notificación, pero aquí mantengo las cosas simples. Con ambos servidores en ejecución, pruébelo y vea si funciona.

    ¿Obras? Genial.

    En caso de que tengas problemas, siempre puedes comparar con mi repositorio. La rama correspondiente en este punto es 05-escuchar-notificación .

    Sólo hay una cosa de la que debemos ocuparnos. Ahora mismo sólo podemos ver las notificaciones cuando el navegador está en primer plano. El punto acerca de las notificaciones es que deberían aparecer tanto si el navegador está en primer plano como si no.

    Si enviáramos un mensaje de visualización, es decir, incluyéramos un notificationobjeto en nuestra carga útil de notificación, el navegador se encargará de ello por sí solo. Pero como estamos enviando un mensaje de datos, tenemos que decirle al navegador cómo comportarse en respuesta a una notificación cuando nuestro navegador está en segundo plano.

    Para manejar la notificación en segundo plano, necesitamos registrar un trabajador de servicio con nuestro cliente front-end.

    Cree un archivo client/public/firebase-messaging-sw.jse ingrese el siguiente contenido:

    importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js');importScripts('https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js');const config = { apiKey: "API-KEY", authDomain: "AUTH-DOMAIN", databaseURL: "DATABASE-URL", projectId: "PROJECT-ID", storageBucket: "STORAGE-BUCKET", messagingSenderId: "MESSAGING-SENDER-ID", appId: "APP-ID"};firebase.initializeApp(config);const messaging = firebase.messaging();messaging.setBackgroundMessageHandler(function(payload) { console.log('[firebase-messaging-sw.js] Received background message ', payload); const notificationTitle = payload.data.title; const notificationOptions = { body: payload.data.body, icon: '/firebase-logo.png' }; return self.registration.showNotification(notificationTitle, notificationOptions);});self.a 




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Notificaciones push de Firebase en React

    Notificaciones push de Firebase en React

    SmashingConf Friburgo 2024 Listas de verificación de diseño de interfaz inteligente Índice Tipos de men

    programar

    es

    https://aprendeprogramando.es/static/images/programar-notificaciones-push-de-firebase-en-react-1041-0.jpg

    2024-05-21

     

    Notificaciones push de Firebase en React
    Notificaciones push de Firebase en React

     

     

    Top 20