Notificacion con sonido
Solo funciona en Desktop
registration.showNotification("Listo el timer!", {
body: "Ding ding ding",
icon: "./icon.png",
vibrate: [1000, 500, 1000],
});
Introducción a PWA
¿Qué es una PWA?
Progressive Web App vs. Native App
El proyecto
Google Lighthouse
Creando un Web Manifest
Implementar el Manifest
Service Workers
¿Qué es un Service Worker?
Introducción a Workbox
Implementando Workbox
Aplicando Estrategias de Carga
Google Analytics Offline
Experimentar con Workbox
Funcionalidades Avanzadas
Web Share API
Trabajando Offline
Notificaciones
Publicando la app
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Notificaciones
15/16Recursos
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:
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?
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?