Cómo integrar notificaciones automáticas en su PWA

En nuestro tutorial de hoy, integraremos las notificaciones automáticas en una PWA usando Firebase o, para ser más específicos, usaremos la función Cloud Messaging que permite el envío de mensajes mediante solicitudes HTTPS.

Aplicaciones web progresivas y notificaciones push

Dado que la aplicación web progresiva es la de un movimiento en constante cambio, no sorprende ver que la tecnología en sí misma se ha vuelto a la par (en cuanto a funciones) con su contraparte de la aplicación nativa.

 Lectura recomendada: PWA vs Native: ¿Cuál te conviene más?

Los activadores de notificaciones brindan a los desarrolladores la capacidad de programar notificaciones, incluso si el dispositivo del usuario está en modo avión.

Jon Krafcik, Chrome Dev Summit 2019

Con todos estos cambios radicales implementados, sería un desperdicio no aprovecharlos para generar aún más ingresos para su PWA. Y ni siquiera es algo demasiado complicado, ya que podría configurar fácilmente una función de notificación automática con este tutorial.

 Lectura recomendada: 9 características imprescindibles de una aplicación web progresiva (PWA) para comercio electrónico

Cómo integrar notificaciones push en tu PWA

En nuestro tutorial de hoy, integraremos las notificaciones automáticas en una PWA usando Firebase , específicamente la función Mensajería en la nube que permite el envío de mensajes usando solicitudes HTTPS.

requisitos previos

• Una cuenta de Firebase (ya que creará un proyecto dentro de Firebase)
• Una aplicación web progresiva. Para una demostración simplificada, usaremos una aplicación create-react, que es una PWA básica que se puede crear usando un comando

Paso 1 : crea una PWA básica

Como crearemos una PWA básica usando create-react-app, primero descarguemos NodeJS. Una vez que haya terminado de instalar NodeJS, abra el símbolo del sistema de NodeJS y ejecute los siguientes comandos.

Para crear una aplicación React simple en su directorio especificado:

 npx create-react-app su-pwa-directorio

Cambie el directorio de trabajo actual a su aplicación React recién creada:

 cd su-pwa-directorio

Agregue la biblioteca JavaScript de Firebase al proyecto:

 npm instalar base de fuego --guardar 

Paso 2: Cree su push-notification.js

El siguiente paso es crear el módulo que se encargará de todos los procesos de notificación. En <your-pwa-directory>\src , cree un archivo llamado push-notification.js .

Primero, creemos una función que inicialice Firebase y pase las claves de su proyecto. Puede encontrar las claves para su proyecto yendo a Firebase > Descripción general del proyecto → Configuración del proyecto y haga clic en este icono:

Esto lo dirigirá a otra página que contiene el SDK de Firebase para su PWA:

Ahora que tenemos las claves para nuestro proyecto, agreguemos el siguiente código en su push-notification.js .

 importar firebase desde 'firebase';
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    dominio de autenticación: "XXXXXXXXXXXXX",
    URL de la base de datos: "XXXXXXXXXXXXX",
    ID del proyecto: "XXXXXXXXXXXX",
    cubo de almacenamiento: "XXXXXXXXXXXX",
    mensajeSenderId: "XXXXXXXXXXXXX",
    ID de aplicación: "XXXXXXXXXXXXX"
  });
}

Con esto, ha creado la función a cargo de todo el procesamiento de sus notificaciones, ahora deberá importarla y llamarla. Edite su index.js así:

 importar React desde 'react';
importar ReactDOM desde 'react-dom';
importar './index.css';
importar la aplicación desde './App';
importar * como serviceWorkerRegistration from './serviceWorkerRegistration';
importar reportWebVitals desde './reportWebVitals';
importar firebase desde 'firebase';
import { initializeFirebase } from './push-notification';
ReactDOM.render(<Aplicación />, document.getElementById('root'));
inicializarFirebase();

Paso 3: Crear un trabajador de servicio

Service Workers es el nombre de la tecnología detrás de una aplicación web progresiva, que impulsa su capacidad fuera de línea, notificaciones automáticas y almacenamiento en caché de recursos.

SimiCart, todo lo que necesita saber sobre las aplicaciones web progresivas

Se requiere un trabajador de servicio para recibir el evento onMessage y, en consecuencia, permitir que se envíen notificaciones al dispositivo del usuario. De manera predeterminada, Firebase busca automáticamente un archivo llamado firebase-messaging-sw.js .

firebase-messaging-sw.js al directorio donde se sirven sus archivos. Dado que el nuestro es un proyecto create-react-app , este firebase-messaging-sw.js irá a nuestra carpeta pública:

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    dominio de autenticación: "XXXXXXXXXXXXX",
    URL de la base de datos: "XXXXXXXXXXXXX",
    ID del proyecto: "XXXXXXXXXXXX",
    cubo de almacenamiento: "XXXXXXXXXXXX",
    mensajeSenderId: "XXXXXXXXXXXXX",
    ID de aplicación: "XXXXXXXXXXXXX"
});
const mensajería = firebase.messaging();

Si aún no has oído hablar de PWA Service Worker, tenemos un artículo exclusivo para que aprendas todo sobre esta increíble tecnología.

Paso 4: Solicite permisos de usuario para enviar notificaciones

¡Es la era de la privacidad y no desea molestar a sus usuarios enviando notificaciones no deseadas y no autorizadas!

Para solicitar el permiso de su usuario, simplemente agregue esto a su push-notification.js :

 importar firebase desde 'firebase';
 
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    dominio de autenticación: "XXXXXXXXXXXXX",
    URL de la base de datos: "XXXXXXXXXXXXX",
    ID del proyecto: "XXXXXXXXXXXX",
    cubo de almacenamiento: "XXXXXXXXXXXX",
    mensajeSenderId: "XXXXXXXXXXXXX",
    ID de aplicación: "XXXXXXXXXXXXX"
  });
}
 
export const askForPermissionToReceiveNotifications = asíncrono () => {
  probar {
    const mensajería = firebase.messaging();
    aguardar mensajería.requestPermission();
    const token = esperar mensajería.getToken();
    console.log('Tu token es:', token);
    
    ficha de retorno;
  } atrapar (error) {
    consola.error(error);
  }
}

Y dado que esta función deberá llamarse desde algún lugar, la agregaremos con solo hacer clic en un botón. Edite el archivo app.js en su directorio /src/ así:

 importar logotipo desde './logo.svg';
importar './Aplicación.css';
import { askForPermissionToReceiveNotifications } from './push-notification';

aplicación de función () {
  devolver (
    <div className="Aplicación">
      <header className="Aplicación-encabezado">
        <img src={logotipo} className="Logotipo de la aplicación" alt="logotipo" />
        <p>
          Edite <code>src/App.js</code> y guarde para volver a cargar.
        </p>
        <un
          className="Aplicación-enlace"
          href="https://reactjs.org"
          objetivo="_en blanco"
          rel="noopener noreferrer"
        >
          aprender reaccionar
        </a>
		 <button onClick={solicitar permiso para recibir notificaciones} >
          Click para recibir notificaciones
        </botón>
      </encabezado>
    </div>
  );
}

exportar la aplicación predeterminada;

Ahora comencemos con hilo nuestro proyecto y debería ver un botón Haga clic para recibir notificaciones así:

Haga clic en el botón y debería ver una ventana emergente solicitando su permiso:

Haga clic en Permitir y verifique la consola de su navegador. Debería ver un mensaje notificándole de su token:

Ahora guarde este token en otro lugar porque lo necesitará en el próximo paso.

Paso 5: Envía notificaciones automáticas con Postman

En los siguientes pasos, utilizaremos Postman para enviar notificaciones mediante el servicio de mensajería en la nube de Firebase.

En Postman, cree una solicitud POST con la siguiente información:

• URL de solicitud : https://fcm.googleapis.com/fcm/send

• Encabezados : en los encabezados de su solicitud POST, deberá tener las siguientes claves:

Autorización: clave= SERVER_KEY

Tipo de contenido : aplicación/json

Notas : SERVER_KEY se puede encontrar en la pestaña Cloud Messaging en la configuración de Firebase

• Cuerpo : Complete el cuerpo de su solicitud POST con el siguiente código:

 {
    "notificación": {
        "título": "SimiCart",
        "cuerpo": "Notificación push de prueba",
        "click_action": "http://localhost:3000/",
        "icono": "https://i.imgur.com/5zO5cce.png"
    }
    "a": "USER_TOKEN"
}

Reemplace USER_TOKEN con el token que obtuvo (haciendo clic en el botón Haga clic para recibir notificaciones ) en el Paso 4. No olvide elegir el tipo de cuerpo como sin procesar y JSON .

Ahora haga clic en Enviar y debería ver aparecer una notificación en la esquina inferior derecha:

Notas : estas notificaciones solo aparecen cuando la aplicación está en segundo plano o minimizada.

¡Felicidades! ¡Tu PWA ahora puede enviar notificaciones!

Conclusión

Esperamos que después de esta guía, ahora pueda configurar con confianza su propia función de notificación automática. Al ser una tecnología nueva, las aplicaciones web progresivas son algo complicado para los usuarios que no son expertos en tecnología, razón por la cual existen proveedores de soluciones fácilmente disponibles, como SimiCart, que pueden atender todas sus necesidades con nuestros años de experiencia en PWA.