Web Push | Notificaciones usando Nodejs y Service Workers
Вставка
- Опубліковано 19 вер 2024
- Utilizar las notificaciones en un aplicacion web permiten que los usuarios volver a visitar el sitio ya sea por nuevo contenido o por cualquier otro tipo de evento.
En este video vamos a crear una aplicacion Web utilizando Nodejs, como servidor; HTML, CSS y Javascript como tecnologías del Frontend; Web push, como tecnología para enviar notificaciones y Service worker, una API para mantener ejecutando siempre una escucha al event push.
CÓDIGO
github.com/Faz...
CURSO DE ANGULAR
• Angular 6 Curso Practi...
CURSO DE MONGODB
• MongoDB Curso, Introdu...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
CURSO DE EXPRESS
• Expressjs | Nodejs Fra...
VARIABLES DE ENTORNO NODEJS
• Variables de Entorno e...
CURSO DE JAVASCRIPT
• Curso Javascript para ...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - UA-cam:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com...
#notifications #webpush #nodejs
Honestamente no me suscribo a ningún canal de youtube, pero tus videos son magníficos, soy desarrollador desde hace 13 años y tu conocimiento es extraordinario. Me gusta que vas a la práctica no como muchos otros que dan míl vueltas y no dicen nada, felicidades.
Han pasado 4 años que publicaste este video, pero aun asi es el unico que me ayudo a implementar las notificaciones push en mi App Web. Increible. Eres grande Fazt
Excelente Titán, el mejor UA-camr que conozco.!
Muchas gracias por todo, mi profesor insistia en que usara Google, pero tus tutoriales son sencillos organizados y minimalistas
Si luego como que omiten pasos y te quedas de que tengo que hacer ahora... A veces
Sos un Master, no por el conocimiento, sino por compartir GENEROSAMENTE. Gracias Fazt!!!!
van casi 3 a;os que programo y siempre vuelvo a fazt!.. Todas las respuestas, gracias por tanto.
El video está genial, super claro. Miré varios sobre el tema y es el más práctico, sin vueltas. Lamentablemente no logré que me funcionen las notificaciones en ningúnn navegador. En Firefox me pidió los permisos en los otros ni eso, y tengo los permisos correctos. El subscribe funciona y el send-message hace el post pero luego nada vuelve. Estoy en Windows 10.
La verdad me cuesta creer que solo tengas 80k de suscriptores. Recomendémoslo mas chicos y chicas !!
Eso sí me interesa. Gracias crack! 😜 Ya casi cumples 5 años en UA-cam 😳
Otra vez la hiciste! excelente el material que has compartido. Con esa libreria evitaría la suscripción a FCM y podria pasar a gorush los datos!!! Hoy mismo hago el experimento.
Gracias de verdad te pasaste.
Q ganas tenia de que explicaras esto🎉🎉
Excelente amigo, con vos si se aprende, que proyectos para profesionales.
muchas gracias Fazt! me salvaste muchas veces, no sabia que era ni mucho menos como funcionaba el service-worker
42:11 En mi caso que tengo Windows 10 la notificación se puede ver en el centro de acciones de Windows. Hagan Click en el icono de globo de texto que esta al lado de la fecha y hora de Windows.
Dejo mi like sin ver el video esto se sabe que es calidad, Gracias Fazt
Podrias hacer un turorial de PWA con javascript?
Una PWA en react
@@jhonneirachise6464 Esa funcion ya la tiene ReactJS checa en el archivo index.js de src, solo cambia unregister por register y listo ;)
@@davidisrael8937 Tienes tener en cuenta si es con create-react-app ya que sin ese metodo, es un poco más complicado:)
React solo necesitas seguir los pasos de google analyzer para crear una pwa unicamente, poco a pocoo no importa si es en react pero es mejor que busques por tu cuenta
14:30 comando web push PRIVATE KEY PUBLIC KEY
Muy didáctico y bien explicado!!
seria posible enviar notificaciones push pero discriminadas por usuario/navegador? es decir que una notif. se vea solo en un navegador y no en otro... de acuerdo al usuario.
¡Que bueno este primer paso en las PWA! Si puedes darnos otros "pasos" de las WPA sería fantástico! A mi me pasa algo raro: me funciona en la distro de linux lite con Chromium y no me funciona en Win 10 con Chrome.... tendría que averiguar si hay algo que me impide este push ... ;-)
Grande! aun que sea para node me las he apañado para adaptarlo a PHP ya que las bases son iguales
Gracias por el dato porque trabajo con servidor PHP ya que Node no me convence. Sería increíble si proporcionaras algún dato más.
Me encantan tus vídeos broo tenes talento. Me gustaría que hicieras algún sistema distribuido que maneje concurrencia estaría genial
Hola Fast Code!, tengo una web en el cual tengo dos tipos de usuarios el usuario 2 le envía información al usuario 1 a través de un form, pero la única manera de que el usuario 1 sepa que ele enviaron una información es hacer f5, siempre y cuando el usuario 1 este en su dashboard, vi tu video es excelente!, y casi se ajusta a la necesidad, te agradecería mucho tu guía para poder solucionarlo. MUCHAS GRACIAS!
Como hiciste amigo? Necesito enviarle la notificacion a un grupo de usuarios con cierto Id
Super, fuiste explicando muy bien, sigue así.
Push notification con firebase y angular 🙌🙌🙌🙌 pls
Buen video, esto también puede funcionar para aplicaciones móviles?. Entonces si creamos nuestro propio servicio de notifications esto sustituiría a un alquiler servicios de terceros (One-push, Firebase)? Saludos Fazt Code
Se lo hace pero lo unica es que se tiene parecido un web socket entonces creo que deberias pensar o ver si te conviene y tu server aguantara tantas peticiones o envios de estas
@@yonaasael3945 lo mismo pense, pero tengo una consulta y como haria para enviar notificaciones si ya cerranron mi pagina asi como lo hacen las paginas de noticias,curiosidades etc
Gracias Fazt eres el mejor! me has sacado de muchos problemas!
hola fazt me encanta que subas estos videos sigue asi eres fantastico tengo una pregunta es mujar frameworks como angular,reac,vue o usar ejs,hbs etc
Grande Fazt. :)
Haras un Curso de PWA?
Excelente como siempre. muchas gracias.
Me pregunto como es que funciona si se supone que los service workers solo van sobre https
Fazt, buenisimos videos!, duda: ¿las notificaciones solo funcionan en google chrome?
No, son una API del navegador.
Primero lo primero, insisto en que crees tutoriales en Udemy.
Gracias por tu aporte a los apasionados por la tecnología
para que los quieres en udemy si aqui nos da su conocimiento este crack
@@oscarescamilla5627 Exacto nos da conociemiento libre en udemy tendria que pagar y tomarse su tiempo pero depende mucho que quieras hacer
Excelente tutorial Fazt Gracias
Hola fazt, has usado o conoces un ORM llamado Prisma? Sabes si se puede integrar sin GraphQL?
Ya hice todo lo que me dijiste pero debo ahora ponerlo en practica en mi pagina web
pero no se como ya que tu defines public como el contenido
Hola. Gracias por el tutorial. Dios te acompañe.
Tengo una pregunta, ¿el servicio requiere de internet? Si ejecuto todo en una red local aislada, ¿seguirían funcionando las notificaciones?
Implementé la solución y sí requiere de internet pues utiliza Firebase. Según la doc de Google, explica las características que debería tener tu servidor para utilizar esta funcionalidad, pero al final te sugiere utilizar Firebase, que pena.
Muchas Gracias maestro Fazt!
varios problemas con el codigo: no ejecuta en brave de forma correcta SALE ESTE ERROR:(DOMException: Registration failed - push service error) y en celulares parece que ni pregunta para activar notificaciones, el codigo y la explicacion esta de 10, una lastima que no se ejecute de forma correcta en el telefono o en ciertos navegadores
timestamp to watch later: 17:28
Podrias hacer un turorial de PWA con VueJS?
Hola. Quisiera saber si puedes hacer un video de introducción a scala.. SALUDOS DESDE ECUDOR 🇪🇨
Haz un tutorial guardando las suscripciones!
vamos hazlo ajaja!
Maestro como siemore ☺️
Gracias, justo lo que necesitaba :)
Más vídeos de Arduino junto con nodejs gracias profe
hola, primero felicitaciones, por el video, queria que me aclares algo, por lo que veo en las repuestas del worker, usa FCM. api?, eso puede desactivarse, o es mejor directamente el plug de FCM?. gracias.
Muy buen video! puedes explicar como hacer para que sean notificaciones autenticadas? por ejempolo que solo se notifique a un grupo de personas? gracias
Excelente, muchas gracias
15:09 VARIABLES DE ENTORNO
Gracias bro, excelente trabajo. Me ha servido de mucho. Tengo un detalle.
Me funciona perfecto en Chrome y Edge, pero cuando envio la notificación a un cliente Firefox, el 'webpush.sendNotification' me arroja este error:
Request did not validate missing authorization header. Code 401
Sabes cuál header me hace falta?
Sería muy bueno una pwa !
Buenas tardes, buen video, podrias hacer un video con servidor https y serverworker?
Excelente, muchas gracias ='D
Excelente video.
Vi una pregunta que es muy buena: Solo funciona en Chrome?
Hola...buen video ,no me queda muy claro que funcionalidad le puede hacer a mi app si agrego eso ..Si alguien me puede ayudar :C
Hola Fazt! esto lo puedo hacer directamente con react?
Hola Fazt, una pequeña consulta. Me va muy bien el paso a paso. Cuando escribo en la caja de texto, veo en la consola el json con el title y el message. Pero visualmente no me sale la notificación! Tengo activadas las notificaciones en mi navegador. Qué puedo hacer, gracias de antemano! Excelente tutorial.
haz otro video para php!
saludos, en el playload que envias se puede pasar parametros ademas de title y message?
Si uso vue, como puedo enviar notificaciones al llegar tal fecha
Hola, como haría para que se muestren también en el teléfono?
Y si quiero mandar mensaje a muchos dispositivos?
Gracias Feazt, muy bueno el video.
Una duda, lo he probado en un eroku, pero si por ejemplo me suscribo con varios navegadores, solo el ultimo recibe la push, hay forma de todos la reciban?
y en caso de tener front en otro server, como se vincula con el servicio de push del backend?
gracias.
Supongo que tienex que ir guardando las suscripciones de los usuarios, es decir, guardar los endpoint en un array y luego recorrerlos y mandarlos a cada suscripcion
Soy yo? o el Señor Fazt se escuchaba algo agotado?
Me llegó a funcionar pero no funciona en android lo cual no lo hace muy práctico
si estoy haciendo una app con react native para android y IOS sirven las notificaciones?
Hey I have now seen your video and wanted to ask if it is also possible to select a date as a user on which a push message should be sent. So like a todo list where you are notified when you want that. You have a Html datetime and select a date and on the date it is only displayed. Is that possible and if so how exactly? Thanks :)
Hola esto tambien puede servir para aplicaciones de escritorio tipo windows forms?
Por cierto, en reactjs solamente con instalar el create react app ya viene configurado como PWA ?
si
@@davidisrael8937 gracias
Fazt para instalar web-push en typescritp es posible? Estoy intentado usarlo pero el module @types no lo encuentra
fazt mi hosting debe tener nodejs para que funcione las notificaciones?.
¿Soy el único que le gritaba a la pantalla cuando pegó el mismo texto en ambas key? xD
Hola, ya paso tiempo, pero te comento que al dia de hoy no funciona el ejemplo, todo está correcto sin errores, el worker registrado y funcionando pero la notificacion self.registration.showNotification( no se ve en el terminal. Nota que estoy con IOS y chrome.
Como lo solucionaste máster?
¿Esto es como el web sockets?
Excelente video :D tengo una consulta y como haria para enviar notificaciones si ya cerraron mi pagina asi como lo hacen las paginas de noticias,curiosidades etc, seria tambien con tambien con esta api?
Encontrarte algo?
encontraste algo?
¿como lo puedo implementar del ladod el servidor?
Alguien sabe cómo mandar notificaciones a un usario específico?
mi estimado sera que me puesdes ilustrar como hacer para enviar una notificacion a un cliente en especifico, si se ocupa firebase te permite almacenar un token del cliente pero en este video no logro ver algo similar y me gustaria dejar de ocupar firebase gracias por todo y del tiempo que nos da para poder aprender con tus video
Ya sabes como enviarle la notificacion a personas específicas?
@@mauriciogiraldo937 si ya muchas gracias ahora lo que tengo es que en el momento de ocupar Jose para verificar mi coockie extraer el dato que lo ocupo para realizar una consulta cuando retorna a la vista me da un error 500 si quito la linia qué verifica si la coockie es válida no tengo ningún error
@@tomassalazar9000 me podrias enseñar como hacerlo?
Buena, no pude terminar no me funciona el endpoint..
Tengo una duda. Al enviar la notification esta se ve reflejada en todos los dispositivos que aceptaron recibir notificaciones del sitio o solo en el mio?
en todos
bro como seria para enviar notificaciones a diferentes usuarios que estan en una bd :/
encontraste la manera? tambien buscaba ese tema...
Buen video ;). Alguien que me recomiende alguna doc para hacer una pwa?
Google analyzer te da todos los pasos necesarios
A alguien le aparece este error?
Error: You must pass in a subscription with at least an endpoint.
A mi me pasa lo mismo, pudistes resolverlo?
Muy buen video!, una pregunta soy un poco nuevo en esto, como debería organizar las carpetas para subirlo a un servidor online? ya que el servidor ejecuta index.php o index.html,
intente reorganizarlas y cambie las direcciones para que se me ejecutara el index.html y no me funciono en el servidor online. :(
Php y html se ejecutan en un servidor de apache, en node es algo distinto. Primero debes instalar node en tu servidor, luego correr un script para iniciar tu servidor, en este caso fazt usa express. Cuando ya tengas tu servidor corriendo deberás crear las rutas en donde quieres que mande los archivos html y usar la función res.send() para enviar el archivo a la ruta.
crack, c':
Deberias subir el proyecto gratis para que uno pueda descargarlo
Esto es un websocket?
noo, web push
Abrí el puerto en windows para poder acceder a la app de node remotamente desde un celular para probar las notificaciones, pero las notificaciones se muestran en la computadora, no en el celular jajaj