Web Push: implementar notificaciones remotas

En esta página, aprenderá cómo se manejan las notificaciones en su aplicación y cuáles son todas las opciones disponibles para crear una excelente experiencia de correo electrónico para sus usuarios.

info

Tenga en cuenta que todos los navegadores, excepto Safari, deberán estar abiertos para recibir notificaciones. Safari en MacOS seguirá recibiendo notificaciones incluso cuando el navegador no esté abierto. Los usuarios recibirán notificaciones incluso si su sitio web no está orientado o no está abierto, siempre que el navegador esté funcionando.

Solicitar autorización

Para habilitar notificaciones remotas dentro de su aplicación, es importante obtener permisos de usuario antes de enviar notificaciones. Debido a ciertas restricciones impuestas por los navegadores web, esta solicitud de permiso no puede ocurrir automáticamente cuando se carga la página. En cambio, debería activarse como resultado directo de una acción del usuario, como hacer clic en un botón designado.

Hay dos métodos principales para incorporar usuarios y habilitar notificaciones remotas: usar funciones estándar o integrar manualmente la función a través de su código base.

Al utilizar la funcionalidad estándar, nuestro SDK se encargará de mostrar los componentes de la interfaz de usuario necesarios en función de la información proporcionada durante la configuración (logotipo, idiomas,...). Además, el SDK gestionará sin problemas la activación de notificaciones remotas cuando se considere apropiado para la configuración seleccionada. Finalmente, asegúrese de incluir el archivo CSS Notificare Push, que es necesario para mostrar correctamente la interfaz de usuario de integración administrada.

import 'notificare-web/push/push.css';

Alternativamente, si elige habilitar manualmente las notificaciones remotas, es su responsabilidad supervisar la interfaz de usuario de incorporación y todo el proceso asociado.

Habilitar notificaciones

Para permitir que el dispositivo reciba notificaciones, solo necesita invocar un único método.

import { enableRemoteNotifications } from 'notificare-web/push';

await enableRemoteNotifications();

Puede comprobar si el usuario ya ha habilitado las notificaciones remotas.

import { hasRemoteNotificationsEnabled } from 'notificare-web/push';

const enabled = hasRemoteNotificationsEnabled();

Además, puede comprobar si el usuario ha desactivado las notificaciones en la configuración del navegador.

import { getAllowedUI } from 'notificare-web/push';

const allowedUI = getAllowedUI();

Aunque los cambios solo se realizan cuando el usuario recarga la página, es posible que también se le notifiquen los cambios en los permisos de notificación del navegador.

import { onNotificationSettingsChanged } from 'notificare-web/push';

onNotificationSettingsChanged((allowedUI) => {
  // more code ...
});

Desactivar notificaciones de forma remota

Deshabilitar las notificaciones de forma remota se puede hacer de la misma manera que habilitarlas.

import { disableRemoteNotifications } from 'notificare-web/push';

await disableRemoteNotifications();

Cuando se llama a este método, registraremos automáticamente su dispositivo para nunca recibir notificaciones remotas, aunque siempre mantendrá el mismo perfil de usuario, los mismos mensajes de la bandeja de entrada y disfrutará de todos los demás servicios admitidos por su plan. Puede solicitar volver a registrarse para recibir notificaciones automáticas en cualquier momento si lo desea.

Recibir notificaciones

Para poder recibir notificaciones es necesario tener un archivo Service Worker disponible en el directorio raíz de su sitio web.

Para simplificar el proceso, ofrecemos un archivo de trabajo que maneja las notificaciones entrantes, eliminando la necesidad de cualquier integración manual.

Asegúrese de compartir este archivo en https://your-website/sw.js. Si incluye este archivo como parte de su procedimiento de compilación, puede importarlo desde el paquete usando el siguiente ejemplo.

import 'notificare-web/push/sw';

Alternativamente, tiene la opción de importarlo directamente desde la CDN usando la función importScripts. Sin embargo, es importante confirmar que la versión importada coincida con la versión de sus paquetes.

importScripts('https://cdn.notifica.re/libs/web/v3/{version}/notificare-push-sw.js');

Para obtener información más completa sobre Service Workers, consulte la información detallada disponible aquí.

Para admitir Web Push en iOS 16.4 o posterior, es necesario entregar un archivo de manifiesto configurando la propiedad de visualización como independiente. Puede consultar el siguiente manifest.json como punto de partida para su aplicación.

{
  "name": "Your app name",
  "short_name": "Your app name",
  "display": "standalone",
  "start_url": "/"
}

Finalmente, declare su manifiesto en su archivo HTML como se muestra a continuación.

<!DOCTYPE html>
<html>
<head>
  <link rel="manifest" href="/manifest.json" />
</head>
</html>

nota

Web Push en iOS 16.4 o posterior solo está disponible cuando el usuario agrega la aplicación web a la pantalla de inicio.

Puede encontrar más información sobre los archivos de manifiesto de aplicaciones web aquí.