Curso de Progressive Web Apps con Angular

Clases del Curso de Progressive Web Apps con Angular

Instruido por:
Nicolas Molina
Nicolas Molina
Básico
3 horas de contenido
Ver la ruta de aprendizaje
Platzi Store
Proyecto del curso
Platzi Store

El estudiante desarrollará Platzi Store como Aplicación Web Progresiva (PWA) empleando Angular.

Curso de Progressive Web Apps con Angular

Curso de Progressive Web Apps con Angular

Progreso del curso:0/20contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/20contenidos(0%)

Apropiar el concepto de PWA

Material Thumbnail

Cómo crearás una PWA con Angular

00:36 min

Material Thumbnail

¿Qué son las PWA?

03:27 min

Material Thumbnail

Características de una PWA

05:10 min

Material Thumbnail

PWA vs Híbrido vs Nativo

04:05 min

Material Thumbnail

Los Services Workers

03:46 min

Material Thumbnail

Proyecto del curso: Platzi Store

02:01 min

Entender PWA en Angular

Material Thumbnail

Generando la primer PWA

13:55 min

Material Thumbnail

Caché local y pruebas offline

09:02 min

Material Thumbnail

Pruebas con Lighthouse

07:49 min

Material Thumbnail

Caché de requests

17:58 min

Construir una PWA luciendo como nativa

Material Thumbnail

Poniendo tu app en el Homescreen

07:24 min

Material Thumbnail

Crear botón de instalación automática

17:02 min

Material Thumbnail

Probar funcionalidad del botón de instalación

08:11 min

Material Thumbnail

Enviando actualizaciones

12:44 min

Material Thumbnail

Implementando flujo de notificaciones

13:22 min

Material Thumbnail

Gestionando notificaciones

12:14 min

Material Thumbnail

Implementación y recomendaciones para IOS

09:23 min

Integrar continuamente

Material Thumbnail

Aplicando Lighthouse Bot a tu proceso de integración continua

04:58 min

nuevosmás votadossin responder
Francisco Mario Bautista Hernández
Francisco Mario Bautista Hernández
Estudiante

Tengo una aplicación en angularjs, se puede hacer pwa?

1
Rodrigo Rodriguez
Rodrigo Rodriguez
Estudiante

Simplemente con el mismo codigo no pude hacer que funcione, siempre installEvent tiene el valor null ?

1
Rodrigo Rodriguez
Rodrigo Rodriguez
Estudiante

Sigo sin poder hacer aparecer el icono de instalar la pwa en chrome desktop, tengo actualizado el navegador, probe con

ng add @angular/pwa --project mi-proyecto

pero aun asi no aparece

1
edisson-cruz869
edisson-cruz869
Estudiante

Tengo un problema al ejecutar el comando

ng add@angular/pwa --project angular-store
ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected]
✔ 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/[email protected]12.0.2npm ERR! node_modules/@angular/core
npm ERR!   @angular/[email protected]"~12.0.0"from the root project
npm ERR!   peer @angular/[email protected]"12.0.2"from @angular/[email protected]12.0.2npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/[email protected]"~12.0.0"from the root project
npm ERR!     peer @angular/[email protected]"^12.0.0 || ^13.0.0-0"from @angular/[email protected]12.0.2npm ERR!     node_modules/@angular/material
npm ERR!       @angular/[email protected]"^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/[email protected]"~12.0.0"from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]12.0.5npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/[email protected]"12.0.5"from @angular/[email protected]12.0.5npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/[email protected]"~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.txtfor a full report.

npm ERR! A complete log ofthis 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.
1
Pedro Quiñonez Verdugo
Pedro Quiñonez Verdugo
Estudiante

A mí me arrojó este error:

Site cannot be installed: Page does not work offline. StartinginChrome93, the installability criteria is changing, andthis site will notbe installable. See https://goo.gle/improved-pwa-offline-detection for more information.
0
Marcelo Gorski
Marcelo Gorski
Estudiante

Hola,
Si accedo a una PWA y pierdo la conexión a internet, ¿las imágenes que están en una parte la app a la cual no accedí me las cachea si las pongo en modo lazy?

0
Jose Luis Rosado Cardenas
Jose Luis Rosado Cardenas
Estudiante

No me funciono, use el token y no me llega la notificacion

2
Jose Luis Rosado Cardenas
Jose Luis Rosado Cardenas
Estudiante

¿Puedo usar alguna variable del archivo environment.ts en el archivo ngsw-config.json, para definir las urls??

1
Daniel Acosta
Daniel Acosta
Estudiante

Y que pasaría si la PWA es una app que constantemente hace peticiones ajax, si falla el network, almacenas las peticiones en caché o le indica que no hay conexión?

0
Jose Luis Rosado Cardenas
Jose Luis Rosado Cardenas
Estudiante

¿Qué otras herramientas de auditoria tenemos para optimizar nuestro sitios ??

0