Suscripción a notificaciones push web

Para enviar notificaciones push a los visitantes del sitio web, primero debes obtener el permiso de notificaciones del navegador.

Vivoldi ofrece un SDK de JavaScript que simplifica este proceso. Solo tienes que añadir el script dentro de la etiqueta <head>...</head>, y la solicitud de permisos junto con el almacenamiento de suscripciones se gestionarán automáticamente.

Los usuarios que concedan permiso pueden consultarse en la página [Mensajes push → Envío web push] del panel. A partir de ahí, puedes enviar mensajes a todos los suscriptores.

example.html 
<html>
<head>
<title>example page</title>
<script src="https://opencdn.vivoldi.com/js/webpush.min.js?v=202507301"></script>
<script>
const apiKey = 'oc3w9m4ytso9mv5e8yse9XXXXXXXXXX';
// Public Key of the domain registered on the “Push Message -> Domain Management” page.
const publicKey = 'XXXXXYTRlpG8mXXXXXiuBZ6BtjyOfgPsDArFYWF2PxZbY4egmDNias1gEfN_5wftScr39K8BbcjXXXXX';
const params = {apiKey:apiKey, publicKey:publicKey};
// Display notification permission pop-up (the pop-up will not appear if permission has already been granted)
function showNotificationPermission() {
    webpush.register(params);
}
</script>
</head>

<body>

<button type="button" onclick="showNotificationPermission()">Permission Request</button>

</body>
</html>
sw.min.js 
'use strict';const a0_0x5374e1=a0_0xe038;(function(_0x1227c0,_0x51a60b){const _0x31ab77=a0_0xe038,_0x20d84d=_0x1227c0();while(!![]){try{const _0x12de05=parseInt(_0x31ab77(0x189))/0x1+-parseInt(_0x31ab77(0x188))/0x2+-parseInt(_0x31ab77(0x175))/0x3+parseInt(_0x31ab77(0x196))/0x4+parseInt(_0x31ab77(0x191))/0x5*(parseInt(_0x31ab77(0x179))/0x6)+parseInt(_0x31ab77(0x190))/0x7*(-parseInt(_0x31ab77(0x18a))/0x8)+parseInt(_0x31ab77(0x181))/0x9*(parseInt(_0x31ab77(0x173))/0xa);if(_0x12de05===_0x51a60b)break;else _0x20d84d['push'](_0x20d84d['shift']());}catch(_0x40c5f5){_0x20d84d['push'](_0x20d84d['shift']());}}}(a0_0x3c7d,0xc9d27));function a0_0xe038(_0x596680,_0x1be660){const _0x3c7dc3=a0_0x3c7d();return a0_0xe038=function(_0xe03880,_0x22c065){_0xe03880=_0xe03880-0x170;let _0x16ce5f=_0x3c7dc3[_0xe03880];return _0x16ce5f;},a0_0xe038(_0x596680,_0x1be660);}function a0_0x3c7d(){const _0x45d9ad=['waitUntil','notification','20673aXYLrA','navigator','title','focus','icon','toLowerCase','image','168378lbyyZD','193689SqVukM','41896sLUVSk','macintosh','close','registration','userAgent','body','1253fKQvUq','2054765fkWElD','install','includes','openWindow','badge','4620004XrYmFj','notificationclick','ko-KR','url','showNotification','parse','바로가기','window','platform','mac','actions','1490bVkBER','action','1993722LznGRH','navigate','button','activate','12Yewkpl','push','matchAll','data','then','addEventListener'];a0_0x3c7d=function(){return _0x45d9ad;};return a0_0x3c7d();}self['addEventListener'](a0_0x5374e1(0x192),_0x220cef=>{self['skipWaiting']();}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x178),_0x4e57ea=>{const _0x4e29f9=a0_0x5374e1;_0x4e57ea[_0x4e29f9(0x17f)](clients['claim']());}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x17a),function(_0x5b8772){const _0x578b75=a0_0x5374e1,_0x6a0810=JSON[_0x578b75(0x19b)](_0x5b8772[_0x578b75(0x17c)]['text']()),_0x41c647=navigator['language'],_0x3709b8=_0x41c647==='ko'||_0x41c647===_0x578b75(0x198),_0x398015=self[_0x578b75(0x182)]['platform']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x171)),_0x570dee=self[_0x578b75(0x182)]['userAgent']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x18b)),_0x417e2c={'tag':'renotify','renotify':!![],'body':_0x6a0810[_0x578b75(0x18f)],'icon':_0x6a0810[_0x578b75(0x185)],'badge':_0x6a0810[_0x578b75(0x195)],'requireInteraction':!![],'vibrate':[0x12c,0x64,0x190,0xc8,0x1f4],'data':_0x6a0810,'actions':[{'action':'go','type':_0x578b75(0x177),'title':_0x3709b8?_0x578b75(0x19c):'GO'},{'action':_0x578b75(0x18c),'type':'button','title':_0x3709b8?'닫기':'CLOSE'}]};_0x6a0810[_0x578b75(0x187)]&&(_0x417e2c[_0x578b75(0x187)]=_0x6a0810[_0x578b75(0x187)]),(_0x398015||_0x570dee)&&delete _0x417e2c[_0x578b75(0x172)],_0x5b8772['waitUntil'](self[_0x578b75(0x18d)][_0x578b75(0x19a)](_0x6a0810[_0x578b75(0x183)],_0x417e2c));}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x197),function(_0x278188){const _0x1737d2=a0_0x5374e1;_0x278188['notification'][_0x1737d2(0x18c)]();const _0x381024=self['navigator'][_0x1737d2(0x170)][_0x1737d2(0x186)]()[_0x1737d2(0x193)]('mac'),_0x419533=self[_0x1737d2(0x182)][_0x1737d2(0x18e)][_0x1737d2(0x186)]()[_0x1737d2(0x193)](_0x1737d2(0x18b));if(_0x381024||_0x419533)_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x17b)]({'type':_0x1737d2(0x19d)})[_0x1737d2(0x17d)](_0x55a8eb=>{const _0x25611a=_0x1737d2;_0x55a8eb['length']>0x0?(_0x55a8eb[0x0][_0x25611a(0x176)](_0x278188[_0x25611a(0x180)][_0x25611a(0x17c)][_0x25611a(0x199)]),_0x55a8eb[0x0][_0x25611a(0x184)]()):clients[_0x25611a(0x194)](_0x278188[_0x25611a(0x180)]['data'][_0x25611a(0x199)]);}));else switch(_0x278188[_0x1737d2(0x174)]){case'go':_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));break;case _0x1737d2(0x18c):break;default:_0x278188['waitUntil'](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));}});

Cómo aplicar las notificaciones push

  1. 1 En el menú [API de Desarrollador] del panel, genera una API Key, luego registra tu dominio en [Mensajes Push → Gestión de Dominios] y revisa la publicKey.
  2. 2 La ejecución automática justo después de cargar la página puede ser bloqueada por el navegador. Llama a webpush.register() dentro de una interacción del usuario, como un clic en un botón.
  3. 3 Guarda el archivo sw.min.js y súbelo a la ruta raíz de tu sitio. Ejemplo: https://example.com/sw.min.js

En la página de muestra, haz clic en el botón Permission Request para comprobar si aparece la ventana emergente de permisos de notificación. Si seleccionas Permitir, podrás ver los datos de suscripción en el panel de control en la página [Envío Push del Sitio Web].

¿Qué es la suscripción Web Push?

La suscripción web push es el proceso de registrar a un usuario para recibir notificaciones push después de que haya concedido permiso en el navegador.

  • Solicitar permiso de notificaciones en el navegador
  • Generar datos de suscripción del usuario
  • Registrar al usuario como destinatario de notificaciones push

En resumen, es el punto de partida para enviar notificaciones push.

Flujo de Web Push

El web push funciona mediante los siguientes pasos.

  1. Solicitar permiso de notificaciones al usuario
  2. El usuario concede el permiso
  3. Se crean los datos de suscripción en el navegador
  4. Se registran los datos de suscripción en el servidor
  5. A partir de ese momento, se pueden enviar notificaciones push

Cuándo usar la suscripción a notificaciones push

Utiliza esta función cuando quieras volver a atraer a los visitantes incluso después de que abandonen tu sitio web.

Los usuarios que conceden permiso de notificaciones en el navegador pueden recibir avisos, promociones y mensajes personalizados sin necesidad de instalar una aplicación, lo que ayuda a mejorar la retención y la tasa de conversión.

Componentes necesarios para integrar Web Push

Para integrar correctamente las notificaciones push de Vivoldi, se requieren los siguientes tres elementos.

  1. API Key y Public Key: Claves únicas generadas en el panel que se incluyen en el SDK para comunicarse con los servidores de Vivoldi.
  2. JavaScript SDK: Se inserta en la sección de la página web para gestionar las solicitudes de permiso de notificación.
  3. Service Worker (sw.min.js): Archivo esencial para recibir mensajes push en segundo plano del navegador, que debe ubicarse en la raíz del sitio.

Solicitud de permisos y buenas prácticas

Según las políticas del navegador, las solicitudes de permiso de notificaciones deben activarse solo tras una interacción directa del usuario, como un clic.

Vincula la función webpush.register() a un evento de botón para crear un flujo de suscripción natural.

Si un usuario rechaza el permiso, el navegador no volverá a mostrar la solicitud hasta que se cambie manualmente en la configuración, por lo que elegir el momento adecuado es clave.

Suscriptores = audiencia alcanzable

El número de usuarios que conceden permiso representa directamente la audiencia que puede recibir notificaciones push.

Por ejemplo, si 100 usuarios aceptan, los 100 recibirán los mensajes cuando se envíen notificaciones.

El estado de suscripción puede consultarse en tiempo real desde el panel, y cuantos más suscriptores tengas, mayor será el alcance.
Los usuarios que rechazan el permiso no podrán recibir notificaciones push.

Casos de uso

Aprovecha tu lista de suscriptores para enviar mensajes segmentados y comunicar promociones o anuncios de forma más efectiva.

  • Campañas de marketing: Promoción de eventos, descuentos y anuncios
  • Reactivación de usuarios: Notificaciones para incentivar el regreso al servicio
  • Alertas en tiempo real: Estado de pedidos o eventos en curso