Cursos Empresas Blog Live Conf Precios

Generando nuestro primer PWA

Clase 6 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Resumen

Vamos a generar nuestra primer PWA. Vamos a la consola de comandos e ingresamos el comando

ng new pwa --service-worker

No te asustes por la cantidad de archivos y carpetas, vamos a ver para que sirven y a usar aquellas que sean necesarias para la construcción de las aplicaciones.

Juan Antonio Baracat

student•

Aparentemente al momento de grabar este curso no estaba la versión 6.0 estable de Angular y es por eso que el comando ng new pwa --service-worker funciona correctamente y genera el archivo ngsw-config.json pero a partir de la versión 6.0.0 del Angular CLI la bandera –service-worker dejó de funcionar.
Para verificar que versión del Angular CLI tenemos, ejecutamos:

ng version

Si tenemos la versión 6.0.0 o superior, debemos crear el proyecto con el comando:

ng new nombre-del-proyecto

y luego crear el Service Worker con el comando:

ng add @angular/pwa --project nombre-del-proyecto

Alex Fabian Moreno Acero

student•

de donde sacaste este comando ng add @angular/pwa, lo estoy buscando en la documentación pero no lo encuentro.

Julio J Yépez

student•

Gracias @juato,
Me funcionó perfectamente.

Rafael Andrés Cisneros Corro

student•

En la nueva version de Angular CLI:

ng new pwa
ng add @angular/pwa --project pwa```

Miguel Ángel Ríos Yáñez

student•

Muchas Gracias.

Danny Rivadeneira

student•

Para que funcione el metodo del video antes de generar el proyecto hay que poner

npm install service-worker

Wilson Alejandro Gonzalez Gaitan

student•

Ejecute el siguiente comando antes, debido a que versiones superiores a la 6 no trabajara el comando

<1. npm uninstall -g @angular/cli
2. npm cache clean
3. npm install -g @angular/cli@1.4>

Una vez ya pueden ejecutar

<ng new pwa --service-worker>

Felipe Rivas Molina

student•

Hola, estoy haciendo estoy haciendo eso y me tira un moton de warnings... estoy haciendo algo mal? me conviene usar el comando de esta nueva version? Saludos.

Felipe Rivas Molina

student•

Hola, estoy haciendo estoy haciendo eso y me tira un moton de warnings... estoy haciendo algo mal? me conviene usar el comando de esta nueva version? Saludos.

Mauricio Alejandro Diaz

student•

Cuando le doy a >ng new pwa --service-worker me pregunta inmediatamente: Would you like to add Angular routing? y/N No aparece en el video esta pregunta. Espero que mas adelante expliquen que es, pero no se a que opcion darle, ojala no sea nada relevante. Alguien me podria decir para que sirve?

Andrés Felipe Chaparro Grimaldo

student•

El routing o el enrutamiento en angular, es para que puedas navegar entre vistas, es decir, que al abrir tu página web en el navegador aparecerás por lo general en localhost:4200 si deseas navegar a otra página o vista de tu aplicación iras a localhost:4200/about.

Todas las rutas de tu aplicación las manejas en el archivo app-routing.module.ts que se creó cuando le diste Yes o y a la pregunta.

Julio Izquierdo

student•

Se puede subir una PWA a play Store, ademas se pueden agregar anuncios a una PWA ?

Jorge Luis Paiva Huamán

student•

Hay algun diferencia en fase de compilación, performance, ejecución u otro que impida usar el environment.ts con valores de producción? Por. ej. si compilo usando el PROD los binarios serian más ligeros, o no se presta para depurar en modo desarrollador. etc, etc

Luis Lira

student•

Normalmente cuando un código se hace con la build para producción se pierden muchas o todas las capacidades para poder hacer debugging de la aplicación y también se minifica el código, lo que lo hace casi ilegible, creo que esa sería la principal diferencia.

Ramón Fajardo Fernández

student•

https://www.dropbox.com/s/xrpl21a76ngj1z6/Screenshot 2018-11-18 18.56.26.png?dl=0
He hecho el “ng new pwa --service-worker” pero a mi no me crea todos los archivos por ejemplo el ngsw-config.json entre otros, esto es normal? o ¿qué hice mal?

Ivan kohn

student•

tengo 4 dias tratando de crear el pwa , pero me salen muchos errores me sale un error grave de vulnerabilidad y no se instala me dice que no tengo instalado json alguien que me ayude me estoy volviendo loco =(

Diego Forero

Team Platzi•

Hola, la comunidad esta aquí para ayudarte, por favor comparte el stacktrace completo del error para ver que esta fallando, también si puedes compartir el package.json para revisar si faltan dependencias.

Ivan kohn

student•

hola muchisimas gracias !! added 1025 packages from 1012 contributors and audited 42611 packages in 1275.294s found 1 high severity vulnerability run npm audit fix to fix them, or npm audit for details warning: LF will be replaced by CRLF in .editorconfig. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in .gitignore. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in README.md. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in angular.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in e2e/protractor.conf.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in e2e/src/app.po.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in e2e/tsconfig.e2e.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in package-lock.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in package.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/app/app-routing.module.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/app/app.component.html. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/app/app.component.spec.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/app/app.component.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/app/app.module.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/browserslist. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/environments/environment.prod.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/environments/environment.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/index.html. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/karma.conf.js. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/main.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/polyfills.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/styles.css. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/test.ts. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/tsconfig.app.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/tsconfig.spec.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in src/tslint.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in tsconfig.json. The file will have its original line endings in your working directory warning: LF will be replaced by CRLF in tslint.json. The file will have its original line endings in your working directory Successfully initialized git.

Luis Andrés Arce Cárdenas

student•

Donde verifico la cersion del Angular, desde el msdos o desde node?

Luis Andrés Arce Cárdenas

student•

En windows es así: Abro el Símbolo de Sistema, y en esa consola digito cd\ y doy enter luego escribo la ruta donde tengo instalado el node.js C:\Program Files\nodejs Doy enter y allí escribo en la línea de comandos ng version Se muestra el mensaje ANGULAR CLI Luego de toda la info me muestra unas líneas: Angular cli: 6.2.2 Node 8.12.0 Me imagino que tengo instalado tanto NodeJs como Angular, ya verdad??

Jesús Mur Fontanals

student•

¿Podemos transformar nuestra app de Angular creada sin haberle dicho que sea una PWA en una PWA?

Jesus Sandrea

student•

Si para empezar solo tenemos que agregar el service worker con ng add @angular/pwa y tendriamos una pwa. o al menos es el primer paso.

Jesús Mur Fontanals

student•

Gracias

Carlos Federico Rubio Prias

student•

Comando para iniciar la app

Enrique Rojas Reyes

student•

recuerda que debes instalar cli de ser necesario

$ npm install -g ng-cli

Carlos Uriel de Jesus Sánchez González

student•

Crear el proyecto con ng new <nombre proyecto>
Entrar a la carpeta del proyecto
Agregar la libreria de service worker con el comando ng add @angular/pwa

Juan Rendon

student•

creo el proyecto usando ng new pwa --service-worker pero cuando abro el proyecto en el editor no tiene el archivo ngsw-config.json. quedo mal creado o que debo hacer

Alex Eugenio Gavidia Donayre

student•

Interesante,.

Juan Guillermo Perez Cardozo

student•

gracias :)

Json Alzate

student•

Se aplica lo que @juanto menciona; en caso tal de que se muestre en consola el error:
Invalid rule result: Function()
se debe ejecutar: ng add @angular/pwa@0.6.8

P.D: dos vídeos mas adelante, se muestra como se importa el @angular/service-worker ; En caso de que les generé un error, hace lo anterior descrito.

Paula Andrea Fuentes

student•

Si quiero añadir service worker a una app ya existente como es el proceso ?

Jorge Corante Barrera

student•

llegue hasta la parte 1:06 , se me instaló todo pero alguien me puede explicar porfa como hago para que mi editor de texto abra la app

Diego Forero

Team Platzi•

Hola, primero que editor de código y sistema operativo usas?

Jorge Corante Barrera

student•

Win 10 y mi editor Visual Studio code