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, antecedentes sync. Las funciones de PWA hacen que nuestra aplicación web se parezca más a una aplicación nativa y brinden 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 su misma aplicación web (HTML+CSS+JS). Funciona igual que su aplicación web en todos los browsers como previosamente lo hizo. Pero puede tener características nativas cuando su sitio web se carga en una versión b moderna.rowsejem. 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, lo que 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 utilizar y navegarate Aplicación web como nativa, 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é que implementaba nuestra aplicación web era el uso de caché HTTP, que solo está disponible para browsejem. Pero con PWA podemos almacenar en caché cosas usando código del lado del cliente.self 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 crear la misma funcionalidad en la aplicación web para la aplicación Android/IOS por separado.ate equipo que requiere 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.

Example: Titan Eyeplus

inicioally, desarrollaron una aplicación PWA y la implementaron en Play Store usando TWA (Trusted Web Activity). Una vez que completaron el desarrollo de su aplicación para Android. Implementaron su aplicación de Android real en Play Store. Lograron tanto el tiempo de comercialización utilizando PWA como el costo del desarrollo.

Funciones de PWA

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.
• Antecedentes periódicos Sync API: guarda los datos de tu 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 enplatformulario como Android, IOS, escritorio.
• 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.
• The branding of PWA is low because it’s not available in the app store or play store.

Puede implementar su PWA como una aplicación de Android en Play Store usando Android Actividad web de confianza (TWA). It will help your branding.

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, pantalla de inicio, etc. Así que tenemos que crearate un conjunto de imágenes en 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 comunicarseate 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 manipularate sus solicitudes, pero se ejecuta de forma independiente. Por esa razón, el dominio de origen debe estar habilitado con HTTPS para evitar un ataque de intermediario.

¿Qué es el archivo de manifiesto?

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

• nombre: Nombre de la aplicación
• short_name: Nombre corto para nuestra aplicación. Si se proporciona
•  con nombre de propiedad y nombre_corto, la browser tomará nombre_corto.
• description: Description 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.
• display: Para personalizar nuestra browser UI para mostrar en nuestra aplicación PWA.
• theme_color: color del tema de la aplicación PWA.
• alcance: alcance de la URL de nuestra aplicación a considerar para PWA. El valor predeterminado es la ubicación del archivo de manifiesto loc.ated.
• accesos directos: enlaces rápidos para nuestra aplicación PWA.

Convertir aplicación web a PWA

Para fines de demostración, he creadoatesí Geekflare Estructura de carpetas del sitio web 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.

Create 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.

Create un archivo de manifiesto

En segundo lugar, create un archivo manifest.json para su aplicación web con los detalles de su aplicación. Para la demostración, tengo createel archivo de manifiesto para Geekflare Sitio web.

{ "nombre": "Geekflare", "nombre corto": "Geekflare", "descriptión": "Geekflare produce artículos de tecnología y finanzas de alta calidad, fabrica herramientas y API para ayudar a empresas y personas grow.", "start_url": "/", "icons": [{ "src": "assets/icon/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icon/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icon/icon- 192x192.png", "tamaños": "192x192", "tipo": "imagen/png" }, { "src": "assets/icon/icon-384x384.png", "tamaños": "384x384", " tipo": "imagen/png" }, { "src": "assets/icon/icon-512x512.png", "tamaños": "512x512", "tipo": "imagen/png" }], "color_fondo" : "#EDF2F4", "display": "standalone", "theme_color": "#B20422", "scope": "/", "shortcuts": [{ "name": "Articles", "short_name": " Artículos", "description": "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", "sizes": "152x152" }] }, { "name": "Autores", "short_name": "Autores", "descriptión": "Geekflare - Autores", "url": "/autores", "iconos": [{ "src": "/assets/icon/icon-152x152.png", "tamaños": "152x152" }] }, { "nombre ": "Herramientas", "short_name": "Herramientas", "descriptión": "Geekflare - Herramientas", "url": "/tools", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] }, { "name ": "Ofertas", "short_name": "Ofertas", "descriptión": "Geekflare - Ofertas", "url": "/ofertas", "icons": [{ "src": "/assets/icon/icon-152x152.png", "sizes": "152x152" }] } ] }

Registrar Trabajador de servicio

CREate un archivo de script 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 hilo principal que puede acceder a la API DOM. Pero service-worker.js es un script de trabajador de servicio que se ejecuta independientemente del hilo principal y su vida útil también es corta. Se ejecuta cada vez que los eventos llaman a los trabajadores del servicio y se ejecuta hasta que finaliza el process.

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('cargar', función() { navigator.serviceWorker.register('/service-worker.js'); }); }

Pegue el siguiente fragmento en service-worker.js

self.addEventListener('install', (event) => { // evento cuando el trabajador del servicio instala console.log( 'install', event);
    self.skipWaiting(); });

self.addEventListener('activate', (evento) => { // evento cuando el trabajador del servicio está activoated console.log('activate', evento); devolver self.clientes.reclamo(); });

self.addEventListener('fetch', function(event) { // 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 respuesta || fetch(event. request); }) );*/ // caché nueva solicitud. si ya está en caché sirve con el caché. });

no nos concentramosate sobre cómo habilitar el caché para soporte sin conexión. Sólo 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.

Habilitar notificación push

Las notificaciones push web se envían a la browser para que nuestros usuarios 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 browser.

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 window && Notificación.permisión != 'concedido') { console.log('Solicitar permiso al usuario') Notificación.requestPermission(status => { console.log('Estado:'+status) displayNotification('Notificación habilitada'); }) ; } const displayNotification = notificaciónTitle => { console.log('mostrar notificación') if (Notification.permission == 'concedido') { navigator.serviceWorker.getRegistration().then(reg => { console.log(reg) const opciones = { body: '¡Gracias por permitir las notificaciones push!', icon: '/assets/icons/icon-512x512.png', vibrate: [100, 50, 100], datos: { dateDe llegada: Date.now(), clave primaria: 0 } }; reg.showNotification(título de notificación, opciones); }); } };

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

'Notificación' en window nos dirá que la API de notificación es compatible con ese browser. 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'.

Habilite Firebase Cloud Messaging y Create Suscripción

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, create una cuenta de firebase visitando este enlace https://firebase.google.com/ y presione empezar.

1. Create un nuevo proyecto con un nombre y presione continuar. voy a crearate eso con el nombre Geekflare.
2. En el próximo paso, Google Analytics está habilitado de forma predeterminada. Puede togglDiga que no lo necesitamos ahora y presione continuar. Puedes habilitarlo later en su consola Firebase si es necesario.
3. Una vez que el proyecto se creaated, se verá como a continuación.

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

De los pasos anteriores, tienes 3 claves.

• clave del servidor del proyecto
• Certificado de inserción webates privadoate-llave
• Certificado de inserción webates clave pública

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

constante actualizadaateSubscriptionOnYourServer = suscripción => { console.log('Escriba aquí su código ajax para guardar la suscripción del usuario en su base de datos', suscripción); // escribe tu propio método de solicitud ajax usando fetch, jquery, axios para guardar la suscripción en tu servidor para later usar. }; const suscribirseUsuario = async () => { const swRegistration = espera navigator.serviceWorker.getRegistration(); const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // pega tu certificado webpushate clave pública constante applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); swRegistration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey }) .then((subscription) => { console.log('El usuario está suscrito recientemente:', suscripción); updateSuscripciónEnServidor(suscripción); }) .catch((err) => { if (Notification.permission === 'denied') { console.warn('Se denegó el permiso para notificaciones') } else { console.error('No se pudo suscribir al usuario: ', errar) } }); }; const urlB64ToUint8Array = (base64String) => { const padding = '='.repeat((4 - base64String.length % 4) % 4) const base64 = (base64String + padding) .replace(/\-/g, '+' ) .replace(/_/g, '/') const rawData = window.atob(base64); const OutputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } devolver matriz de salida; }; verificación constanteSuscripción = async () => { const swRegistration = espera navigator.serviceWorker.getRegistration(); swRegistration.pushManager.getSubscription() .then(subscription => { if (!!subscription) { console.log('El usuario ya está suscrito'); updateSuscripciónEnSuServidor(suscripción); } else { console.log('El usuario NO está suscrito. Suscríbase al usuario recientemente'); suscribirUsuario(); } }); }; verificarSuscripción();

Pegue el siguiente fragmento en service-worker.js.

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

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 empuje web 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 enviaste desde tu front-end para guardarla en la base de datos const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //your web certificates clave pública const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; //tu certificado webates privadoate-key const vapidPrivateClave = 'certificado webate private llave'; var payload = JSON.stringify({ "options": { "body": "Prueba de notificaciones push de PWA desde el backend", "badge": "/assets/icon/icon-152x152.png", "icon": "/assets /icon/icon-152x152.png", "vibrate": [100, 50, 100], "datos": { "id": "458", }, "acciones": [{ "acción": "ver", "título": "Ver" }, { " action": "cerrar", "title": "Cerrar" }] }, "header": "Notificación de Geekflare-PWA Demo" }); var opciones = { vapidDetails: { asunto: 'mailto:your-actual-mail@gmail.com', publicKey: vapidPublicKey, privateClave: insípidoPrivateClave }, TTL: 60 }; webPush.sendNotification( pushSubscription, carga útil, opciones ).then(data => { return res.json({status : true, message : 'Notificación enviada'}); }).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.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

require __DIR__.'/../vendor/autoload.php';
use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

// subscription stored in DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk8w","p256dh":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$payloadData = array ( 'opciones' => array ( 'body' => 'Prueba de notificaciones push de PWA desde el backend', 'badge' => '/assets/icon/icon-152x152.png', 'icon' => '/ activos/icono/icono-152x152.png', 'vibrate' => matriz ( 0 => 100, 1 => 50, 2 => 100, ), 'datos' => matriz ( 'id' => '458', ), 'acciones' => matriz ( 0 => matriz ('acción' => 'ver', 'título' => 'Ver', ), 1 => matriz ( 'acción' => 'cerrar', 'título' => 'Cerrar', ), ), ) , 'encabezado' => 'Notificación de Geekflare-Demostración de PWA', ); // autenticación $auth = [ 'GCM' => 'privacidad de tu proyectoate-clave', // desaprobadoated 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 tu sitio web 'publicKey' = > 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recomendado) clave pública sin comprimir P-256 codificada en Base64-URL 'privateClave' => 'su certificado webate private-key', // (recomendado) de hecho el multiplicador secreto del private clave codificada en Base64-URL ], ]; $webPush = nuevo WebPush($auth); $subsrciptionData = json_decode($subsrciptionJson,true); // webpush 6.0 $webPush->sendOneNotification( Suscripción::create($subsrciptionData), json_encode($payloadData) // opcional (valor 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. Haga clic aquí para entrar. y demuéstralo Haga clic aquí para entrar.. También probé la notificación push enviándola desde el backend con la ayuda de un código de ejemplo.