Usa Web Push

En las extensiones, puedes usar cualquier proveedor de envío para enviar notificaciones push y mensajes. Tu service worker procesará un envío de la API de Push en cuanto lo reciba. Si se suspendió el service worker, un envío lo volverá a activar. El proceso para usarlo en extensiones es exactamente el mismo que el que usarías en la Web abierta.

Obtén permiso para usar la API de Push

Cuando registras un servidor de envío en un sitio web normal, el usuario recibe un mensaje de permiso para otorgarlo o rechazarlo. Con las extensiones, no se mostrará la solicitud. Para usar la API de Push en tu extensión, debes configurar el permiso notifications en manifest.json

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Si te falta 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 cualquier instalación existente hasta que el usuario apruebe la nueva solicitud de permiso. Puedes obtener más información para controlar esto en la guía de advertencias de permisos.

Proveedores y servicios push

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 comprender en dos partes: el proveedor de Push y el servicio de Push. Un proveedor es el SDK que usas para enviar el mensaje al servicio de envío. Hay muchas opciones diferentes, y cualquier proveedor de Push puede funcionar para la API de Push (aunque es posible que no ofrezcan un SDK que facilite la integración). Deberás experimentar con el SDK de tu proveedor para ver las posibilidades. El servicio de envío es con el que está registrado el dispositivo del usuario final, por lo que puede recibir alertas sobre cualquier mensaje push enviado por un proveedor de servicios push. No tienes control sobre esto, ya que se codifica en navegadores individuales. En Chrome, Firebase Cloud Messaging es el servicio de envío. Todos los mensajes que se envíen a los usuarios de Chrome se enrutarán a través de él.

Hosting propio de un proveedor de servicios push

Cualquier proveedor de servicios push puede funcionar, pero no todos ofrecen un SDK que funcione en service worker. Deberás consultar a tu proveedor si tienes problemas para ejecutarlo. Sin embargo, no es necesario que utilices 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 copiar la clave pública de VAPID del servidor de envío para generar la suscripción de envío en el navegador. En realidad, esta clave pública es un valor binario codificado en base64 que deberá decodificarse y convertirse en un Uint8Array para registrarse con el administrador de notificaciones del navegador. Hay bibliotecas disponibles para realizar esta lógica, pero lo siguiente es todo lo que necesitas.

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;
}

El valor proporcionado pasa al administrador de envíos.

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 envío. Dado que usas web-push-codelab.glitch.me, este valor se debe copiar en la parte de suscripción de envío de la página.

Una vez que tengas la PushSubscription, podrás registrar un objeto de escucha para 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()}"`);
});

Una vez que hayas implementado el objeto de escucha, puedes enviar un mensaje en web-push-codelab.glitch.me y los mensajes se accederán a la consola del service worker.

Dado que se trata de un estándar web abierto, hay mucha documentación existente sobre cómo implementar Web Push, incluso en el blog de Chrome. Si quieres ver una versión completa del ejemplo que se describe aquí, hay una disponible en nuestro repositorio de muestras de extensiones.

Empuje silencioso

Se pudo recibir una notificación push en la extensión Manifest V3 ya que se introdujo Manifest v3 en Chrome 88. Sin embargo, siempre existía el requisito de que la notificación mostrara algún tipo de mensaje visible para el usuario, como una notificación web. Esto hacía 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 y no orientadas al usuario a tus usuarios. Para ello, establece userVisibleOnly en false cuando llames a pushManager.subscribe.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});