🔔 Como ENVIAR notificaciones push en web PWA con ANGULAR😎
HTML-код
- Опубликовано: 30 июл 2024
- 🔥 🔥 Angular desde cero🔥🔥 🔥 🔥 Node desde cero🔥🔥
En el video de hoy aprenderás a enviar notificaciones push hacia tu PWA
Si estás empezando a programar, o si quieres fortalecer tus conocimientos te doy la bienvenida a este canal.
Aquí hablamos de angular desde cero, y node desde cero, también complementamos con cursos gratis mongo, de frontend de backend, problemas reales de un programador y soluciones que se aplican en el día a día.
Aquí vas a encontrar tutoriales de angular, tutoriales de node, juntos llevaremos a la práctica ejercicios reales de programación, así que venga y le cuento.
Si aún no estás suscrito y este contenido gusta 👉 / @leifermendez
github.com/leifermendez/notif...
👋 𝐂𝐔𝐑𝐒𝐎𝐒 𝐆𝐑𝐀𝐓𝐈𝐒
├ 0️⃣ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
├ 1️⃣ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 2️⃣ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 3️⃣ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
└ 4️⃣ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒
└ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ link.codigoencasa.com/PROMO-I...
🚀 𝐂𝐎𝐌𝐔𝐍𝐈𝐃𝐀𝐃 𝐘 𝐆𝐑𝐔𝐏𝐎𝐒 𝐃𝐄 𝐄𝐒𝐓𝐔𝐃𝐈𝐎
├ 𝙎𝙐𝙎𝘾𝙍𝙄𝘽𝙀𝙏𝙀 ⮕ / @leifermendez
├ 𝙈𝙄𝙀𝙈𝘽𝙍𝙊𝙎 ⮕ / @leifermendez
└ 𝙏𝙀𝙇𝙀𝙂𝙍𝘼𝙈 ⮕ t.me/leifermendez
🏆 𝐌Á𝐒 𝐂𝐎𝐍𝐓𝐄𝐍𝐈𝐃𝐎
├ 𝙎𝙋𝙊𝙏𝙄𝙁𝙔 ⮕ spoti.fi/3vnrvqg
├ 𝙔𝙊𝙐𝙏𝙐𝘽𝙀 ⮕ / leifermendez
├ 𝙄𝙉𝙎𝙏𝘼𝙂𝙍𝘼𝙈 ⮕ / leifermendez
├ 𝘽𝙇𝙊𝙂 ⮕ www.codigoencasa.com
└ 𝙁𝘼𝘾𝙀𝘽𝙊𝙊𝙆 ⮕ / leifermendez.dev
💰 𝐏𝐑𝐎𝐌𝐎𝐂𝐈𝐎𝐍𝐄𝐒 𝐘 𝐃𝐄𝐒𝐂𝐔𝐄𝐍𝐓𝐎𝐒
├ 𝙃𝙊𝙎𝙏𝙄𝙉𝙂 Aprovéchate del descuento) ⮕ bit.ly/hosting-descuento-leif...
├ 𝙑𝙋𝙉 (3 meses gratis de servicio) ⮕ bit.ly/vpn-leifermendez
└ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊 ⮕ link.codigoencasa.com/MAS-COSAS
🧠 𝐑𝐄𝐏𝐎𝐒𝐈𝐓𝐎𝐑𝐈𝐎 𝐘 𝐂𝐎𝐃𝐈𝐆𝐎𝐒
└ 𝙂𝙄𝙏𝙃𝙐𝘽 ⮕ github.com/leifermendez
✉️ 𝐂𝐎𝐍𝐓𝐀𝐂𝐓𝐎
└ 𝙈𝘼𝙄𝙇 ⮕ leifer.contacto@gmail.com
👉 Ver curso en orden ⮕ • CURSO Instalar GIT Bas...
Ver el CURSO en ORDERN • CURSO COMANDO cd / Cam...
Conviértete en miembro de este canal para disfrutar de ventajas:
/ @leifermendez
0:00 Intro
0:52 ¿Que es notificacion Push?
1:40 ¿Ques Notificacion?
2:06 ¿Ques es PUSH?
2:52 Iniciando
3:26 VAPID Key
4:20 Generar VAPID Keys
5:55 Solicitar permisos
10:10 Servicio API
11:09 Servidor Express
11:54 Inicializando Node App
12:38 Instalando Librerias
14:14 Controladores
15:01 Controlador de SAVE
17:38 Controlador de SEND
19:29 MAGIA!
21:04 Enviando notificacion :)
22:09 OJO atencion SSL
---
Si el contenido de esta lección te gusta recuerda suscribirte al canal, compartirlo, dejar una manito arriba y activar la campanita para que youtube te avise cuando subo un nuevo video.
#leifermendezAngular #leifermendezNode #leifermendezSocket
├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ leifermendez.github.io/#/
├ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ bit.ly/367tJ32
├ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ bit.ly/3od1Bl6
├ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ bit.ly/3qh35wK
├ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ bit.ly/3pg1Q02
└ 𝙉𝙂𝙍𝙓 𝙙𝙚𝙨𝙙𝙚 𝘾𝙀𝙍𝙊 ⮕ link.codigoencasa.com/NODE
Excelente video! Muy bien explicado y fundamentado.
Gracias recuerda pasarte por los demás cursos
Qué barbaridad. Como lo explicas. Eres muy necesario, gracias amigo
Hola José Luis bienvenido a este canal 😁
Gracias por el vídeo, Leifer! Es la primera vez que te veo, y me he suscrito
Venía buscando push-notifications con Angular + Firebase, y aunque el enfoque que le has dado tú es diferente, me ha venido genial para aprender un par de trucos :) Gracias!
¿Sueles hacer contenido relacionado con Firebase?
Gracias y bienvenido próximamente empezamos con firebase
Leifer buen video, ojalá algún momento te crees como hacer una PWA .
Excelente tutorial! Estaria bueno si podes hacer uno para CodeIgniter 3
Excelente contenido!
Gracias. Recuerda pasarte por los demás cursos
Hola Leifer, felicitaciones por tu video, es muy funcional.
Solo tengo una pregunta: Como puedo hacer para agregarle una url y que al dale click cl boton, me abra esa url, agradezco tu aporte para lograr el objetivo-
Excelente tutorial, justo lo que necesitaba!! nuevo suscriptor.
Adicionalmente comentarte que estare provando las swPush para enviarlo de un usuario a otro por la misma app (Angular) y quisiera saber si, en caso de tener fallas o dudas me puedas dar una mano en ello.
De ante mano mil gracias!!!!! :D
Hola Vince si cualquier cosa me puedes comentar o por el fb
Leifer como andas, saludo desde Cuba, he aprendido con tus cursos bastante , explicas muy bien. Una pregunta nunca has hecho una aplicación con angular como front y laravel como back? Seria de gran ayuda un curso sobre eso.
Si perfectamente yo tengo un par de aplicaciones con Angular (front) y API (laravel)
I couldn't watch the whole video, but when you create this, does this also include the user interface where you can create an account and launch some campaigns with analytics the end user can utilize?
Eres un súper master saludos
Hola Jesús gracias a ti por formar parte.de.esta comunidad
@@LeiferMendez y gracias a ti por aportar tus sabios conocimientos tuve la dicha de estar en llamada contigo en Telegram sobre el tema del login! Saludos desde los inicios aquí seguimos 🤘🏻
Hola master, primero que todo muchas gracias por tus videos, sos el mejor. Por otra parte estoy teniendo un problema y es que cuando llega la notificación no me llega el titulo ni nada, si llega pero solo me dice "el sitio se acrualizó en segundo plano"... del resto todo me llega sin problemas. Sabes a qué se debe eso??
Gracias Leifer, se que la consulta es compleja, si lo abro en el Navegador del mobile, no me llegan, las notificaciones, por qué
Hola!! Leifer me podrías orientar en una duda que tengo, lo que pasa es que tenga una aplicación web este tiene un inicio de sesión para cada rol los lleva a diferente vista, la hice a PWA, no tengo problema con eso, el inconveniente es cuando inicio sesión la primera vez con una cuenta todo correcto pero luego quiero iniciar sesión con otra cuenta, está ya no me redirige y se por que al recargar la página me lleva a la página del primer usuario logueado , se que es por las cokies pero mi pregunta es como puedo hacer para que funcione correctamente
Amazing
Saludos
Gracias por la info 😃
Hola ! como vas con tu proyecto ?
@@LeiferMendez voy bien gracias a tus súper tips, me atoro con algunas cosas😅 pero voy bien 😃
@@yesilili Excelente ;)
Hola leifer, estuve viendo tus videos y me parecen muy buena tu forma de explicar, vi tambien que tenes publicado cursos en Udemy, te comento que he hecho un curso de PWA pero no explican como desplegar dicha PWA en un servidor(solo explican y muestran la recepcion de una notificacion push localmente), necesito poder recibir una notificacion con mi PWA desplegada en AWS, en cuales de tus cursos explicas mi consulta?, muchas gracias
Hola Fabricio, muchas gracias por tu comentario, te dejo un video que tengo sobre despliegues
ruclips.net/video/nP7VZgTokn0/видео.html
También te invito a unirte al canal de telegram donde suelo responder más rápido y resolver dudas.
web.whatsapp.com/
Un saludo!
a mí me sale ese error al tratar de correr el servicio
No suitable injection token for parameter 'apiRest' of class 'AppComponent'.
Cómo lo arreglo?
Hola! para enviar notificaciones push la aplicacion debe ser una PWA obligado?
Muchas gracias por el video, lo único que tengo que decir : "solo sé que nada sé"
Paso a paso Jesús que seguro lo lográs. Un saludo!!
Exelente tutorial, pero como hago para que consumir el servicio send en Angular para que las notificaciones lleguen en segundo plano
Justo lo que buscaba hacer y sin tanto rollo con un tercero, lo intentaré usar, duda para resolver, funcionará si se usa electron, igual cuando o comience a usar veré cómo hacer para que se auto actualice la aplicación sola, mil gracias.
Hola Juan nuevamente miembro activo de la comunidad. Claro que funciona recuerda que esto hace uso de funciones del navegador
Existe alguna forma de establecer un tono para la notificacon?
Y la notificación push para dispositivos moviles y distintos sistemas operativos?
Leifer primero quiero agradecerte por los videos.. son muy buenos.. y segundo quisiera saber... si la aplicación en angular la transformo en un app para Android con capacitor.. las notificaciones funcionan igualmente o hay que implementarlo de otra forma.
desde ya muchas gracias
Las notificaciones llegaran siempre y cuando estés usando el browser
te funcionó ? con capacitor
Hola! un subscriptor mas por aqui!! estoy haciendo una web con angular y firebase como backend y quería aprender a mandar notificaciones push... tengo varias preguntas jejeje 1- la respuesta que estoy recibiendo por parte de swPush.requestSubscription no es la misma que a tuya... no encuentro las keys... imagino que habrán actualizado algo??? 2- cuando tenga el token o las keys de ese usuario puedo guardarlo directamente en firebase?? luego como le mando una notificación a ese usuario unicamente desde firebase?? puedo hacer algún método o algo en mi angular para enviar la notificación?? muchas gracias y no dejes de subir contenido!
Gracias por ver ! Las Keys las generas con el comando de web-push . Si tienes más dudas buscame en FB para explicarte
suscrito!!! soy novato en Angular
Bienvenido que proyectos tienes en mente?
@@LeiferMendez Actualmente estoy en una planta automotriz y diariamente se registran discrepancias (faltantes, problemas, etc) para diversas areas de la linea de operación, entonces con esto se me ocurrio intentar hacer un filtro por areas y crear notificaciones para el area en particular, esto para que vean que tienen notificaciones de cosas por resolver para sus areas.
@@davidzambrano3987 oye suena muy interesante esa idea además que ya tienes un campo donde aplicarla éxitos
@@LeiferMendezMuchas gracias!!
Solo como duda, veo que el enfoque principal es para PWA, esta tecnica que nos compartes es igual de funcional igual para las SPA con C#?
Excelente video!, ahora una pregunta. Tengo mi proyecto casi terminado usando angular y como back una api rest en .net. para poder hacer notificaciones Push tendria que crear una api intermedia en node con express? o es valido para .net?
Hola Facundo no tengo conocimiento si existe alguna librería que haga el mismo trabajo de webpush, de no ser el casa tendría saue usar un intermediario con express
Hola Leifer, conoces de una librería equivalente a web-push para php?, he visto varias pero ninguna con el funcionamiento tan sencillo y efectivo que tiene esta para node, muchas gracias.
Hola Antonio no conozco :( pero si consigo algo te lo dejo en el comentario
@@LeiferMendez Yo también la necesito para laravel, y no la he encontrado 😕
Excelente videos Leifer... Tengo una consulta tengo un fron en angular y un back en java spring ... corriendo en tomcat pero veo que creas un servicio para enviar los push corriendo el port 9000.. puedo crear el servicio en envió de push desde mi back y que funcione igual.. o se requiero de otro método o necesariamente debo crear ese servicio y habilitar un nuevo puerto para ello... gracias
Hola Jhoel bienvenido a la comunidad puedes usar desde tu backend yo en el vídeo fue por practicida 🙂
@@LeiferMendez Excelente... Si ya logre comprender bien la mecánica de loa envíos fallaba en algo muy simple .. Mil Gracias por tu gran aporte
@@LeiferMendez Tengo una inquietud en el minuto 22:56 con la libreria webpush y su metodo sendNotification como realizo la vinculacion con Java Spring Boot??
@@jhoelgelvez2601 mm ese es un detalle nose si exista alguna versión para Java
Excelente video, una pregunta las keys generadas. por webpush cuando hace requestSubscription y genera las keys son únicas por usuario? si deseo que la notificación sea enviada a múltiples usuarios pero con diferente keys tendría que hacer un loop para llamar el metodo enviarNotificacion() ? cuál seria la mejor manera para un volumen alto de webpush gracias y saludos!
Hola Andres un buena manera seria manejar queue "colas" de proceso te comparto un blog muy interesante acerca de eso dev.to/sarbikbetal/simple-node-js-task-queue-with-bee-queue-and-redis-105b
@@LeiferMendez muchas gracias, voy a estudiarlo, las keys si son diferentes si borras el cache, me pasa algo curioso en google no recibo la notificación pero en mozilla si, ambos tienen los permisos necesarios y las keys de cada uno son diferentes y probé con ambas, pero solo mozilla notifica, sabes por que ?
Una consulta para hacer ese de sendNotification solo se puede hacer desde nodejs no se podría hacer directamente desde el Angular desde un Backend en java?
Hola Oscar desconozco si en java existe alguna libreria que realice la misma funcionalidad.
Genial la practica solo que cuando intento mandar el sendNotification() me lanza este error Error: You must pass in a subscription with at least an endpoint cabe mencionar que esta en Heroku este pequeño servidor, no se si te ha pasado me pide un punto final e leido como no tienes idea pero no logro dar con la solucion el /save funciona perfectamente solo es en el /send
Escribeme por el Telegram o FB para ayudarte
muy buen video, estoy buscando lograrlo con asp clásico, una especie de llamada clásica usando xml request para llamar al cliente... es posible?
Hola Óscar no tengo conocimiento si existe una librería para Asp pero de lo contty puedes montar un servicio aislado con node solo para esta función
Una pregunta estas push notifications, puede tener un callback o action al momento de darle click? como llevarlo a una path o url de angular ?
Hola Andrés existen maneras una es modificando el compartimiento del service worker voy s buscar el link de un blog y lo comparto
@@LeiferMendez perfecto muchas gracias, quedo atento
Leifer, saludos cordiales. Me puedes explicar por favor porque solo funciona con build y no en modo desarrollador (ng serve) gracias.
Hola! claro que si cuando corres el comando --prod este establece cierta configuración que por defecto no esta habilitada ejemplo si revisas el app.module.ts observaras que existe un parámetro enviroment.prod que este se encuentra por defecto en false pero cuando se corre --prod cambia a true. Puedes obtener mas información aqui angular.io/cli/build
@@LeiferMendez excelente, muchas gracias por responder. Feliz día.
Amigo que buen video!! una consulta como podria hacer para enviar notificaciones push a un usuario en especifico y no a todos? llevo semanas dar con esa forma :/
Hola Álvaro yo lo hago de la siguiente manera antes de pedir los permisos de notificación me aseguro de que tenga la sesión iniciado de esa manera luego que inicia sesión pido los permisos obtengo el token del navegador y guardo en base de datos token del navegador relacionado con el usuario
@@LeiferMendez entiendo, como podría contactarte si deseo un ayuda más personalizada contigo amigo? S.O.S.
@@alvaromena100 en mi descripción está mi FB o si quieres puedes formar parte de los miembros del grupo donde tenemos un canal de comunicación directa
@@LeiferMendez Perfecto justo me uni como miembro de tu comunidad aqui y te dejé un mensaje a tu fb personal espero que lo puedas leer, saludos :D
@@alvaromena100 perfecto los reviso en un rato que no estoy en pc 🎉🎉🎉 Bienvenido
Gracias excelente contenido iniciando en angular tengo un proyecto en mente podría escribirte para que me guíes gracias saludos de Colombia
Si claro que sí en la descripción está mi FB
@@LeiferMendez GRACIAS
tambien funciona para enviar notificaciones a IOS Safari?
ios eres una m......
bueno este codigo lo saque con firebase angular pero el detalle es que aun no puedo mandarlas en safari ios, es la solucion que busco
Desafortunadamente iOS aun no tiene soporte para PWA notifications
Ahora con React :)
Próximamente
@@LeiferMendez Uff, muchísimas gracias Leifer.
ALGUIEN SABE SI TAMBIEN FUNCIONAN LAS NOTIFICACIONES PARA SAFARI IOS?
@@LeiferMendez
ALGUIEN SABE SI TAMBIEN FUNCIONAN LAS NOTIFICACIONES PARA SAFARI IOS?
Bro puedes crear una app con angular universal que consuma peticiones https
Saludos, si la próxima semana empiezo a sacar el primero video