💻 PWA modo offline (cache) con Service Worker en Angular 2021😎

Поделиться
HTML-код
  • Опубликовано: 10 июл 2024
  • 🔥 🔥 Angular desde cero🔥🔥
    En el video de hoy aprenderás sobre PWA y cómo hacer uso en su modo offline
    💻 PWA modo offline (cache) con Service Worker en Angular 2021
    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
    0:00 Intro
    0:45 ¿Como se hace?
    1:40 AssetsGroup
    4:57 DataGroup
    7:44 Codigo!
    11:06 Probando cache
    12:10 Cache CDN (Url)
    15:14 Cache API (GET)
    19:20 Final
    ---
    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

Комментарии • 35

  • @LeiferMendez
    @LeiferMendez  3 года назад +2

    ├ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ 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

  • @AMV-CreatorMotion
    @AMV-CreatorMotion 2 месяца назад +1

    Leifer implecable! Gracias por el contenido! tengo algunas dudas de cuando la PWA esta instalada, hay alguna forma de hacer que tome los cambios sin refrescar el navegador? es decir, actualizaciones del sistema que los tome, por ej, cambios en labels y comportamiento en un component

  • @javieralbarracin3564
    @javieralbarracin3564 3 года назад

    Excelente despliegue de teoría!!! Muchas gracias!!!

    • @LeiferMendez
      @LeiferMendez  3 года назад

      Hola Javier bienvenido a la comunidad. Estos comentarios motivan a seguir creando contenido

  • @andresgomezceron7547
    @andresgomezceron7547 2 года назад +2

    Leifer súper video, estoy entrando en el mundo conceptual de la PWA, en tu experiencia, se comporta igual en iOS?? Lo he tratado de hacer sin frameworks

  • @yovanavc6988
    @yovanavc6988 Год назад

    Gracias por el contenido, mas bien tengo una consulta como haria para guardar las imagenes que vienen de una peticion get o el pwa almacena la informacion de la imagen u.u ?

  • @alexdesupercool2291
    @alexdesupercool2291 Год назад

    Hola Leifer. Quiero agradecerte por compartir tus conocimientos! No recuerdo cuando fue la última vez que sentí tanta satisfacción al ver un video!!
    Actualmente utilizo WordPress para mis proyectos, te pido que no te rías o menosprecies como hacen algunos otros programadores, gracias a WordPress he aprendido mucho sobre PHP, SQL y JS, además de HTML y CSS. Si bien utilizo algunos maquetadores como Oxygen, Elementor o Brizy de acuerdo al proyecto, aplico mucho código propio lo que resulta en algo que nada parece a temas preestablecidos o comunes. He realizado 3 PWA con éxito y aplicando todo lo anterior (WordPress, maquetadores, etc.).
    Lo que quiero consultarte es si se puede aplicar el modo offline que explicas a un proyecto PWA hecho con WordPress?
    Desde ya. Muchas gracias!
    Saludos!

  • @cubaseproducer
    @cubaseproducer Год назад

    Hola Leifer. Genial el contenido de tu canal! Qué pasaría si tuviera que trackear en mi aplicación datos de geolocalización de manera offline? La aplicación sería capaz de ir trackeando la ruta desde un punto A a un punto B y guardar en la base de datos local todos los puntos por los que he ido pasando? Tengo un requerimiento de una aplicación offline de seleccionar a través de un botón "START ROUTE" --> La app cogeria todos los datos de localización --> "END ROUTE" Dejaría de trackear. Cuando la aplicación estuviera online se mandaría a una base de datos de Dataverse en Power Platform.
    Muchas gracias!

  • @LorenzoRojo12
    @LorenzoRojo12 Год назад

    Muy buena explicación . Tengo una pregunta si yo quiero llenar un formulario con varios campos de texto y que requiere carga de N imágenes y que todo esto sea offline y cuando la aplicación detecte que tenga conexión a internet, lo pueda enviar a un API. Esto es posible hacerlo con PWA en angular?

  • @omarvargas3630
    @omarvargas3630 Год назад

    Amigo una pregunta, de que manera podría hacer esto mismo pero en react?

  • @programador390
    @programador390 2 года назад

    Estimado por favor espero me puedas apoyar , porque la cache aumenta en cada version , como puedo solucionar ello por favor . El service worker funciona genial , pero cada vez que actualizo un componente y genero el build y despliego. La cache no se actualiza por favor ayudame.

  • @kurdotex
    @kurdotex 13 дней назад

    Hola. cuál es el repositorio, no logro encontrarlo en tu cuenta github

  • @contactosx10mini
    @contactosx10mini 3 года назад

    Hola, de antemano, muchas gracias por tu vídeo, tengo una pregunta puntual, ¿Hay alguna documentación que me puedas recomendar para utilizar Service Worker con servicios POST? Lo que pasa es que necesito hacer persistente el envío de un formulario de registro

    • @LeiferMendez
      @LeiferMendez  3 года назад +1

      Hola está semana saco ese vídeo 😏 estar pendiente

    • @contactosx10mini
      @contactosx10mini 3 года назад

      @@LeiferMendez ah muchísimas gracias, que tengas una excelente tarde.

  • @YessicaRios
    @YessicaRios 3 года назад +1

    Hola! Alguna consideración que deba tomar en cuenta para el servidor donde se despliega?

    • @YessicaRios
      @YessicaRios 3 года назад

      @@LeiferMendez Ah que raro tengo en blob storage de Azure y no me funciona en modo offline me da error 504

    • @YessicaRios
      @YessicaRios 2 года назад

      @Nicolás Caruso Hola! No llegue a la solución porque se cambio de servidor

    • @yaeluriel
      @yaeluriel Год назад

      ​@@YessicaRios a día de hoy recomiendas aprender las pwa o que tan utilizadas son?, gracias y buen día

  • @brayanmauricio6920
    @brayanmauricio6920 3 года назад +1

    Hola bro, mira tengo que haces una aplicacion que trabaje offline y debe tener mas 240mil resgistros sin conexión tienes alguna idea de que puede implementar?

    • @LeiferMendez
      @LeiferMendez  3 года назад

      Hola y gracias por comentar. Entiendo que esta data luego debe sincronizarse? por otro lado estarías hablando de PWA o puede ser un app que tenga mas control de almacenamiento del dispositivo (Ionic, ReactNative, Nativo) ? lo digo porque de ser así se podría usar almacenamiento del dispositivo. Si tienes escríbeme sin compromiso ;)

    • @brayanmauricio6920
      @brayanmauricio6920 3 года назад

      @@LeiferMendez te envie mensaje en facebook

  • @alfonsecar
    @alfonsecar 3 года назад

    compi, no se como no tienes mas me gusta, es un insulto que gente que ni zorra tiene mas me gusta, y los que saben no tienen

    • @LeiferMendez
      @LeiferMendez  3 года назад

      Hola Antonio gracias ! Si estamos creciendo comparte para ayudar

  • @ricardobh97
    @ricardobh97 3 года назад

    Hay como identificar y mostrar un mensaje si la pagina esta en modo offline

    • @LeiferMendez
      @LeiferMendez  3 года назад +1

      Si bueno incluso existe varios paquetes como este www.npmjs.com/package/ngx-connection-service que te verifica el status

    • @ricardobh97
      @ricardobh97 3 года назад

      @@LeiferMendez gracias por tu respuesta y por tus videos.
      he trabajado antes y creo q he tenido falencias en los Datagroups con imagenes principalmente porque utilizo fireStorage y no se a que url colocar. Gracias por tu ayuda.