Usa Web Push

En las extensiones, puedes usar cualquier proveedor push para enviar notificaciones push y mensajes nuevos. El service worker procesará un envío de la API de Push tan pronto como se recibe. Si el service worker se suspendió, se realizará un envío reactivarla de nuevo. El proceso para usarlo en extensiones es el mismo que se sigue. se usa en la Web abierta.

Obtén permiso para usar la API de Push

Cuando registras un servidor push en un sitio web normal, el usuario un mensaje de permiso para otorgarlo o rechazarlo. Con las extensiones, no se aplicará que se muestra. Para usar la API de Push en tu extensión, debes configurar la El permiso notifications en el archivo manifest.json

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

Si 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 generará una advertencia de permiso para mostrar en la instalación. Chrome también inhabilitará la extensión para cualquier instalaciones existentes hasta que el usuario apruebe la nueva solicitud de permiso. Puedes obtén más información sobre cómo manejar esto en la guía de advertencia de permisos.

Proveedores y servicios de envío

Una vez que hayas agregado el permiso al archivo manifest.json, deberás configura la conexión entre tu backend y la extensión. Esta conexión se puede concebir en dos partes: el proveedor de envío y el servicio de envío. R proveedor es el SDK que usas para enviar el mensaje al servicio de envío. Existen muchas opciones diferentes y cualquier proveedor de Push puede funcionar para ese servicio (aunque es posible que no ofrezcan un SDK que facilite la integración). Tú deberá experimentar con el SDK de su proveedor para ver qué es posible. Un empujón es el servicio con el que está registrado el dispositivo del usuario final, por lo que se puede a cualquier mensaje push enviado por un proveedor de envío. Esto es algo que no control, ya que se codifica en navegadores individuales. Para Chrome, Firebase Cloud Messaging es el servicio de envío. Todos los mensajes que se envían a Chrome usuario enrutado a través de él.

Hosting autónomo de un proveedor de envío

Cualquier proveedor de envío puede funcionar, pero no todos los proveedores ofrecen un SDK que funcione. en los service workers. Deberás consultar a tu proveedor si tienes problemas ponerlo en funcionamiento. Sin embargo, no es necesario que uses un proveedor público. Usando 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 VAPID del servidor de envío para generar el en el navegador. En realidad, esta clave pública es base64 codificado y codificado que se deberá decodificar y convertir en un Uint8Array para registrarse con el comando Push administrador. 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 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 un PushSubscription, un que contiene los metadatos del servidor de envío. Como estás usando web-push-codelab.glitch.me, este valor se debe copiar en la sección de suscripción de envío de la página.

Una vez que tienes la PushSubscription, estás listo para 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()}"`);
});

Con tu objeto de escucha en su lugar, puedes enviar un mensaje en web-push-codelab.glitch.me, y se accederán los mensajes la consola del service worker.

Como es un estándar web abierto, hay mucha documentación existente sobre cómo implementar Web Push, incluso en el blog de Chrome. Para un completa del ejemplo que aquí abordamos, hay una disponible en nuestra repositorio de muestra de extensiones.

Empuje silencioso

Has recibido una notificación push en la extensión de Manifest V3 desde que se introdujo Manifest V3 en Chrome 88. Sin embargo, siempre hubo el requisito de que la notificación muestre algún tipo de mensaje visible para el usuario como una notificación web. Esto hizo que fuera mucho menos útil si si quisieras enviar comandos o actualizaciones de datos a tu extensión sin molestar usuario con información innecesaria. A partir de Chrome 121, las extensiones Se puede establecer userVisibleOnly como false. Ahora puedes enviar notificaciones push silenciosas y no para el usuario. Para usar esto, establece userVisibleOnly en false cuando llames a pushManager.subscribe.

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