Las notificaciones push ahora son compatibles en varios navegadores

Ofrece notificaciones oportunas y útiles a los usuarios.

Las notificaciones push se estandarizaron en 2016 con el lanzamiento de la API Push y la API de Notification, que forman parte del grupo de trabajo de aplicaciones web de W3C. Estas API proporcionan la funcionalidad necesaria para que los desarrolladores web incorporen notificaciones push a sus aplicaciones web y para que los usuarios reciban e interactúen con las notificaciones 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 ya otorgó permiso para enviar notificaciones. Estos mensajes se pueden usar para alertar a los usuarios sobre contenido nuevo o actualizaciones, recordarles próximos eventos o fechas límite, o bien proporcionar otra información importante. Los mensajes push pueden ser particularmente útiles para aplicaciones que necesitan entregar información relevante y oportuna a sus usuarios, como apps de noticias o deportes, o para sitios web de comercio electrónico que desean enviar notificaciones sobre ofertas o liquidaciones especiales.

Si quieres 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 las notificaciones push, usa las palabras clave async y await para registrar el service worker y suscribirte para recibir notificaciones push. A continuación, se muestra un ejemplo de cómo 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.");
}

Navegadores compatibles

  • 42
  • 17
  • 44
  • 16

Origen

Lecturas adicionales

Parte de la serie Renovadamente interoperable