Generando la primer PWA

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

Romel Javier Gomez Herrera

student•

Corriendo unos comandos es posible tener en localhost un server seguro falso, para probar con https

Abre un terminal y ejecuta: . ./safelocalhost.sh
Abre el navegador Chrome, e introduce en la barra de dirección URL: chrome://settings/certificates
Selecciona la tab: Authorities
Selecciona el archivo generado: /safelocalhost/temp/root_crt.crt
Asegurate de marcar que todos los checkboxes de Trust settings
Obtén la ruta completa a los archivos server.crt y server.key generados.
Ejecuta:

ng serve --ssl true --ssl-cert $HOME"/Desktop/projects/safelocalhost/temp/server.crt" --ssl-key $HOME"/Desktop/projects/safelocalhost/temp/server.key"

luego visita https://localhost/

Emilio Nicolás Mendoza Patti

student•

Bueno actualmente estoy usando nvm para tener la version de node que se utilice en estos proyectos mas viejos, y que no me choque con la de mi trabajo. Pero para poder hacer funcionar todo sin cambiar de version de CLI hice lo siguiente

1.Borrar node module 2.Borrar package-lock.json 3.Borrar tsconfig.base.json 4.Instalar una version de node 14.16 en adelante 5. Instalar globalmente angular CLI 11.0.7 6. npm i 7. Ejecutar ng add @angular-eslint/schematics 8. Ejecutar ng g @angular-eslint/schematics:add-eslint-to-project platzi-store 9. Por ultimo ejecutar ng add @angular/pwa@12.2.2

Emilio Nicolás Mendoza Patti

student•

al final por un par de problemas que se me generaron tuve que subir un poco la version del proyecto @angular/cli: ^10.2.4

Cesar Elías Armendariz Ruano

student•

Si cierran la cuenta en firebase y luego con el comando firebase login sale este error "Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.", Actualicen firebase con

 npm install -g firebase-tools

y luego para ingresar a firebase usan el código

firebase login --interactive

Jose Ivan Zapata Ramirez

student•

usan el "comando"

Juan Carlos Barcinilla Alarcon

student•

comando para ejecutar pwa ng add @angular/pwa

Ing Emmanuel Ramirez

student•

al hacer el firebase init me sale el siguiente error:

=== Project Setup

First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.

i .firebaserc already has a default project, using angular-pwa-platzi.

Error: Failed to get Firebase project angular-pwa-platzi. Please make sure the project exists and your account has permission to access it.

Nicolas Molina

teacher•

Hola! si parece que al descargar el repo esta con la conf del curso puedes borrar el archivo firebase.json y volver a dar firebase init

Carlos Frostte

student•

Eliminar el firebase.json no me funciono, tuve que eliminar el .firebaserc y volver a hacer firebase init

Juan Ventrone

student•

cuando ejecuto:

ng build --prod

imprime: The build command requires to be run in an Angular project, but a project definition could not be found.

Nicolas Molina

teacher•

Hola! parece que esto es un error con tu dependencias o con archivo angular.json, revisa estos dos y vuelve a instalar todas las dependencias.

Alexander Moreno

student•

prueba escribiendo pwd en linux o CHDIR en windows y valida que sea la ubicación de tu proyecto, eso normalmente pasa cuando el directorio en el que ejecutas NO es un proyecto angular.

Juan Carlos Barcinilla Alarcon

student•

firebase init: inicia el servicio

Ricardo Exequiel De Angelis

student•

Pregunta, a los assets podemos no usarlos? y tomar todas las imagenes de firebase?o un cdn?

Yonathan Gutierrez

student•

se puede hacer lo que se desee realmente, si el CDN tiene un buen nivel de respuesta puede ser una buena apuesta, no obstante si no se tiene seguridad en esta comunicación puede representar también un problema...

Kevin Daniel

student•

Hola estoy teniendo problema cuando ejecuto el comando ng build me sale un sin numero de errores: ![](

Y la lista de errores continua, y esto solo me da cuando ejecuto este comando, cuando ejecuto ng serve no me da ningun tipo de error y la aplicacion corre bien.

Agradeceria su ayuda.

Ing Emmanuel Ramirez

student•

al hacer el firebase init me sale el siguiente error:

=== Configuración del proyecto

Primero, asociemos este directorio de proyecto con un proyecto de Firebase. Puede crear varios alias de proyecto ejecutando firebase use --add, pero por ahora solo configuraremos un proyecto predeterminado.

i .firebaserc ya tiene un proyecto predeterminado, usando angular-pwa-platzi.

Error: Error al obtener el proyecto Firebase angular-pwa-platzi. Asegúrese de que el proyecto existe y que su cuenta tiene permiso para acceder a él.

Nicolas Molina

teacher•

Hola! si parece que al descargar el repo esta con la conf del curso puedes borrar el archivo firebase.json y volver a dar firebase init

Edisson Cruz

student•

Tengo un problema al ejecutar el comando

ng add @angular/pwa --project angular-store

ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@latest.
✔ Package information loaded.

The package @angular/pwa will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
Option "configuration" is deprecated: No longer has an effect.
UPDATE angular.json (5074 bytes)
UPDATE src/app/app.module.ts (1481 bytes)
UPDATE src/index.html (1256 bytes)
⠹ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular/core@12.0.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~12.0.0" from the root project
npm ERR!   peer @angular/core@"12.0.2" from @angular/animations@12.0.2
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"~12.0.0" from the root project
npm ERR!     peer @angular/animations@"^12.0.0 || ^13.0.0-0" from @angular/material@12.0.2
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^12.0.2" from the root project
npm ERR!     1 more (@angular/platform-browser)
npm ERR!   8 more (@angular/cdk, @angular/common, @angular/fire, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"~12.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.0.5
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.0.5" from @angular/service-worker@12.0.5
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"~12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\edicr\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\edicr\AppData\Local\npm-cache\_logs\2021-06-28T16_04_27_851Z-debug.log
✖ Package install failed, see above.

Fabiel Sánchez

student•

Adquirí un template en HTML de una web informativa en PWA, pregunta ¿Aún así debe correr en firebase? o puedo solo trabajar los cambios en mi editor ??

Mariela de Jesus Rivas Hernandez

student•

No me aparecer la opción para poder descargar la pwa, alguien sabe si es necesario configurar algo ?

jose chaparro

student•

Hola. ya baje el proyecto y voy a ejecutar lo la orden para ng add @angular/pwa mi pregunta

dobnde la ejecuto ? entro a consola, abro algun programa o que hago
dice que el proyecto esta corriendo, donde ? por donde reviso ?
las lineas de comando a que corresponden, a que parte del proyecto y a cual archivo para modificar ?

Mikele Guedes

student•

Hola

Tienes que ejecutar ng add @angular/pwa dentro de la carpeta de tu proyecto
Al estar corriendo puedes verlo abriendo el navegador en https://angular-pwa-platzi.firebaseapp.com

Mariela de Jesus Rivas Hernandez

student•

Estoy teniendo este problema al ejecutar ng add @angular/pwa

An unhandled exception occurred: Cannot find module '@schematics/angular/utility'

Hendrik Lopez Dueñas

student•

Me ocurre lo mismo; aún no doy con una solución

Mariela de Jesus Rivas Hernandez

student•

Ya logré solucionarlo, actualicé el proyecto a la versión 14 de angular y ya me funcionó bien

Mariela de Jesus Rivas Hernandez

student•

Por si actualizan el proyecto a una versión de angular posterior o igual a la 12, el comando para generar la compilación para producción es ng build --configuration production

Aldo David Garcia Garduño

student•

venia trabajando este proyecto desde el curso basico de angular , al hacer el deploy a firebase hosting no me cargaban las peticiones de la resapi de heroku del profesor , esto se debia a que las PWA tienen que ser HTTPS en TODO , hasta en las peticiones , revise mi archivo enviroment.prod.ts y el enlace a la api era: url_api:'http://platzi-store.herokuapp.com', lo tuve que cambiar a HTTPS url_api:'https://platzi-store.herokuapp.com', y asi ya funciono la app hosteada en firebase y haciendo peticiones a una api HTTPS tambien

Formacion1 Formacion1

student•

Este es el comando para añadir las referencias de PWA. ng add @angular/pwa

Luis Abdel Rangel Castro

student•

ng add @angular/pwa

Ing Emmanuel Ramirez

student•

como lo puedo ejecutar en ubuntu 18.04?

Nicolas Molina

teacher•

Hola!

Para levantar el proyecto solo es necesario correr ng serve para esos debes antes instalar las dependencias con npm install

Santiago Casallas Bohorquez

student•

cuando estas en Linux y estas trabajando con ng serve, es probable que necesites ejecutarlo como sudo para que pueda mostrar los cambios automáticamente en el servidor y se recarge automaticamente.

Vladyslav Kuchmenko

student•

a la gente que le falle el firebase init borrad todo lo que se de firebase del proyecto

ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@latest.
✔ Package information loaded.

The package @angular/pwa will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
Option "configuration" is deprecated: No longer has an effect.
UPDATE angular.json (5074 bytes)
UPDATE src/app/app.module.ts (1481 bytes)
UPDATE src/index.html (1256 bytes)
⠹ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular/core@12.0.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~12.0.0" from the root project
npm ERR!   peer @angular/core@"12.0.2" from @angular/animations@12.0.2
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"~12.0.0" from the root project
npm ERR!     peer @angular/animations@"^12.0.0 || ^13.0.0-0" from @angular/material@12.0.2
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^12.0.2" from the root project
npm ERR!     1 more (@angular/platform-browser)
npm ERR!   8 more (@angular/cdk, @angular/common, @angular/fire, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"~12.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.0.5
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.0.5" from @angular/service-worker@12.0.5
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"~12.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\edicr\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\edicr\AppData\Local\npm-cache\_logs\2021-06-28T16_04_27_851Z-debug.log
✖ Package install failed, see above.

Generando la primer PWA

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