En este artículo, veremos cómo "vincular" y configurar PWA en la aplicación Angular.
¿Qué es una PWA?
PWA (Progressive Web App) es una tecnología web que transforma un sitio web en una aplicación. Cuando se abre, la aplicación se ejecuta en un contenedor de navegador, lo que permite que la PWA ejecute la aplicación en cualquier plataforma que utilice un navegador compatible con los estándares.
Internamente, la PWA utiliza un trabajador de servicios que interactúa con el navegador para proporcionar acceso a algunas funciones integradas. El trabajador del servicio tiene acceso a Cache Storage para recursos web e IndexDB para datos. Gracias al trabajador del servicio, es posible implementar el almacenamiento en caché, lo que permite que la aplicación PWA funcione sin conexión.
Configuración inicial
, , Angular CLI, ng new app
.
ng serve
, Angular 4200 .
Angular CLI. ng add @angular/pwa
. , .
:
ngsw-config.json
- ngsw-worker.js (serviceworker.js). Service worker'.
manifest.webmanifest
- , PWA . , , ..
src/index.html
, head', html :
angular.json
:
src/assets/icons/
, .
app.module.ts
Service worker ngsw-worker.js
( ) .
PWA
. PWA https localhost ng serve
Service worker', HTTP- . , http-. npm http-server
npm i -g http-server
.
, ng build --prod
.
dist . Service worker' ngsw-worker.js
.
dist/app
8080 , http-server -p 8080
.
Nuestra aplicación se lanzó con éxito en el puerto 8080 y cuando se abre, aparece un botón en la barra de direcciones del navegador para instalar la versión PWA de nuestra aplicación.
También en las herramientas de desarrollo, en la sección Aplicación, podemos rastrear el estado de nuestro trabajador de servicio
Conclusión
En este artículo, examinamos la configuración básica y el lanzamiento de una aplicación con tecnología PWA, la pantalla se deja con una descripción de las posibilidades de trabajo de los trabajadores del Servicio en modo "offline", y el almacenamiento en caché, así como la configuración de un archivo ngsw-config.json
, que puede leer en la documentación oficial de Angular .