No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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 12

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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?

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

Holi

Ya que todas las p谩ginas piden enviar notificaciones, ya se volvi贸 reflejo rechazar. La duda es: 驴Esto vale la pena implementarlo? veo de m谩s provecho esto:

Aunque bueno, estoy en contra de la forma en la que Platzi abusa de estas notificaciones. De un d铆a para otro pueden aparecer tranquilamente 10 o 20 notificaciones. Esto me llevo a mecanizar el insta-clicar marcar todas como le铆das.

Se que todos los usuarios no son como yo, pero me hace cuestionar sobre la utilidad de darse la pela de implementar todo esto.

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

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',
    });
  };>

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

Como usuario me gustan las notificaciones en web. Son siempre bastante molestas.