Cómo convertir WebApp como PWA con notificación push

En este artículo, vemos cómo convertir una aplicación web o un sitio web en una PWA con una notificación automática utilizando Firebase Cloud Messaging.

En el mundo moderno, la mayoría de las aplicaciones web se están convirtiendo en una PWA (aplicación web progresiva) porque proporciona funciones como soporte sin conexión, Push Notification, sincronización de fondo. Las características de PWA hacen que nuestra aplicación web se parezca más a una aplicación nativa y brinda una experiencia de usuario rica.

Por ejemplo, grandes empresas como Twitter y Amazon han convertido su aplicación web a PWA para lograr una mayor participación de los usuarios.

¿Qué es una PWA?

PWA = (aplicación web) + (algunas características de la aplicación nativa)

PWA es tu misma aplicación web (HTML+CSS+JS). Funciona igual que su aplicación web en todos los navegadores como lo hacía anteriormente. Pero puede tener funciones nativas cuando su sitio web se carga en un navegador moderno. Hace que su aplicación web sea más poderosa que antes y también la hace más escalable porque podemos precargar y almacenar en caché los activos en el frontend, reduce las solicitudes a su servidor backend.

En qué se diferencia PWA de la aplicación web

• Instalable: Su aplicación web se puede instalar como una aplicación nativa
• Progresivo: funciona igual que su aplicación web pero con algunas características nativas
• Experiencia de aplicación nativa: el usuario puede usar y navegar la aplicación web como un nativo, una vez instalada.
• De fácil acceso: A diferencia de nuestra aplicación web, no es necesario que nuestros usuarios escriban direcciones web cada vez que visitan. Una vez instalado, se puede abrir con un solo toque.
• Almacenamiento en caché de aplicaciones: antes de PWA, el único mecanismo de almacenamiento en caché con el que se implementaba nuestra aplicación web era mediante el uso de caché HTTP, que solo está disponible para el navegador. Pero con PWA podemos almacenar cosas en caché utilizando el propio código del lado del cliente que no está disponible en una aplicación web.
• (App/Play) publicación en la tienda: PWA se puede publicar en Google Play Store y IOS App Store.

Convertir su aplicación a PWA solo la hará más poderosa.

Por qué las empresas deberían considerar PWA

Si bien la mayoría de nuestros clientes se comunican con nosotros y nos solicitan desarrollar la solución de aplicación web primero y luego solicitan Aplicaciones de Android y iOS . Todo lo que vamos a hacer es construir la misma funcionalidad en la aplicación web para la aplicación de Android/IOS por un equipo separado, lo que implica más costos de desarrollo y más tiempo de comercialización.

Pero algún cliente tiene un presupuesto limitado o algún cliente puede pensar que el tiempo de comercialización es más importante para su producto.

La mayoría de los requisitos del cliente pueden satisfacerse con las funciones de PWA. Para ellos, sugerimos solo PWA y les damos una idea para convertir su PWA como una aplicación de Android usando TWA si quieren implementar en Playstore.

Si su requerimiento realmente necesita funciones de aplicaciones nativas que PWA no puede satisfacer. Los clientes pueden ir y desarrollar ambas Aplicaciones como deseen. Pero incluso en ese escenario. Pueden implementar el PWA en Play Store hasta que se complete el desarrollo de Android.

Ejemplo: Titan Eyeplus

Inicialmente, desarrollaron una aplicación PWA y la implementaron en Play Store usando TWA (actividad web confiable). Una vez que completaron el desarrollo de su aplicación Android. Implementaron su aplicación de Android real en Play Store. Consiguieron tanto el tiempo de comercialización con PWA como el coste del desarrollo.

PWA features

PWA brinda a nuestras aplicaciones web funciones nativas similares a las de una aplicación.

Las características principales son:

• Instalable: una aplicación web instalada como una aplicación nativa.
• Almacenamiento en caché: el almacenamiento en caché de la aplicación es posible, lo que brinda soporte fuera de línea a nuestra aplicación.
• Notificación de inserción: la notificación de inserción se puede enviar desde nuestro servidor para atraer a nuestros usuarios a nuestro sitio web.
• Geofencing: la aplicación puede ser notificada por un evento cada vez que cambia la ubicación del dispositivo.
• Solicitud de pago: habilite el pago en su aplicación con una excelente experiencia de usuario como una aplicación nativa.

Y muchas más funciones por venir en el futuro.

Otras características son:

• Accesos directos: URL de acceso rápido agregadas en el archivo de manifiesto.
• Web Share API: permita que su aplicación reciba datos compartidos de otras aplicaciones.
• Badge API: para mostrar el recuento de notificaciones en su PWA instalado.
• API de sincronización periódica en segundo plano: guarda los datos de su usuario hasta que se conecta a la red.
• Selector de contactos: Sirve para recoger contactos del móvil del usuario.
• Selector de archivos: se utiliza para acceder al archivo en el sistema local/móvil

Ventaja de PWA sobre la aplicación nativa

La aplicación nativa funciona mejor que PWA y tiene más funciones que PWA. Pero aún así, tiene algunas ventajas sobre la aplicación nativa.

• PWA se ejecuta en plataformas cruzadas como Android, IOS, Desktop.
• Reduce su costo de desarrollo.
• Fácil implementación de funciones en comparación con una aplicación nativa.
• Fácilmente reconocible porque PWA (sitio web) es compatible con SEO
• Seguro porque solo funciona en HTTPS

Desventajas de PWA sobre la aplicación nativa

• Las funcionalidades limitadas están disponibles en comparación con una aplicación nativa.
• No se garantiza que las características de PWA sean compatibles con todos los dispositivos.
• La marca de PWA es baja porque no está disponible en la tienda de aplicaciones o en la tienda de juegos.

Puede implementar su PWA como una aplicación de Android en Play Store usando Android Actividad web de confianza (TWA). Ayudará a su marca.

Cosas necesarias para convertir la aplicación web a PWA

Para convertir cualquier aplicación web o sitio web a PWA.

• Service-Worker: el núcleo de cualquier aplicación PWA para almacenamiento en caché, notificaciones push, un proxy para nuestras solicitudes.
• Archivo de manifiesto: tiene detalles sobre su aplicación web. Solía ​​descargar nuestra aplicación como una aplicación nativa en la pantalla de inicio.
• Logotipo de la aplicación: imagen de alta calidad de 512 x 512 px para el ícono de su aplicación. Se necesita el logotipo de la aplicación para PWA en la pantalla de inicio, la pantalla de inicio, etc. Por lo tanto, tenemos que crear un conjunto de imágenes de proporción 1: 1 para nuestra aplicación utilizando cualquier herramienta.
• Diseño receptivo: la aplicación web debe ser receptiva para funcionar en diferentes tamaños de pantalla.

¿Qué es el trabajador de servicio?

Un trabajador de servicio (secuencia de comandos del lado del cliente) es un proxy entre su aplicación web y el lado externo, que entrega notificaciones automáticas para nuestra aplicación web y admite el almacenamiento en caché.

Service Worker se ejecuta independientemente del javascript principal. Entonces no tiene acceso a la API DOM. Solo puede acceder API de base de datos indexada, Fetch API, API de almacenamiento en caché. Pero puede comunicarse con el hilo principal con un mensaje.

Servicio proporcionado por el trabajador del servicio:

• Interceptar solicitudes HTTP de su dominio de origen.
• Reciba notificaciones automáticas de su servidor.
• Disponibilidad sin conexión de nuestra aplicación

El trabajador del servicio controla su aplicación y puede manipular sus solicitudes, pero se ejecuta de forma independiente. Entonces, por esa razón, el dominio de origen debe estar habilitado con HTTPS para evitar un ataque de intermediario.

What is the Manifest file

Un archivo de manifiesto (manifest.json) tiene detalles sobre nuestra aplicación PWA para informarle al navegador.

• nombre: Nombre de la aplicación
• short_name: Nombre corto para nuestra aplicación. Si se proporciona
•  con nombre de propiedad y nombre_corto, el navegador tomará nombre_corto.
• description: Descripción para describir nuestra aplicación.
• start_url: para especificar la página de inicio de la aplicación cuando se lanzó nuestra PWA.
• iconos: conjunto de imágenes para PWA para la pantalla de inicio, etc.
• background_color: para establecer el color de fondo de la pantalla de bienvenida en nuestra aplicación PWA.
• pantalla: para personalizar la interfaz de usuario de nuestro navegador para que se muestre en nuestra aplicación PWA.
• theme_color: color del tema de la aplicación PWA.
• scope: ámbito URL de nuestra aplicación a considerar para PWA. El valor predeterminado es la ubicación del archivo de manifiesto que se encuentra.
• accesos directos: enlaces rápidos para nuestra aplicación PWA.

Convert Web App to PWA

Para fines de demostración, he creado una estructura de carpetas del sitio web de Geekflare con archivos estáticos.

• index.html – página de inicio
• artículos /
  • index.html – página de artículos
• autores /
  • index.html – página de autores
• instrumentos/
  • index.html – página de herramientas
• ofertas/
  • index.html – página de ofertas

Si ya tiene algún sitio web o aplicación web, intente convertirlo a PWA siguiendo los pasos a continuación.

Crear imágenes requeridas para PWA

En primer lugar, tome el logotipo de su aplicación y recórtelo en una proporción de 1:1 en 5 tamaños diferentes. He usado https://tools.crawlink.com/tools/pwa-icon-generator/ para obtener diferentes tamaños de imagen rápidamente. Así que tú también puedes usarlo.

Crea un archivo de manifiesto

En segundo lugar, cree un archivo manifest.json para su aplicación web con los detalles de su aplicación. Para la demostración, he creado un archivo de manifiesto para el sitio web de Geekflare.

{ "name": "Geekflare", "short_name": "Geekflare", "description": "Geekflare produce artículos de tecnología y finanzas de alta calidad, crea herramientas y API para ayudar a las empresas y a las personas a crecer", "start_url": "/", "iconos": [{ "origen": "activos/icono/icono-128x128.png", "tamaños": "128x128", "tipo": "imagen/png" }, { "origen": "activos/icono/icono-152x152.png", "tamaños": "152x152", "tipo": "imagen/png" }, { "src": "activos/icono/icono-192x192.png", "tamaños ": "192x192", "tipo": "imagen/png" }, { "origen": "activos/icono/icono-384x384.png", "tamaños": "384x384", "tipo": "imagen/png " }, { "src": "assets/icon/icon-512x512.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#EDF2F4", " display": "independiente", "theme_color": "#B20422", "scope": "/", "shortcuts": [{ "name": "Artículos", "short_name": "Artículos", "descripción": "1595 artículos sobre seguridad, administrador de sistemas, marketing digital, computación en la nube, desarrollo y muchos otros temas"., "url": "/articles", "icons": [{ "src": "/assets/icon/icon- 152x152.png", "tamaño s": "152x152" }] }, { "name": "Autores", "short_name": "Autores", "descripción": "Geekflare - Autores", "url": "/autores", "iconos": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name": "Tools", "short_name": "Tools", "description" : "Geekflare - Herramientas", "url": "/herramientas", "iconos": [{ "src": "/assets/icon/icon-152x152.png", "tamaños": "152x152" }] }, { "name": "Ofertas", "short_name": "Ofertas", "descripción": "Geekflare - Ofertas", "url": "/ofertas", "iconos": [{ "src": "/activos/ icono/icono-152x152.png", "tamaños": "152x152" }] } ] }

Registrar Trabajador de servicio

cree un archivo de secuencia de comandos register-service-worker.js y service-worker.js en la carpeta raíz.

El primero, register-service-worker.js es el archivo javascript que se ejecutará en el subproceso principal que puede acceder a la API DOM. Pero service-worker.js es un script de trabajador de servicio que se ejecuta independientemente del subproceso principal y su vida útil también es corta. Se ejecuta cada vez que los eventos llaman a los trabajadores del servicio y se ejecutan hasta que finaliza el proceso.

Al verificar el archivo javascript del hilo principal, puede verificar si el trabajador del servicio está registrado en él. si no, puede registrar el script del trabajador del servicio (service-worker.js).

pegue el siguiente fragmento en register-service-worker.js:

if ('serviceWorker' en el navegador) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js'); }); }

Pegue el siguiente fragmento en service-worker.js

self.addEventListener('instalar', (evento) => { // evento cuando el trabajador del servicio instala console.log('instalar', evento); self.skipWaiting(); }); self.addEventListener('activar', (evento) => { // evento cuando el trabajador del servicio activó console.log('activar', evento); return self.clients.claim(); }); self.addEventListener('fetch', function(evento) { // Interceptor de solicitudes HTTP event.respondWith(fetch(event.request)); // envía todas las solicitudes http sin ninguna lógica de caché /*event.respondWith( caches.match( event.request).then(function(response) { return response || fetch(event. request); }) );*/ // cachear nueva solicitud. si ya está en cache sirve con el cache. });

No nos concentramos en cómo habilitar el caché para el soporte sin conexión. Solo hablamos de cómo convertir aplicaciones web a PWA.

Agregue el archivo de manifiesto y la secuencia de comandos en la etiqueta de cabecera de su página HTML.

Actualice la página después de agregar. Ahora puede instalar su aplicación como se muestra a continuación en Chrome móvil.

En la pantalla de inicio, se agrega la aplicación.

Si está utilizando WordPress. Intente usar el complemento de conversión de PWA existente. Para vueJS o reactJS, puede seguir el método anterior o usar los módulos PWA npm existentes para acelerar su desarrollo. Porque los módulos PWA npm ya están habilitados con almacenamiento en caché de soporte sin conexión, etc.

Enable Push Notification

Las notificaciones web push se envían al navegador para que nuestros usuarios participen/interactúen con nuestra aplicación con más frecuencia. Podemos habilitarlo usando

• API de notificación: Sirve para configurar cómo se debe mostrar al usuario nuestra notificación push.
• API de empuje: Se utiliza para recibir mensajes de notificación enviados desde nuestro servidor al navegador.

El primer paso para habilitar las notificaciones automáticas en nuestra aplicación es verificar la API de notificaciones y obtener el permiso del usuario para mostrar una notificación. Para eso, copie y pegue el fragmento a continuación en su register-service-worker.js.

if ('Notificación' en la ventana && Notificación.permiso != 'otorgado') { console.log('Solicitar permiso de usuario') Notificación.requestPermission(status => { console.log('Estado:'+estado) displayNotification(' Notificación habilitada'); }); } const mostrarNotificación = notificaciónTitle => { console.log('mostrar notificación') if (Notification.permission == 'concedido') { navigator.serviceWorker.getRegistration().then(reg => { console.log(reg) const options = { body: '¡Gracias por permitir la notificación push!', icon: '/assets/icons/icon-512x512.png', vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), PrimaryKey: 0 } }; reg.showNotification(notificationTitle, options); }); } };

Si todo salió correctamente. Recibirás una notificación de la aplicación.

'Notificación' en la ventana nos dirá que la API de notificación es compatible con ese navegador. Notificación.permiso dirá que el usuario ha sido autorizado a mostrar la notificación. Si el usuario permitió nuestra aplicación, el valor será 'otorgado'. si el usuario ha rechazado el valor será 'bloqueado'.

Enable Firebase Cloud Messaging and Create Subscription

Ahora comienza la parte real. Para enviar notificaciones desde su servidor al usuario, necesitamos un punto final/suscripción único para cada usuario. Para eso, vamos a utilizar la mensajería en la nube de firebase.

Como primer paso, cree una cuenta de firebase visitando este enlace https://firebase.google.com/ y presione empezar.

1. Cree un nuevo proyecto con un nombre y presione continuar. Voy a crearlo con el nombre Geekflare.
2. En el siguiente paso, Google Analytics está habilitado de forma predeterminada. Puede alternar que no necesitamos eso ahora y presionar continuar. Puede habilitarlo más tarde en su consola Firebase si lo necesita.
3. Una vez que se crea el proyecto, se verá como se muestra a continuación.

Luego vaya a la configuración del proyecto y haga clic en mensajería en la nube y genere claves.

De los pasos anteriores, tienes 3 claves.

• clave del servidor del proyecto
• Clave privada de certificados web push
• Clave pública de certificados web push

Ahora pegue el siguiente fragmento en register-service-worker.js:

const updateSubscriptionOnYourServer = suscripción => { console.log('Escriba su código ajax aquí para guardar la suscripción del usuario en su base de datos', suscripción); // escriba su propio método de solicitud ajax usando fetch, jquery, axios para guardar la suscripción en su servidor para su uso posterior. }; const subscribeUser = async () => { const swRegistration = await navigator.serviceWorker.getRegistration(); const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // pegue la clave pública de su certificado webpush const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }) .then((suscripción) => { console.log('Usuario se suscribió recientemente:', suscripción); updateSubscriptionOnServer(suscripción); }) .catch((err ) => { if (Notification.permission === 'denegado') { console.warn('Se denegó el permiso para recibir notificaciones') } else { console.error('Error al suscribir al usuario: ', err) } }) ; }; const urlB64ToUint8Array = (base64String) => { const padding = '='.repeat((4 - base64String.length % 4) % 4) const base64 = (base64String + padding) .replace(/\-/g, '+' ) .replace(/_/g, '/') const rawData = ventana.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } devuelve la matriz de salida; }; const checkSubscription = async () => { const swRegistration = await navigator.serviceWorker.getRegistration(); swRegistration.pushManager.getSubscription() .then(subscription => { if (!!subscription) { console.log('El usuario ya está suscrito'); updateSubscriptionOnYourServer(subscription); } else { console.log('El usuario NO está suscrito. Suscribir usuario nuevo'); subscribeUser(); } }); }; comprobarSuscripción();

Pegue el siguiente fragmento en service-worker.js.

self.addEventListener('push', (evento) => { const json = JSON.parse(event.data.text()) console.log('Push Data', event.data.text()) self.registration. showNotification(json.header, json.opciones) });

Ahora todo listo en el front-end. Al usar la suscripción, puede enviar notificaciones automáticas a su usuario cuando lo desee hasta que no se les nieguen los servicios automáticos.

Empuje desde el backend de node.js

Puede utilizar el web-push módulo npm para hacerlo más fácil.

Fragmento de ejemplo para enviar notificaciones push desde el servidor nodeJS.

const webPush = require('web-push'); // pushSubscription no es más que una suscripción que envió desde su front-end para guardarla en DB const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj -uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}; //sus certificados web public-key const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // sus certificados web clave privada const vapidPrivateKey = 'clave privada de certificado web'; var payload = JSON.stringify({ "opciones": { "cuerpo": "Prueba de notificaciones push de PWA desde el backend", "insignia": "/assets/icon/icon-152x152.png", "icono": "/activos /icon/icon-152x152.png", "vibrar": [100, 50, 100], "datos": { "id": "458", }, "acciones": [{ "acción": "ver" , "título": "Ver" }, { "acción": "cerrar", "título": "Cerrar" }] }, "encabezado": "Notificación de la demostración de Geekflare-PWA" }); var options = { detalles insípidos: { asunto: 'mailto: su-correo-actual@gmail.com', clave pública: clave pública insípida, clave privada: clave privada insípida}, TTL: 60}; webPush.sendNotification( pushSubscription, payload, options ).then(data => { return res.json({status : true, message : 'Notification sent'}); }).catch(err => { return res.json( {estado: falso, mensaje: err}); });

El código anterior enviará una notificación automática a la suscripción. Se activará el evento push en el service-worker.

Empuje desde el backend de PHP

Para el backend de PHP, puede usar el web-push-php paquete compositor. Consulte el código de ejemplo para enviar notificaciones automáticas a continuación.

array ( 'cuerpo' => 'Prueba de notificaciones push de PWA desde el backend', 'insignia' => '/activos/icono/icono-2x2.png', 'icono' => '/activos/icono/icono-0x8.png ', 'vibrar' => matriz ( 8 => 2, 7 => 9, 88 => 6, ), 'datos' => matriz ( 'id' => '5', ), 'acciones' => matriz ( 41 => matriz ( 'acción' => 'ver', 'título' => 'Ver', ), 3 => matriz ( 'acción' => 'cerrar', 'título' => 'Cerrar', ) , ), ), 'header' => 'Notificación de Geekflare-PWA Demo', ); // auth $auth = [ 'GCM' => 'la clave privada de su proyecto', // en desuso y opcional, está aquí solo por razones de compatibilidad 'VAPID' => [ 'subject' => 'mailto:your-actual- mail@gmail.com', // puede ser un mailto: o la dirección de su sitio web 'publicKey' => 'BOcTIipY8N256Y0Y-8r1NMoJHofmCzn0Pu5g-LMsgIMGH4HVr3_LW7ia152lMr152TsTLKS152UcdkE152IcC0hJDYsY', // (recomendado) clave pública sin comprimir P-100 codificada en BasePrivateURL '1-Key => 'su clave privada de certificado web', // (recomendado) de hecho, el multiplicador secreto de la clave privada codificada en Base50-URL ], ]; $webPush = new WebPush($autorización); $subsrciptionData = json_decode($subsrciptionJson,true); // webpush 2 $webPush->sendOneNotification( Subscription::create($subsrciptionData), json_encode($payloadData) // opcional (predeterminado nulo));

Para concluir

Espero que esto le dé una idea sobre cómo convertir aplicaciones web a PWA. Puedes consultar el código fuente de este artículo. aquí y demuéstralo aquí. También probé la notificación push enviándola desde el backend con la ayuda de un código de ejemplo.