En las extensiones, puedes usar cualquier proveedor de notificaciones push para enviar notificaciones y mensajes push. El service worker procesará un envío de la API de Push apenas se reciba. Si se suspendió el trabajador de servicio, un mensaje push lo reactivará. El proceso para usarlo en extensiones es exactamente el mismo que se usaría en la Web abierta.
Obtén permiso para usar la API de Push
Cuando registras un servidor push en un sitio web normal, se le muestra al usuario un mensaje de permiso para otorgarlo o rechazarlo. Con las extensiones, no se mostrará esa solicitud. Para usar la API de Push en tu extensión, debes configurar el permiso notifications en tu manifest.json.
{
"manifest_version": 3,
...
"permissions": ["notifications"]
Si no tienes este permiso, cualquier interacción con registration.pushManager generará un error inmediato, el mismo resultado que si el usuario rechazó el permiso. Además, ten en cuenta que el permiso notifications hará que se muestre una advertencia de permiso durante la instalación. Chrome también inhabilitará la extensión para las instalaciones existentes hasta que el usuario apruebe la nueva solicitud de permiso. Puedes obtener más información para controlar esta situación en la guía de advertencias de permisos.
Proveedores y servicios de envío
Una vez que hayas agregado el permiso a tu manifest.json, deberás configurar la conexión entre tu backend y la extensión. Esta conexión se puede considerar en dos partes: el proveedor de notificaciones push y el servicio de notificaciones push. Un proveedor es el SDK que usas para enviar el mensaje al servicio de notificaciones push. Hay muchas opciones diferentes, y cualquier proveedor de notificaciones push puede funcionar para la API de notificaciones push (aunque es posible que no ofrezca un SDK que facilite la integración). Deberás experimentar con el SDK de tu proveedor para ver qué es posible. Un servicio de envío es con lo que está registrado el dispositivo del usuario final, por lo que puede recibir alertas de cualquier mensaje push que envíe un proveedor de envío. Esto es algo sobre lo que no tienes control, ya que está codificado en navegadores individuales. En Chrome, Firebase Cloud Messaging es el servicio de envío. Cualquier mensaje que se envíe a un usuario de Chrome se enrutará a través de él.
Hosting autónomo de un proveedor de envío
Cualquier proveedor de notificaciones push puede funcionar, pero no todos ofrecen un SDK que funcione en los service workers. Si tienes problemas para hacerlo, deberás consultar a tu proveedor. Sin embargo, no es necesario que uses un proveedor público. Con bibliotecas como web-push, puedes alojar tu propio backend.
Puedes probar esta biblioteca con web-push-codelab.glitch.me. Específicamente, deberás kopy la clave pública de VAPID del servidor Push para generar la suscripción Push en el navegador. En realidad, esta clave pública es un valor binario codificado en base64 que se debe decodificar y convertir en un Uint8Array para registrarse en el administrador de notificaciones push del navegador. Hay bibliotecas disponibles para realizar esta lógica, pero lo único que se necesita es lo siguiente.
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
Ese valor proporcionado se pasa al administrador de notificaciones push.
const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);
async function subscribe() {
try {
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
});
console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);
return subscription
} catch (error) {
console.error('Subscribe error: ', error);
}
}
const subscription = await subscribe();
La función subscribe muestra una PushSubscription, un objeto que contiene los metadatos del servidor de notificaciones push. Como usas web-push-codelab.glitch.me, este valor se debe copiar en la parte de suscripción push de la página.
Una vez que tengas PushSubscription, estará todo listo para registrar un objeto de escucha para los mensajes push en el service worker de nuestra extensión.
self.addEventListener('push', function (event) {
console.log(`Push had this data/text: "${event.data.text()}"`);
});
Con el objeto de escucha instalado, puedes enviar un mensaje a web-push-codelab.glitch.me, y los mensajes se registrarán en la consola del servicio de trabajador.
Como es un estándar web abierto, hay mucha documentación existente sobre cómo implementar Web Push, incluido el blog de Chrome. Para ver una versión completa del ejemplo que se analiza aquí, hay una disponible en nuestro repositorio de muestras de extensiones.
Push silencioso
Pudiste recibir una notificación push en tu extensión de Manifest V3
desde que se introdujo Manifest V3 en Chrome 88. Sin embargo, siempre se requirió que la notificación mostrara algún tipo de mensaje visible para el usuario, como una notificación web. Esto hizo que fuera mucho menos útil si
querías enviar comandos o actualizaciones de datos a tu extensión sin molestar al usuario con información innecesaria. A partir de Chrome 121, las extensiones pueden establecer userVisibleOnly en false. Ahora puedes enviar notificaciones push silenciosas que no se muestran a los usuarios. Para usarlo, configura userVisibleOnly en false cuando llames a pushManager.subscribe.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});