Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Notificaciones

15/16
Recursos

Una de las funcionalidades más populares de las PWA son las Notificaciones.

Hay que tener en cuenta que, si el usuario apenas entra a nuestro sitio y le aparece un mensaje para permitir las notificaciones esto está afectando la UX, por lo cual debemos darle un contexto de porque le vamos a enviar notificaciones a nuestro usuario.

Existen tres tipos de permiso para las notificaciones:

• Estado por defecto: no sabemos si podemos enviar notificaciones o no, aquí es donde debemos preguntarle al usuario si quiere recibir las notificaciones.
• Granted: el usuario ha concedido el permiso.
• Denied: directamente no podemos enviar las notificaciones.

Primero que nada, debemos preguntar si nuestro navegador puede mandar notificaciones. Para ello vamos a checar si hay un objeto Notification en window y un Service Worker en el navegador, esto es así debido a que en Android necesitamos un Service Worker para que las notificaciones funcionen. En iOS no hay soporte para notificaciones.

Aportes 10

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Notificacion con sonido

Solo funciona en Desktop

registration.showNotification("Listo el timer!", {
      body: "Ding ding ding",
      icon: "./icon.png",
      vibrate: [1000, 500, 1000],
    });

Muy bueno el curso, solo me quedo una duda.
veo que al cerrar el servidor de producción y volver a abrirlo, la única forma de ver los cambios es borrando el cache.
Esto es un problema para la UX, hay alguna forma para manejar esta situación?

Holi

A este curso ya viene necesitando una actualizacion. No hay ganas de pagar suscripcion si me voy encontrando con cursos desactualizados

si hay alguien de angular por aqui que este leyendo esto me avisa para caernos a trompazos, lo dijo el profe nos odiamos ok no xD es bromeando

porque se deberian odiar angular y React?

g

Para visualizar la imagen en la notificación lo hice con la propiedad icon

registration.showNotification('time is up', {
      body: 'Ding Dong!!',
      icon: './icon.png',
 
      
    });

Para notificacion tenemos que tener un service worked

Se sebería usar lo siguiente para que aparezca el icono y no una imagen (que además es muy grande) :

< showNotification = async () => {
    const registration = await navigator.serviceWorker.getRegistration();
    if (!registration) return alert('No hay un Service Worker :(');

    registration.showNotification('Listo el timer!', {
      body: 'Ding ding ding',
      icon: '/icon.png',
    });
  };>