Usa Web Push

En las extensiones, puedes usar cualquier proveedor de envío para enviar notificaciones y mensajes push. Tu service worker procesará un envío de la API de Push en cuanto lo reciba. Si el service worker se suspendió, un envío lo reactivará. El proceso para usarlo en extensiones es exactamente el mismo 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, se le muestra al usuario un mensaje de permiso para otorgarlo o denegarlo. Con las extensiones, no se mostrará ese mensaje. Para usar la API de Push en tu extensión, debes configurar el permiso notifications en tu archivo 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 hubiera denegado el permiso. Además, ten en cuenta que el notifications permiso 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 de envío

Una vez que hayas agregado el permiso a tu archivo 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 envío y el servicio de envío. Un proveedor es el SDK que usas para enviar el mensaje al servicio de envío. Hay muchas opciones diferentes, y cualquier proveedor de envío 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 qué es posible. Un servicio de envío es aquel con el que está registrado el dispositivo del usuario final, por lo que se puede alertar sobre cualquier mensaje push que envíe un proveedor de envío. Esto es algo que no puedes controlar, ya que está codificado de forma rígida en navegadores individuales. En el caso de 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.

Autoalojamiento de un proveedor de envío

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

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 se pasa al administrador de envío.

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 un PushSubscription, un objeto que contiene los metadatos del servidor de envío. Como usas web-push-codelab.glitch.me, este valor debe copiarse en la sección de suscripción de envío de la página.

Una vez que tengas el PushSubscription, podrás 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 en su lugar, puedes enviar un mensaje en web-push-codelab.glitch.me, y los mensajes se registrarán en la consola del service worker.

Como es un estándar de la Web abierta, existe mucha documentación sobre cómo implementar Web Push, incluso en el blog de Chrome. Para obtener una versión completa del ejemplo que se aborda aquí, hay una disponible en nuestro repositorio de muestras de extensiones.

Envío silencioso

Puedes 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 estén orientadas al usuario. Para usar esta función, establece userVisibleOnly en false cuando llames a pushManager.subscribe.

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