Las notificaciones push ahora son compatibles en varios navegadores

Envía notificaciones oportunas y útiles a los usuarios.

Thomas Steiner

Las notificaciones push se estandarizaron en 2016 con el lanzamiento de la API de Push y la API de notificaciones, que forman parte del grupo de trabajo de aplicaciones web del W3C. Estas APIs proporcionan la funcionalidad necesaria para que los desarrolladores web incorporen notificaciones push en sus aplicaciones web y para que los usuarios reciban e interactúen con ellas en sus navegadores web. Los mensajes push son notificaciones que se envían al navegador web de un usuario desde un sitio web o una aplicación a los que el usuario le otorgó permiso previamente para enviar notificaciones. Estos mensajes se pueden usar para alertar al usuario sobre contenido nuevo o actualizaciones, recordarle próximos eventos o fechas límite, o proporcionarle otra información importante. Los mensajes push pueden ser particularmente útiles para las aplicaciones que necesitan entregar información oportuna y relevante a sus usuarios, como las apps de noticias o deportes, o para los sitios web de comercio electrónico que desean enviar notificaciones a los usuarios sobre ofertas o ventas especiales.

Para registrarte para recibir notificaciones push, primero verifica si tu navegador las admite. Para ello, busca los objetos serviceWorker y PushManager en los objetos navigator y window.

Si se admiten notificaciones push, usa las palabras clave async y await para registrar el servicio trabajador y suscribirte a las notificaciones push. Este es un ejemplo de cómo puedes hacerlo con JavaScript:

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Lecturas adicionales

• Descripción general de las notificaciones push
• API de Push
• Web Push para apps web en iOS y iPadOS