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