INSTALA web como app nativa 😎 ¿Cómo instalar una PWA de Angular? Curso Angular PWA
HTML-код
- Опубликовано: 30 июл 2024
- 🔥🔥 Angular desde cero🔥 🔥
En el video de hoy aprenderás sobre las características de una progresive web app .
INSTALA web como app nativa 😎 ¿Cómo instalar una PWA de Angular? Curso Angular 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
👋 𝐂𝐔𝐑𝐒𝐎𝐒 𝐆𝐑𝐀𝐓𝐈𝐒
├ 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
Generar ICONS: manifest-gen.netlify.app/
0:00 Intro
1:25 Resumen PWA
2:37 Angular PWA
3:46 Instalando PWA
6:50 Manifest
10:55 Generando iconos
11:59 Compilando
14:40 Instalando en PC
18:50 Instalando en Android
---
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
todo un crack mister, gracias, tenia un par de dudas pero me ayudaste en mucho, aparte bien explicado... sigue asi.
Excelente amigo, agradecido de que compartas tus conocimientos.
Jamás dejes de subir videos porfavor... Angular angular angular
Angular Lover ! Di presente✋✋
Excelente. Muy informativo e interesante este tema. Muchas gracias.
Estoy esperando con ansias todos estos videos porque está muy interesante todo
Excelente que te gusten estos video y estar muy pendiente que se viene el de modo offlije
Que buenísimo contenido. Saludos desde Nicaragua hermano.
Muchas gracias por el tutorial, me ha ayudado bastante saludos desde El Salvador 🇸🇻
Hola Julio y bienvenido a esta comunidad
Muchas gracias Bro.... por compartir el conocimiento...
Gracias por ver recuerda que también tengo curso de Angular node y más
Muchas gracias, estuve pegado con ese problema, ahora ya puedo implementar la instalación pwa
Yeahh
Calidad!!!! Muchas gracias por compartir tus conocimientos :) Voy a hacer la prueba con un sistema a ver que tal me va
Genial me avisas cómo te fue
@@LeiferMendez Si va!! Una pregunta, este tema de PWA tiene una lista ordenada? para verla completa.. o llega hasta aquí? busque en tu canal pero no me sale
@@LeiferMendez Oh ya lo vi! es que estaba buscando directo en tu canal y no me sale pero coloque PWA Leifer Mendez en el buscador de RUclips y si me sale que son 6, gracias!!
Excelentes videos! Agradezco que compartas tus conocimientos. Seria posible que me ayudaras, tengo una progressive web funcionando pero nada mas envía la notificación de instalación a dispositivos androide. Me gustaría crear un código qr para que la puedan instalar, pero no tengo idea de como hacerlo, me supongo que es con el Service Worker. Te agradezco mucho
a fecha de hoy aun funciona, si tienes problemas con ng build --prod puedes usar ng build --configuration production
grandes los videos de tu canal, me han servido full para hacer cosas de angular
Hola Leifer, buenas tardes, es posible ejecutar peticiones en segundo plano?
excelente video
Gracias Pavel y bienvenido a esta comunidad
Hola leifer, primero agradecer por compartir tu conocimiento. Queria saber en que hosting tienes servidos estos proyectos y si en algun video explicar como subir a produccion nuestros proyecto con solo compilar. Gracias de antemano. Seguimos viendo la playlist
Hola Ederson normalmente uso aws pero no por nada especial esto te debería funciona en cualquier otro
Tengo una consulta, la barra de rutas es posible quitarla, o esconderla para que la app se vea más navita? estuve viendo que tanto standalone como fullscreen en las configuraciones de display hacen eso, pero en mi caso no funciona, siempre aparece, entonces tenia la duda, te agradeceria mucho si me quitaras esa duda :3 y como siempre gracias por los videos :3
Hola Leifer,
Una duda, yo he levantado un proyecto en http-server y no se si es por esto que en el movil no me solicita la instalación de la aplicación. Es el https lo que me está fallando?
hola muy buen vídeo, consulta ¿cómo se llama la aplicación que utilizaste para probar la pwa en android??
buen video, como puedo probar la app desde mi pc local montado en xampp y probarla desde mi movil.
Muchas gracias por compartir, como siempre un tema de gran utilidad, una consulta: durante el proceso de desarrollo como controlas el tema del certificado ssl para hacer pruebas? gracias y salduos
Hola Javier debes de compilar prod y correrlo en localhost (no es necesario SSL) en localhost
@@LeiferMendez gracias por la respuesta
Buen día Leifer, como siempre gran trabajo, quería hacerte dos preguntas... 1- Como se puede cambiar el fondo donde se alojara el icono que quedara en el escritorio movil y 2- En IOS no sale el mensaje si se quiere agregar al escritorio la app PWA (Se debe hacer algo adicional). Te agradezco la información.
Hola Andrés muchas gracias por formar parte de esta comunidad. El punto 2 es porque iOs no dispara ese mensaje
@@LeiferMendez Gracias por la respuesta, si estaba viendo que toca ir a configuración del navegador y agregarla como pagina en inicio ... algo así... Tengo otra duda en la móvil android esta funcionando perfecto, me muestra la info si quiere agregarla y queda como una app mas de mi móvil, pero en web apesar que tengo la ultima version de Google no me muestra nunca la opción de guardar la pagina y me quede en mi escritorio, ya he intendo de todo pero no consigo resultado, saber por que puede ser?
Leifer, el error que se tiene en la web son los iconos que coloque, regrese el commit a los iconos que coloca por defecto y funciono correctamente
Se puede igual en blogger??
Buenas Leifer, realice tu curso de angular básico hace un mes, mi pregunta es la siguiente ¿para ver la aplicación utilizas android studio? ¿es gratuito?
Hola Adrián si Android Studio es gratis 🙂gracias por apoyar y comentar
Hola, estoy siguiendo el curso, me gustaría saber a partir de que versión de angular funciona esto, o es para todas en general?
Hola Edu a partir de la versión 8! igual buscare bien
Y si no está en Angular? Además, dónde podría ver el nombre del proyecto en caso de no estar en angular?
Hola Leifer si funciona epetacular!! El frontend con Angular y el Backend con Laravel, Graaciaaaasss!!! una pregunta: sabrás por que el emulador se pone lento o deja de funcionar??Sera por las características de compu?? ooo?? no pude probarlo en el emulador, tuve que subirlo directo al servidor para poder probarlo desde mi cel, claro desde el navegador de la compu también se prueba pero quería verlo desde mi cel.
Hola Keli excelente que pudiste hacerlo 👏👏los emuladores normalmente van un poco más lentos y depende del maquina
@@LeiferMendez Si, muy sencillo y rápido. Ah ok ok, gracias pues
Excelente video, una pregunta por que al agregar las librería de pwa me crea todo los archivos de configuración ngsw-config el manisfest etc, pero al momento de compilar y con http-server y lanzar el navegador en el tab de Aplicaciones me dice que no se encuentra ningún service worker, pero. el manisfest lo reconoce, además en la folder dist si lo genera, alguna ayuda? gracias
Encontré la falla el problema era que el environment de producción estaba en false, en vez de true, por eso no lo reconocía, ya que lo compilaba en dev, saludos muy teso.
hola gracias por el video!
a mi me sale este error al instalarlo:
An unhandled exception occurred: Cannot find module '@schematics/angular/utility'
Require stack:
- C:\Users\elren\Desktop
uevop
uevop
ode_modules\@angular\cli\models\schematic-engine-host.js
See "C:\Users\elren\AppData\Local\Temp
g-WoyoCk\angular-errors.log" for further details.
hay que instalarlo desde el PowerShell no desde el Ide
@@lorenzos2826 Probe desde PowerShell y tengo el mismo error
An unhandled exception occurred: Cannot find module '@schematics/angular/utility'
@@tatocarle me pasaba lo mismo con angular 14.. si en el comando que instala PWA le metes que te instale la version 13 funciona bien
A mí me sale este error
this.tree.readText is not a function
Se podrá hacer esto mismo, pero en iOS? Excelente tutorial, me ayudo mucho.
Hola Sebe, iOS aún no permite muy buena integración con las PWA. Un saludo! ✌
@@LeiferMendez Gracias por responder. Saludos!
Excelente video, pero estoy teniendo un error respecto al manifesto, en el buscador se detalal esto "no matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and star the url from the manifest". sabes como puedo resolverlo?
Aclaro que levanto mi proyecto en local con ng serve
Hola Facundo , debes compilar primero el proyecto y luego levantarlo con algún servidor o usando http-server
@@LeiferMendez Excelente, lo hice en github pages y funciono perfecto! Muchas gracias
pero como se crea el intalador?
Una preguta, tengo una sitio web en html. se puede importar mi sitio web a angular y hacer este proceso?
Hola Andrés y bienvenido si se puede 👏
Hola muchas gracias Leifer me podrias iindicar de donde puedo descargar el proyecto del portafolio?
Hola Jorge te la dejo aqui github.com/leifermendez/portfolio-web
@@LeiferMendez muchas gracias por compartir tus conocimientos Leifer.
@@JUANDIEGO851212 gracias a ti por ver
Que versión mínima requiere el PWA de angular porque con 9 no me dejo
Hola Miguel que problema te presento ?
POngo el codigo y no abre nada de eso.
De pana, ninguno de los videos tuyos me ha servido realmente. Creo que ya están muy viejos.
Se puede combinar PWA con SSR?
Diego, que buena pregunta, me va a tocar investigar del tema 🤓
Que emulador usas?
Hola Superman 😎 estoy usando el emulador de Android Studio
@@LeiferMendez siii justo google y ya vi es el avd, gracias
No son los mismos archivos los que compartes en github a los que subiste en el vide
Hola Andrés que parte no encuentrss ?
@@LeiferMendez No viene el index