Caché local y pruebas offline

Clase 8 de 20 • Curso de Progressive Web Apps con Angular 8

Ricardo Betancourt

student•

a mi no me sale el boton de instalar :( ¿Como se corrige ese error?

Anthony Hurtado

student•

Si no te sale el botón de instalar en la barra de dirección, puedes ir a los tres puntos de Chrome y en las opciones seguramente te aparecerá la opción para instalar la aplicación.

Rodrigo Rodriguez

student•

Tampoco me aparece dicho boton, hay que mirar la documentacion de angular porque ya paso bastante tiempo desde el dictado del curso.

Juan Luna

student•

Buenos días a todos, ¿Os funciona la api ? https://platzi-store.herokuapp.com/products A mi no, no sé porqué. 2023/02

Pregunto en Preguntas, pero nadie me responde, no sé si es que el profe (Nicolás) no sigue en platzi o es que está demasiado ocupado, no lo entiendo, yo pago para hacer estos cursos y se promete comunicación con el profesor, no instantánea, pero no sé ha ha habido cursos que hice hace tres meses y pregunté algo y no he recibido una respuesta y/o una notificación o correo indicando que se ha respondido a tu pregunta, .... de hecho he vuelto a entrar a ese curso en concreto, para ver mi pregunta y ahí está sin responder. ...

Es una pena porque platzi me gusta y los profesores son buenos y aprendo demasiado, pero a veces un vídeo no te aclara todas las dudas, o los errores que pueden haber por cuestiones como las versiones de librerías y frameworks, que hacen que algo no funcione.

moises benites castro

student•

Para los que no les aparezca el botón de instalar, deberán habilitar la opción que viene bloqueada por defecto.

Escriben lo siguiente en la barra de direcciones chrome://flags/ y luego buscan pwa y habilitan la opción Desktop PWAs app icon shortcuts menu

Michael Camargo

student•

si yo no utilizo firebase de hosting como puedo solucionar lo de rewrites ?

Rodrigo Rodriguez

student•

Tengo la misma duda, pudiste solucionar?? se podria configurar el .htaccess en su lugar ?

Roger Perlaza

student•

Hola Michael, debes crear un archivo llamado .htaccess en tu carpeta dist (y subirlo a tu hosting), el archivo debe contener lo siguiente:

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

con esto tendrás configuradas las redirecciones en otro hosting que no sea Firebase (Hostinger Hostgator).

Juan Luna

student•

Primero de todo este curso tiene ya su tiempo y hay cosas que no funcionan en las nuevas versiones de angular y si utilizamos las versiones del proyecto hay que usar nvm use v10.0.0 y entonces no funciona el firebase cli, que lo hace a partir de la versión 14 de node.js, todo esto ya lo solucioné, pero me llevó su tiempo y quebraderos de cabeza..

No estaría demás, revisar los cursos de vez en cuando para ver todos esos problemas de versiones, o por lo menos contestar a las preguntas o dudas de los usuarios gracias Nicolás.

problems No funciona la petición hacia esa url, ni poniéndola en el navegador para ver que devuelve,

¿Funciona la api, quedó obsoleta o qué pasa o tengo yo mismo un problema?

Brayan Alexis Valdes Gallego

student•

¿Cuándo ejecuto ng add @angular/pwa me genera unos iconos por defecto con el icono de Angular, es posible lanzar un comando para generar esos iconos de mi propio icono en sus diferentes tamaños?

Juan Carlos Barcinilla Alarcon

student•

esa parte la hace ionic resource icon, pero pwa no tiene esa integración de generar las imágenes.

Nicolas Molina

teacher•

Hola! no hasta ahora no hay algo que te genere a partir de una imagen las dimensiones necesarias, entonces debes tu generarlas.

También la comunidad ha hecho scripts para esto que pueden ayudar: https://github.com/ezzabuzaid/pwa-icon-generator

Derian Abel Marchan Siancas

student•

Hola a todos. Tengo un problema, mi proyecto es con SSR y deploy en Firebase, además de PWA obviamente, pero Offline cuango ingreso no me carga el la página, como si no funciona el Service Worker. Qué está mal o Que se debe hacer en este caso?

Oswaldo Cortés Cascante

student•

supiste como resolverlo?

Yonathan Gutierrez

student•

Para otros sitios de alojamiento, cual seria la configuracion? de hecho es un bu muy común…

Alejandro Valenzuela

student•

Por ejemplo yo use heroku, y para deployar necesite un par de pasos mas, te dejo este link donde explica como hacer. Saludos

Carlos Javier Bazan Huaman

student•

se tiene que definir bien el contenido de ciertas paginas para que no se vea mal cuando no hay conexión.

Ricardo Moisen

student•

si en mi configuración de angular.json utilizo un basehref, como seria esa configuración en firebase ?

Michael Camargo

student•

si quiero hacer un deployar en amazon s3 ?

<IfModule mod_rewrite.c>
    RewriteEngine on

    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]
</IfModule>

Caché local y pruebas offline

Apropiar el concepto de PWA

Cómo crearás una PWA con Angular

¿Qué son las PWA?

Características de una PWA

PWA vs Híbrido vs Nativo

Los Services Workers

Proyecto del curso: Platzi Store

Entender PWA en Angular

Generando la primer PWA

Caché local y pruebas offline

Pruebas con Lighthouse

Caché de assets

Caché de requests

Construir una PWA luciendo como nativa

Poniendo tu app en el Homescreen

Crear botón de instalación automática

Probar funcionalidad del botón de instalación

Enviando actualizaciones

Implementando flujo de notificaciones

Gestionando notificaciones

Implementación y recomendaciones para IOS

Integrar continuamente

Aplicando Lighthouse Bot a tu proceso de integración continua

Conclusiones