Angular y Progressive Web Apps
En este artículo vamos a ver como hacer que una aplicación Angular sea una Progressive Web App, utilizando angular-cli para ello.
Lo primero que vamos a hacer es crear un nuevo proyecto de ejemplo con el comando:
Una vez creado el proyecto, utilizamos nuestro editor de código favorito para editarlo. En nuestro caso, utilizamos Visual Studio Code:
A la izquierda del editor vemos la estructura de ficheros y carpetas. Abrimos la carpeta "src", y creamos en ella un fichero json llamado manifest.json.
Este fichero manifest.json, sirve para configurar lo que sería un icono de arranque y una pantalla de arranque para la aplicación. Es decir, nos permite definir una pantalla splash, como si nuestra aplicación web fuera una aplicación nativa hecha en android. Por tanto, este fichero además, hace las veces de un instalador de la aplicación. Fijate que la imagen que asignamos es de 512x512. Esto tiene su explicación que veremos más adelante. Esta imagen debes colocarla en la carpeta assets, para que al compilar el proyecto, se incluya en la compilación. En este ejemplo no la hemos incluido, pero deberías hacerlo en tu caso.
En este fichero, hemos utilizado las propiedades básicas. Un nombre para la aplicación, en la propiedad "name", que es el nombre que aparecerá en la pantalla splash, mientras se carga la aplicación en memoria. "short_name" se refiere al nombre que aparece con el icono en el escritorio. El icono que aparecerá en esta pantalla splash, viene definido en la propiedad "icons". En esta propiedad se puede definir mas de un icono, para diferentes tamaños de pantalla de móvil.
En las propiedades theme_color y background_color definimos los colores de la pantalla splash.
Por último en las propiedades display y orientation, definimos la forma y orientación de la pantalla.
Luego en el fichero index.html del proyecto, también hay que definir unos metatags, relacionados con estas propiedades de color, y también incluir el fichero manifest.json
Con esta linea compilarás la aplicación para producción, y además al resultado de la compilación le aplicarás la herramienta sw-precache, para que ésta sea capaz de crear el fichero service-worker.js, optimizado según tu código compilado.
Vamos ahora simplemente a ejecutar la aplicación en local, para ver que funciona sin problemas. Decir que una progressive web apps solo funcionará por https. Así que a no ser que configuremos en nuestro equipo un servidor con https, deberemos subir la aplicación compilada a algun servidor. Nosotros vamos a utilizar el hosting de la plataforma firebase.
Ejecutemos el comando ng serve, para ejecutar en localhost nuestra aplicación. Al poner en el navegador la url http://localhost:4200 deberíamos ver la pantalla(en caso de estar utilizando angular 4. En el angular 2 la verás distinta):
Después de ver que se ejecuta en localhost sin ningún problema, ya podemos compilar la aplicación ejecutando en la linea de comando, en la raiz de nuestro proyecto, el comando:
Si todo ha ido bien, veremos algo como esto:
En la carpeta dist de nuestro proyecto, tenemos la aplicación compilada. Si hacemos un dir de esta carpeta, veremos que allí se encuentra el fichero service-worker.js, y también el manifest.json. En esta carpeta también debería verse la carpeta assets, y dentro la imagen que indicamos en el fichero manifest.json. En este ejemplo, al ser un ejemplo, no lo hemos incluido, y por tanto, no vemos la carpeta assets dentro de la carpeta dist.
A continuación vamos a subir el codigo compilado a firebase. Suponemos que has creado el proyecto en Firebase, y que tienes los paquetes de firebase instalados en tu sistema. Entonces ejecutamos el comando
Si todo ha ido bien, veremos en pantalla algo como:
Poniendo ahora en el navegador la url que nos indica: https://test-pwa-ca4b4.firebaseapp.com
Si todo va bien, veremos en el navegador nuestra aplicación ejecutándose:
A partir de aquí, y para estar seguro si nuestra aplicación cumple con el standar PWA(Progressive Web App), es muy recomendable instalar en el navegador el plugin Lighthouse. Es básicamente una herramienta que comprueba si nuestra aplicación cumple con los diferentes standares de la industria, incluido las PWA.
Después de ejecutar el plugin Lighthouse sobre nuestra página web, se abrirá otra página con el resultado del test:
La sección Progressive Web App debería tener un 100%. Si no es así, va a ser casi imposible que el móvil detecte que la aplicación web es una PWA.
Anteriormente mas arriba habíamos dicho que en el fichero manifest.json, la imagen tenía unas dimensiones de 512x512. Esto es una de las obligaciones que te impone el standar. Si la imagen no fuera de estas dimensiones, el test te lo habría indicado, y posiblemente hubiera resultado con un porcentaje del 91% aprox. Asegurate también que en el manifest.json no tengas lineas en blanco o lineas con comentarios, porque el test te dará error de formato en este fichero.
También decir que la primera vez que ejecutes la aplicación en el navegador chrome del móvil, es posible que no te detecte que es una PWA, y por tanto no te solicitará instalación en el escritorio del icono de la aplicación. La segunda o tercera vez que vuelvas a acceder pasado un tiempo, entonces es cuando te solicitará si quieres instalarla.
Con lo visto hasta aquí, tendremos lo básico de una aplicación PWA, con las tres características básicas: apariencia de aplicación nativa, proxy-cache y notificaciones push.
Se puede personalizar más cosas en el manifest.json de cara a configurar la aplicación. Y en el tema de personalizar la manera en que trabaja la cache y las notificaciones push, habría que modificar el código del fichero service-worker.js. Pero esto lo dejaremos para otros artículos.
Saludos y hasta pronto.
Lo primero que vamos a hacer es crear un nuevo proyecto de ejemplo con el comando:
ng new test-pwa
Una vez creado el proyecto, utilizamos nuestro editor de código favorito para editarlo. En nuestro caso, utilizamos Visual Studio Code:
A la izquierda del editor vemos la estructura de ficheros y carpetas. Abrimos la carpeta "src", y creamos en ella un fichero json llamado manifest.json.
Este fichero manifest.json, sirve para configurar lo que sería un icono de arranque y una pantalla de arranque para la aplicación. Es decir, nos permite definir una pantalla splash, como si nuestra aplicación web fuera una aplicación nativa hecha en android. Por tanto, este fichero además, hace las veces de un instalador de la aplicación. Fijate que la imagen que asignamos es de 512x512. Esto tiene su explicación que veremos más adelante. Esta imagen debes colocarla en la carpeta assets, para que al compilar el proyecto, se incluya en la compilación. En este ejemplo no la hemos incluido, pero deberías hacerlo en tu caso.
En este fichero, hemos utilizado las propiedades básicas. Un nombre para la aplicación, en la propiedad "name", que es el nombre que aparecerá en la pantalla splash, mientras se carga la aplicación en memoria. "short_name" se refiere al nombre que aparece con el icono en el escritorio. El icono que aparecerá en esta pantalla splash, viene definido en la propiedad "icons". En esta propiedad se puede definir mas de un icono, para diferentes tamaños de pantalla de móvil.
En las propiedades theme_color y background_color definimos los colores de la pantalla splash.
Por último en las propiedades display y orientation, definimos la forma y orientación de la pantalla.
Luego en el fichero index.html del proyecto, también hay que definir unos metatags, relacionados con estas propiedades de color, y también incluir el fichero manifest.json
El fichero manifest.json también es necesario que se incluya dentro del fichero angular-cli.json, en la sección de "assets", para que cuando la aplicación se compile, se incluya también el manifest.json.
Además, hay que incluir también en este fichero index.html, el registro del service worker. Es decir, incluir y registrar el fichero service-worker.js que luego veremos como crearlo. Este fichero service-worker es el corazón de este sistema Progressive-Web-App, y por tanto fundamental que se cree y se registre para que todo esto funcione. El service-worker.js hará las tareas de proxy-cache entre el cliente y el servidor, y por tanto, hará que la aplicación vaya lo más rápido posible. Además, permitirá también que la aplicación puede recibir notificaciones push, incluso cuando el navegador no esté abierto. Esto es así, porque el service worker siempre se estará ejecutando en segundo plano, en el demonio de chrome.
Decir que este fichero service-worker.js, se creará cuando compilemos la aplicación. Se podría crear a mano, pero en lugar de hacer esto, vamos a utilizar un paquete npm, que fue implementado para ahorrarnos todo este trabajo de crear un service-worker. Este paquete se llama sw-precache-webpack-plugin. Para instalarlo nos situamos en la raiz de nuestro proyecto y ejecutamos el comando:
npm install sw-precache-webpack-plugin --save-dev
Si todo fue bien, veras una carpeta dentro de la carpeta node_modules, llamada "sw-precache-webpack-plugin"
Para poder utilizar este paquete, necesitamos además crear un fichero de configuración. Lo llamaremos precache-config.js y lo creamos en el directorio raíz de la aplicación:
Con este fichero, el compilador ya sabrá como crear el fichero service-worker.js.
También sería importante para tu comodidad a la hora de compilar, que incluyeras la siguiente linea en el fichero package.json:
Con esta linea compilarás la aplicación para producción, y además al resultado de la compilación le aplicarás la herramienta sw-precache, para que ésta sea capaz de crear el fichero service-worker.js, optimizado según tu código compilado.
Vamos ahora simplemente a ejecutar la aplicación en local, para ver que funciona sin problemas. Decir que una progressive web apps solo funcionará por https. Así que a no ser que configuremos en nuestro equipo un servidor con https, deberemos subir la aplicación compilada a algun servidor. Nosotros vamos a utilizar el hosting de la plataforma firebase.
Ejecutemos el comando ng serve, para ejecutar en localhost nuestra aplicación. Al poner en el navegador la url http://localhost:4200 deberíamos ver la pantalla(en caso de estar utilizando angular 4. En el angular 2 la verás distinta):
Después de ver que se ejecuta en localhost sin ningún problema, ya podemos compilar la aplicación ejecutando en la linea de comando, en la raiz de nuestro proyecto, el comando:
npm run pwa
Si todo ha ido bien, veremos algo como esto:
En la carpeta dist de nuestro proyecto, tenemos la aplicación compilada. Si hacemos un dir de esta carpeta, veremos que allí se encuentra el fichero service-worker.js, y también el manifest.json. En esta carpeta también debería verse la carpeta assets, y dentro la imagen que indicamos en el fichero manifest.json. En este ejemplo, al ser un ejemplo, no lo hemos incluido, y por tanto, no vemos la carpeta assets dentro de la carpeta dist.
A continuación vamos a subir el codigo compilado a firebase. Suponemos que has creado el proyecto en Firebase, y que tienes los paquetes de firebase instalados en tu sistema. Entonces ejecutamos el comando
firebase deploy --only=hosting
Si todo ha ido bien, veremos en pantalla algo como:
Poniendo ahora en el navegador la url que nos indica: https://test-pwa-ca4b4.firebaseapp.com
Si todo va bien, veremos en el navegador nuestra aplicación ejecutándose:
A partir de aquí, y para estar seguro si nuestra aplicación cumple con el standar PWA(Progressive Web App), es muy recomendable instalar en el navegador el plugin Lighthouse. Es básicamente una herramienta que comprueba si nuestra aplicación cumple con los diferentes standares de la industria, incluido las PWA.
Después de ejecutar el plugin Lighthouse sobre nuestra página web, se abrirá otra página con el resultado del test:
La sección Progressive Web App debería tener un 100%. Si no es así, va a ser casi imposible que el móvil detecte que la aplicación web es una PWA.
Anteriormente mas arriba habíamos dicho que en el fichero manifest.json, la imagen tenía unas dimensiones de 512x512. Esto es una de las obligaciones que te impone el standar. Si la imagen no fuera de estas dimensiones, el test te lo habría indicado, y posiblemente hubiera resultado con un porcentaje del 91% aprox. Asegurate también que en el manifest.json no tengas lineas en blanco o lineas con comentarios, porque el test te dará error de formato en este fichero.
También decir que la primera vez que ejecutes la aplicación en el navegador chrome del móvil, es posible que no te detecte que es una PWA, y por tanto no te solicitará instalación en el escritorio del icono de la aplicación. La segunda o tercera vez que vuelvas a acceder pasado un tiempo, entonces es cuando te solicitará si quieres instalarla.
Con lo visto hasta aquí, tendremos lo básico de una aplicación PWA, con las tres características básicas: apariencia de aplicación nativa, proxy-cache y notificaciones push.
Se puede personalizar más cosas en el manifest.json de cara a configurar la aplicación. Y en el tema de personalizar la manera en que trabaja la cache y las notificaciones push, habría que modificar el código del fichero service-worker.js. Pero esto lo dejaremos para otros artículos.
Saludos y hasta pronto.
Comentarios
Publicar un comentario