APLICACIÓN web para PWA usando notificaciones push de firebase-Development –

En este artículo, veremos cómo usar Firebase Cloud Messaging para convertir una aplicación web o sitio web en una PWA con notificaciones push.

En el mundo moderno, la mayoría de las aplicaciones web se están convirtiendo en PWA (aplicaciones web progresivas), ya que brinda soporte sin conexión, notificaciones automáticas, sincronización en segundo plano, etc. Las capacidades de PWA hacen que nuestras aplicaciones web se parezcan más a las aplicaciones nativas y brindan una rica experiencia de usuario.

Por ejemplo, grandes empresas como Twitter y Amazon han convertido sus aplicaciones web en PWA para aumentar la participación de los usuarios.

¿Qué es 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 antes. Pero cuando su sitio web se carga en los navegadores modernos, puede tener una funcionalidad nativa. 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 front-end y reduce las solicitudes a los servidores back-end.

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

• instalable: Su aplicación web se puede instalar como una aplicación nativa
• Progreso: igual que su aplicación web pero con alguna funcionalidad nativa
• Experiencia de aplicación nativa: Una vez instalada, los usuarios pueden utilizar y navegar por la aplicación web de forma nativa.
• fácil acceso: A diferencia de nuestra aplicación web, nuestros usuarios no necesitan ingresar una URL cada vez que visitan. Una vez instalado, se abre con un solo toque.
• caché de aplicaciones: antes de las PWA, el único mecanismo de almacenamiento en caché que implementaba nuestra aplicación web era usar una caché HTTP que solo estaba disponible para el navegador. Pero con PWA, podemos almacenar en caché el contenido utilizando el propio código del lado del cliente que no está disponible en la aplicación web.
• Lanzamiento de la tienda (App/Play): Los PWA se pueden publicar en Google Play Store y IOS App Store.

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

Por qué las empresas deberían considerar las PWA

Si bien la mayoría de nuestros clientes se comunican con nosotros y solicitan desarrollar primero una solución de aplicación web, luego solicitan aplicaciones para Android e iOS. Todo lo que tenemos que hacer es tener un equipo separado que desarrolle la misma funcionalidad en una aplicación web que una aplicación de Android/IOS, lo que requiere más costos de desarrollo y más tiempo de comercialización.

Pero algunos clientes tienen presupuestos limitados, o algunos clientes pueden pensar que el tiempo de comercialización es más importante para sus productos.

La función PWA en sí misma puede satisfacer la mayoría de las necesidades de los clientes. Para ellos, solo recomendamos PWA, y si quieren implementar en Playstore, recomendamos que usen TWA para convertir su PWA en una aplicación de Android.

Si sus necesidades realmente requieren funciones de aplicaciones nativas que las PWA no pueden satisfacer. Los clientes pueden desarrollar estas dos aplicaciones según sus propios deseos. Pero incluso en ese caso. 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 hayan completado el desarrollo de su aplicación Android. Implementan su aplicación de Android real en Play Store. Consiguieron el tiempo de comercialización y los costos de desarrollo utilizando PWA.

Características de PWA

Los PWA brindan una funcionalidad similar a una aplicación nativa para nuestras aplicaciones web.

Las características principales son:

• Instalable: una aplicación web que se instala como una aplicación nativa.
• Almacenamiento en caché: es posible el almacenamiento en caché de la aplicación, lo que proporciona soporte fuera de línea para nuestra aplicación.
• Notificaciones automáticas: se pueden enviar notificaciones automáticas desde nuestros servidores para atraer a nuestros usuarios a nuestro sitio web.
• Geofencing: las aplicaciones pueden recibir notificaciones a través de eventos cada vez que cambia la ubicación del dispositivo.
• Solicitudes de pago: habilite la funcionalidad de pago en su aplicación y brinde una excelente experiencia de usuario como una aplicación nativa.

Hay muchas más características 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: muestra los recuentos de notificaciones en las PWA instaladas.
• API de sincronización periódica en segundo plano: guarda los datos del usuario hasta que se conecta a la red.
• Selector de contactos: se utiliza para seleccionar contactos desde el teléfono del usuario.
• Selector de archivos: para acceder a archivos en el sistema local/dispositivo móvil

Ventajas de las PWA sobre las aplicaciones nativas

Las aplicaciones nativas funcionan mejor que las PWA y tienen más funciones que las PWA. Sin embargo, todavía tiene algunas ventajas sobre las aplicaciones nativas.

• Los PWA se ejecutan en plataformas cruzadas como Android, IOS, escritorio, etc.
• Reduce sus costos de desarrollo.
• Facilidad de implementación de funciones en comparación con las aplicaciones nativas.
• Fácil de descubrir porque PWA (sitio web) es compatible con SEO
• Seguro ya que solo funciona con HTTPS

Desventajas de las PWA sobre las aplicaciones nativas

• Las funciones disponibles son limitadas en comparación con las aplicaciones nativas.
• No se garantiza que la funcionalidad de PWA sea compatible con todos los dispositivos.
• Los PWA tienen poca conciencia de marca porque no están disponibles en App Store o Play Store.

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

Lo que necesitas para convertir una aplicación web en una PWA

Para convertir cualquier aplicación web o sitio web en una PWA.

• Service-Worker: en el corazón de cualquier aplicación PWA para el almacenamiento en caché, las notificaciones automáticas, es el proxy para nuestras solicitudes.
• Archivo de manifiesto: contiene información detallada sobre su aplicación web. Solía ​​descargar nuestra aplicación como si estuviera en la pantalla de inicio.
• Logotipo de la aplicación: imagen de alta calidad del icono de la aplicación de 512 x 512 píxeles. Las PWA requieren un logotipo de la aplicación en la pantalla de inicio, la pantalla de inicio, etc. Así que tenemos que usar cualquier herramienta para crear un conjunto de imágenes a escala 1:1 para nuestra aplicación.
• Diseño receptivo: la aplicación web debe poder funcionar de manera receptiva a diferentes tamaños de pantalla.

¿Qué es un trabajador de servicio?

Los trabajadores del servicio (scripts del lado del cliente) son servidores proxy entre su aplicación web y el mundo exterior, que proporcionan notificaciones automáticas a nuestra aplicación web y admiten el almacenamiento en caché.

Los Service Workers se ejecutan independientemente del javascript principal. Entonces no tiene acceso a la API DOM.solo puede acceder API de base de datos de índice, Obtener API, API de almacenamiento en cachéPero puede comunicarse con el hilo principal a través de mensajes.

Servicios prestados por trabajadores de servicios:

• Intercepte solicitudes HTTP de su dominio de origen.
• Reciba notificaciones push de su servidor.
• Disponibilidad sin conexión de nuestra aplicación

Service Worker controla su aplicación y puede manipular sus solicitudes, pero se ejecuta de forma independiente. Por lo tanto, por esta razón, el dominio de origen debe estar habilitado con HTTPS para evitar ataques de intermediarios.

¿Qué es un archivo de manifiesto?

El archivo de manifiesto (manifest.json) contiene detalles sobre nuestra aplicación PWA para informar al navegador.

• nombre: el nombre de la aplicación
• short_name: El nombre corto de nuestra aplicación.si se proporciona
• Tanto con el nombre del atributo como con el nombre corto, el navegador tomará el nombre corto.
• Descripción: Una descripción que describe nuestra aplicación.
• start_url: especifica la página de inicio de la aplicación cuando se inicia nuestra PWA.
• Iconos: una colección de imágenes PWA para pantallas de inicio y más.
• background_color: Establece el color de fondo de la pantalla de bienvenida en nuestra aplicación PWA.
• pantalla: personalice la interfaz de usuario de nuestro navegador para que se muestre en nuestra aplicación PWA.
• theme_color: El color del tema de la aplicación PWA.
• Alcance: el alcance de la URL de la aplicación que estamos considerando para la PWA. El valor predeterminado es la ubicación del archivo de manifiesto.
• Accesos directos: enlaces rápidos a nuestra aplicación PWA.

Convertir aplicación web a PWA

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

• index.html – la página de inicio
• artículo/
  • index.html – la página del artículo
• autor/
  • index.html – página del autor
• herramienta/
  • index.html – Página de herramientas
• comercio/
  • index.html – la página de transacciones

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

Cree las imágenes requeridas para el PWA

Primero, tome el logotipo de su aplicación y recórtelo de 1:1 a 5 tamaños diferentes.solía https://tools.crawlink.com/tools/pwa-icon-generator/ Obtenga diferentes tamaños de imagen rápidamente. Así que tú también puedes usarlo.

Crear 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, creé un archivo de manifiesto para el sitio web de Geekflare.

{
	"name": "Geekflare",
	"short_name": "Geekflare",
	"description": "Geekflare produces high-quality technology & finance articles, makes tools, and APIs to help businesses and people 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",
		"sizes": "192x192",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"sizes": "384x384",
		"type": "image/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"sizes": "512x512",
		"type": "image/png"
	}],
	"background_color": "#EDF2F4",
	"display": "standalone",
	"theme_color": "#B20422",
	"scope": "/",
	"shortcuts": [{
			"name": "Articles",
			"short_name": "Articles",
			"description": "1595 articles on Security, Sysadmin, Digital Marketing, Cloud Computing, Development, and many other topics.",
			"url": "https://geekflare.com/articles",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Authors",
			"short_name": "Authors",
			"description": "Geekflare - Authors",
			"url": "/authors",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Tools",
			"short_name": "Tools",
			"description": "Geekflare - Tools",
			"url": "/tools",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		},
		{
			"name": "Deals",
			"short_name": "Deals",
			"description": "Geekflare - Deals",
			"url": "/deals",
			"icons": [{
				"src": "/assets/icon/icon-152x152.png",
				"sizes": "152x152"
			}]
		}
	]
}

Registrar un trabajador de servicio

Cree archivos de secuencias de comandos register-service-worker.js y service-worker.js en la carpeta raíz.

El primero, register-service-worker.js es un archivo javascript que se ejecutará en el subproceso principal con acceso a la API DOM. Pero service-worker.js es un script de trabajador de servicio que se ejecuta independientemente del subproceso principal y también tiene un ciclo de vida corto. Se ejecuta cada vez que un evento llama al trabajador del servicio y se ejecuta hasta que completa el proceso.

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

Pegue el siguiente fragmento de código en register-service-worker.js:

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

Pegue el siguiente fragmento de código en service-worker.js

self.addEventListener('install', (event) => { // event when service worker install
    console.log( 'install', event);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // event when service worker activated
    console.log('activate', event);
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) { // HTTP request interceptor
    event.respondWith(fetch(event.request)); // send all http request without any cache logic
    /*event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event. request);
        })
    );*/ // cache new request. if already in cache serves with the cache.
});

No nos enfocamos en cómo habilitar el almacenamiento en caché para el soporte fuera de línea. Solo discutimos cómo convertir una aplicación web en una PWA.

Agregue archivos de manifiesto y scripts en todas las etiquetas principales de las páginas HTML.

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

En la pantalla de inicio, se agregan aplicaciones.

Si está utilizando WordPress. Intente usar un complemento de conversión de PWA existente. Para vueJS o reactJS, puede seguir el método anterior o usar un módulo PWA npm existente para acelerar su desarrollo. Porque el módulo PWA npm ha habilitado el almacenamiento en caché de soporte fuera de línea, etc.

Habilitar notificaciones automáticas

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

• API de notificaciones: Sirve para configurar cómo se deben mostrar al usuario nuestras notificaciones push.
• empujar API: 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 notificación y obtener el permiso del usuario para mostrar las notificaciones. Para eso, copie y pegue el fragmento a continuación en su register-service-worker.js.

if ('Notification' in window && Notification.permission != 'granted') {
    console.log('Ask user permission')
    Notification.requestPermission(status => {  
        console.log('Status:'+status)
        displayNotification('Notification Enabled');
    });
}


const displayNotification = notificationTitle => {
    console.log('display notification')
    if (Notification.permission == 'granted') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            const options = {
                    body: 'Thanks for allowing push notification !',
                    icon:  '/assets/icons/icon-512x512.png',
                    vibrate: [100, 50, 100],
                    data: {
                      dateOfArrival: Date.now(),
                      primaryKey: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, options);
        });
    }
};

Si todo va bien. Recibirás notificaciones de la aplicación.

«Notificaciones» en la ventana nos dirá que el navegador es compatible con la API de notificación. Notificación.permiso le dirá al usuario que se ha permitido que aparezca la notificación. Si el usuario permite nuestra aplicación, el valor será «otorgado». Si el usuario rechaza el valor, el valor será «bloqueado».

Habilite Firebase Cloud Messaging y cree una suscripción

Ahora comienza la parte real. Para enviar notificaciones a los usuarios desde su servidor, debemos proporcionar a cada usuario un punto final/suscripción único. Para ello utilizaremos la mensajería en la nube de firebase.

Primer paso, cree una cuenta de Firebase visitando este enlace https://firebase.google.com/ Luego presione iniciar.

1. Cree un nuevo proyecto con un nombre y presione Continuar. Lo crearé con el nombre Geekflare.
2. En el siguiente paso, Google Analytics está habilitado de forma predeterminada. Puede alternar no lo necesitamos ahora y presionar continuar. Puede habilitarlo más tarde en la consola de Firebase si es necesario.
3. Después de crear el proyecto, se verá así.

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

Con los pasos anteriores, obtienes 3 claves.

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

Ahora pegue el siguiente fragmento de código en register-service-worker.js:

const updateSubscriptionOnYourServer = subscription => {
    console.log('Write your ajax code here to save the user subscription in your DB', subscription);
    // write your own ajax request method using fetch, jquery, axios to save the subscription in your server for later use.
};

const subscribeUser = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // paste your webpush certificate public key
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    })
    .then((subscription) => {
        console.log('User is subscribed newly:', subscription);
        updateSubscriptionOnServer(subscription);
    })
    .catch((err) => {
        if (Notification.permission === 'denied') {
          console.warn('Permission for notifications was denied')
        } else {
          console.error('Failed to subscribe the user: ', err)
        }
    });
};
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);
    }
    return outputArray;
};

const checkSubscription = async () => {
    const swRegistration = await navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(subscription => {
        if (!!subscription) {
            console.log('User IS Already subscribed.');
            updateSubscriptionOnYourServer(subscription);
        } else {
            console.log('User is NOT subscribed. Subscribe user newly');
            subscribeUser();
        }
    });
};

checkSubscription();

Pegue el siguiente fragmento de código en service-worker.js.

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

Todo está configurado en la parte delantera ahora. Mediante el uso de suscripciones, puede enviar notificaciones automáticas a sus usuarios en cualquier momento hasta que no se les niegue el servicio automático.

Empujar desde el backend de node.js

puedes usarlo Empuje web Los módulos npm lo hacen más fácil.

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

const webPush = require('web-push');
    // pushSubscription is nothing but subscription that you sent from your front-end to save it in DB
    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 public-key
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //your web certificates private-key
    const vapidPrivateKey = 'web-certificate private key';

    var payload = JSON.stringify({
      "options": {
        "body": "PWA push notification testing fom backend",
        "badge": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "vibrate": [100, 50, 100],
        "data": {
          "id": "458",
        },
        "actions": [{
          "action": "view",
          "title": "View"
        }, {
          "action": "close",
          "title": "Close"
        }]
      },
      "header": "Notification from Geekflare-PWA Demo"
    });

    var options = {
      vapidDetails: {
        subject: 'mailto:[email protected]',
        publicKey: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TTL: 60
    };

    webPush.sendNotification(
      pushSubscription,
      payload,
      options
    ).then(data => {
      return res.json({status : true, message : 'Notification sent'});
    }).catch(err => {
      return res.json({status : false, message : err });
    });

El código anterior enviará notificaciones automáticas a la suscripción. Se activarán los eventos push en service-worker.

Empujar desde el backend de PHP

Para el backend de PHP puedes usar Web push-php paquete de compositores Consulte el código de muestra para enviar notificaciones automáticas a continuación.

  array (
                'body' => 'PWA push notification testing fom backend',
                'badge' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'vibrate' => 
                array (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'data' => 
                array (
                  'id' => '458',
                ),
                'actions' => 
                array (
                  0 => 
                  array (
                    'action' => 'view',
                    'title' => 'View',
                  ),
                  1 => 
                  array (
                    'action' => 'close',
                    'title' => 'Close',
                  ),
                ),
),
'header' => 'Notification from Geekflare-PWA Demo',
);

// auth
$auth = [
    'GCM' => 'your project private-key', // deprecated and optional, it's here only for compatibility reasons
    'VAPID' => [
        'subject' => 'mailto:[email protected]', // can be a mailto: or your website address
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (recommended) uncompressed public key P-256 encoded in Base64-URL
        'privateKey' => 'your web-certificate private-key', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
    ],
];

$webPush = new WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Subscription::create($subsrciptionData),
  json_encode($payloadData) // optional (defaults null)
);

En conclusión

Espero que esto te haya ayudado a convertir una aplicación web en una PWA.Puedes ver el código fuente de este artículo aquí y demostrarlo aquíTambién estoy probando notificaciones push enviándolas desde el backend con la ayuda del código de muestra.