Cómo crear aplicaciones web progresivas con Angular

Introducción

Las aplicaciones web progresivas son aplicaciones web creadas con tecnologías que las hacen comportarse como aplicaciones nativas. Una ventaja de las aplicaciones web progresivas es la capacidad de funcionar sin problemas cuando la cobertura de red no es confiable. Además, a diferencia de las aplicaciones nativas, no se requiere instalación, pero son más rápidas que las aplicaciones web típicas.

En este artículo, crearás una aplicación web progresiva con Angular y la implementarás con Firebase.

El código para este tutorial está disponible en GitHub.

Nota: Actualmente, existe un @angular/pwapaquete que ayuda con este proceso. Este tutorial cubrirá un enfoque alternativo anterior.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local.
• La última versión del navegador web Google Chrome instalada en su máquina local.
• La extensión Lighthouse de Chrome se instala en Chrome para probar posteriormente si su aplicación es progresiva.
• Una cuenta de Google si desea cargar la aplicación a Firebase.

Este tutorial fue verificado con Node v14.5.0 y npmv6.14.5.

Paso 1: creación de un nuevo proyecto Angular

Puedes crear un nuevo proyecto con Angular CLI. De forma predeterminada, Angular generará archivos de prueba que no son de utilidad en el proyecto de este tutorial. Para evitar esta generación, agregarás la --skip-testsbandera al siguiente comando para crear un nuevo proyecto:

npx @angular/cli@10.0.0 new ng-pwa --skip-tests

Se le solicitarán algunas opciones de configuración:

Output? Would you like to add Angular routing? No? Which stylesheet format would you like to use? CSS

Esto creará un nuevo directorio de proyecto llamadong-pwa.

Navega al nuevo directorio:

cd ng-pwa

Ahora que tienes un proyecto inicial, puedes pasar a crear un manifiesto de aplicación web.

Paso 2: creación de un manifiesto de aplicación web

Un manifiesto de aplicación web es un archivo JSON que contiene la configuración que permite guardar una aplicación web en la pantalla de inicio del usuario. También define su apariencia y comportamiento cuando se inicia desde la pantalla de inicio. El manifiesto de aplicación web es un requisito básico para las aplicaciones web progresivas, pero se puede utilizar en cualquier sitio web.

Para crear un manifiesto de aplicación web para su aplicación, necesitará un nuevo archivo llamado manifest.jsonen la raíz de la srccarpeta:

nano src/manifest.json

Añade el contenido a continuación al archivo:

src/manifiesto.json

{   "name": "Angular Progressive Web App",   "short_name": "Ng-PWA",   "start_url": "./",   "theme_color": "#008080",   "background_color": "#008B8B",   "display": "standalone",   "description": "A PWA that is built with Angular",   "icons": [       {           "src": "/assets/images/icons/icon-16x16.png",           "sizes": "16x16",           "type": "image/png"       },       {            "src": "/assets/images/icons/icon-32x32.png",            "sizes": "32x32",            "type": "image/png"        },        {            "src": "/assets/images/icons/icon-150x150.png",            "sizes": "150x150",            "type": "image/png"        },        {            "src": "/assets/images/icons/icon-180x180.png",            "sizes": "180x180",            "type": "image/png"        },        {            "src": "/assets/images/icons/icon-192x192.png",            "sizes": "192x192",            "type": "image/png"        },        {            "src": "/assets/images/icons/icon-512x512.png",            "sizes": "512x512",            "type": "image/png"        }   ]}

En el manifiesto de nuestra aplicación web, definimos el nameque se adjuntará al ícono de nuestra aplicación en la pantalla de inicio de los usuarios y un short_nameque lo reemplazará, en caso de que sea demasiado largo. También especificamos la página de destino de la aplicación, cuando se inicia desde la pantalla de inicio con start_url. El theme_colorespecifica el color que asumirá la IU del navegador (interfaz de usuario) cuando los usuarios visiten nuestro sitio. La background_colorpropiedad controla el color del fondo en el que se mostrará el ícono de nuestra aplicación cuando los usuarios inicien nuestra aplicación desde su pantalla de inicio. Con display, especifica si la IU del navegador debe estar oculta o no cuando los usuarios visiten su sitio.

Esperamos que los usuarios visiten nuestro sitio con diferentes tipos de dispositivos con diferentes tamaños de pantalla, por lo que es necesario hacer duplicados de los íconos de su aplicación en múltiples dimensiones.

Cuando haya terminado de agregar activos de imagen, vaya al index.htmlarchivo y agregue lo siguiente a la headsección:

origen/index.html

...head  ...  link rel="manifest" href="/manifest.json"  meta name="theme-color" content="#008080"/head

El manifiesto de la aplicación web no se agregará a la carpeta de compilación a menos que le indiquemos a Angular que lo haga. Lo haremos agregando el manifest.jsonarchivo a la matriz de activos en appsla sección del .angular-cli.jsonarchivo:

.angular-cli.json

..."apps": [    {     ...      "assets": [       ...        "manifest.json"      ],...

Nota: Si su aplicación está creada con Angular 6 o posterior, deberá editar angular.jsonen lugar de .angular-cli.json:

angular.json

..."projects": {  "ng-pwa": {    ...    "architect": {      "build": {        ...        "assets": [          "src/manifest.json"        ],...

Después de crear un manifest.json, modificarlo index.htmly editarlo angular-cli.json(o angular.json), estará listo para el siguiente paso.

Paso 3: Agregar trabajadores de servicio

Los service workers son la base de las aplicaciones web progresivas. Están escritos en JavaScript y ayudan a almacenar en caché archivos y recursos importantes, lo que ayuda a mantener la funcionalidad de una aplicación cuando la cobertura de red no está disponible o no es confiable. Los service workers también pueden interceptar solicitudes y administrar respuestas del servidor, entre otras cosas.

Necesitamos compilar nuestra aplicación webpackantes de enviarla a producción. Nuestro service worker debe poder rastrear y almacenar en caché los archivos de compilación.

Con el sw-precache-webpack-plugin npmpaquete, instalamos el paquete y lo configuramos.

Nota: Actualmente, el desarrollador sw-precache-webpack-pluginrecomienda utilizar GenerateSWdesde workbox-webpack-plugin.

Luego podemos ejecutar un comando que generará automáticamente el service worker en la carpeta de compilación.

Ejecute el npm installcomando desde el ng-pwadirectorio para instalar el paquete:

npm install --save-dev sw-precache-webpack-plugin@1.0.0

Una vez instalado el paquete, crea un archivo llamado precache-config.js:

nano precache-config.js

Añade lo siguiente al archivo:

precache-config.js

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');module.exports = {    navigateFallback: '/index.html',    navigateFallbackWhitelist: [],    stripePrefix: 'dist',    root: 'dist/',    plugins:[        new SWPrecacheWebpackPlugin({            cacheId: 'ng-pwa',            filename: 'service-worker.js',            staticFileGlobs: [                'dist/index.html',                'dist/**.js',                'dist/**.css'            ],        })    ],    stripePrefix: 'dist/assets',    mergeStaticsConfig: true};

El precache-config.jsarchivo configura el sw-precache-webpack-pluginuso de pares clave-valor de objetos literales.

Angular, como marco de trabajo de interfaz para crear aplicaciones de una sola página, utiliza el enrutamiento de URL del lado del cliente. Esto significa que puede generar URL arbitrarias que no se almacenan en caché mediante el trabajador de servicio generado automáticamente. En tales situaciones, definiremos una entrada HTML a la que se asignará la URL solicitada y navigateFallbackla manejaremos. La entrada HTML debe poder proporcionar los recursos deseados. Debido a que nuestra aplicación es una SPA (aplicación de una sola página) y index.htmles el punto de entrada, puede manejar URL arbitrarias; por lo tanto, debe estar entre los archivos seleccionados para almacenarse en caché en la staticFileGlobsmatriz. navigateFallbackWhitelistpuede estar vacío o contener una expresión regular que define el tipo o patrón de URL que navigateFallbackse utilizará.

Para obtener una comprensión más profunda de cómo configurar sw-precache-webpack-plugin, lea su documentación.

Para finalizar la configuración del service worker, crearemos un npmscript o comando personalizado que se utilizará para compilar nuestra aplicación y generar automáticamente el archivo del service worker en la carpeta de compilación. Vaya al package.jsonarchivo y agregue lo siguiente scripts:

paquete.json

 ... "scripts": {    ...    "pwa": "ng build --prod  sw-precache --root=dist --config=precache-config.js"  }, ...

Después de instalar sw-precache-webpack-plugin, crear precache-config.jsy editar package.json, estará listo para el siguiente paso.

Paso 4: creación de la vista

Solo tenemos una única vista, ya que nuestro enfoque principal está en el proceso de creación de aplicaciones web progresivas con Angular.

Edite app.component.htmly reemplace el contenido con el siguiente código:

src/aplicación/aplicación.componente.html

div  h1    A Progressive Web App Built with Angular.  /h1  img alt="Angular logo"  h2Get Started With Progressive Web Apps:/h2  ul    li      h4a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/"Service Workers/a/h4    /li    li      h4a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/"Web App Manifest/a/h4    /li    li      h4a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/"Code Lab (PWA)/a/h4    /li  /ul/div

Este código produce una página web con una imagen, algún texto y tres enlaces.

El rel="noopeneratributo es esencial en aplicaciones web progresivas si el targetatributo del elemento de anclaje está configurado _blankpor razones de seguridad y rendimiento.

Edite styles.cssy reemplace el contenido con el siguiente código:

src/estilos.css

body {    background-color: teal;}.container {    text-align: center;}ul {    list-style: none;}h1, h2, a {    color: white;}

Este código crea un color de fondo verde azulado, centra el texto y le da un color blanco.

Ahora ha completado la vista y puede continuar con la implementación de la aplicación.

Paso 5: Implementación de la aplicación

El service worker es el corazón de cualquier aplicación web progresiva. Sin embargo, para que el service worker funcione correctamente, nuestra aplicación debe funcionar a través de una conexión segura. Por lo tanto, implementaremos nuestra aplicación en Firebase, que se aloja a través de una conexión segura. En este paso, implementará su aplicación en Firebase.

Para comenzar, visita firebase.google.com. Si aún no tienes una cuenta, crea una para tener acceso a la consola. Desde la consola, crea un nuevo proyecto de Firebase.

Una vez que haya iniciado sesión, haga clic en el enlace Ir a la consola en la esquina superior derecha. En la página de la consola, seleccione Crear un proyecto . Se le solicitará un nombre para su proyecto. También se le solicitará que habilite Google Analytics. Este tutorial no requerirá Google Analytics.

Haga clic en Crear proyecto y espere a que se complete el proceso.

Una vez creado el proyecto, puede hacer clic en Continuar para llegar al Panel de control del proyecto. Para los fines de este tutorial, nos interesará la sección Desarrollar y la página de Hosting .

Ahora puedes volver a la terminal de comandos. Ejecuta el npm installcomando para instalar el firebase-toolspaquete globalmente:

npm install -g firebase-tools@8.4.3

El firebase-toolspaquete nos permitirá probar, ejecutar e implementar aplicaciones en Firebase desde la terminal de comandos.

Una vez finalizada la instalación, debemos compilar nuestra aplicación como preparación para la implementación.

Para crear la aplicación Angular y generar automáticamente el service worker, ejecute lo siguiente desde el ng-pwadirectorio:

npm run pwa

Esto ejecuta un script personalizado que creamos anteriormente y hace que nuestra aplicación esté lista para producción.

Ahora es el momento de presentar Firebase a la aplicación. Ejecute este comando para iniciar sesión en Firebase:

firebase login

En este punto, se le solicitarán las credenciales. Ingrese la información de su cuenta en la terminal.

Una vez autenticado, ejecute el siguiente comando para inicializar Firebase en el proyecto:

firebase init

Luego responde las preguntas de la siguiente manera:

Are you ready to proceed? (Y/n) = YWhich Firebase CLI features do you want to setup for this folder? = HostingSelect a default Firebase project for this directory = Your-Firebase-Project-NameWhat do you want to use as your public directory? = distConfigure as a single-page app (rewrite all urls to /index.html)? (y/N) = YFile dist/index.html already exists. Overwrite? (y/N) = N

Nuestra aplicación está lista para implementarse. Ejecute el siguiente comando para implementar la aplicación en Firebase:

firebase deploy

Por último, ejecute este comando para ver la aplicación:

firebase open hosting:site

Solución de problemas

Si ves un mensaje que dice “Firebase Hosting Setup Complete” en lugar de tu aplicación, es posible que hayas sobrescrito tu index.html. Vuelve a compilar con npm run pwa, firebase inity asegúrate de seleccionar “No” para sobrescribir index.html.

Según tu configuración, tu aplicación puede existir bajo "ng-pwa"(el nombre del proyecto Angular). Durante firebase init, puedes configurar el directorio público en dist/nw-pwalugar de distpara evitar esto.

Tu aplicación web progresiva ya está creada e implementada. Ahora podemos usar una herramienta para probarla.

Paso 6: Prueba con Lighthouse

Lighthouse es una extensión de Chrome creada por Google. Se puede utilizar para comprobar si una aplicación web progresiva cumple con el estándar de aplicaciones web progresivas, además de otras pruebas.

La puntuación más alta es 100% y la puntuación PWA para esta aplicación es 91%.

Para probar su PWA, abra la aplicación alojada en su navegador web Google Chrome. Haga clic en el botón Extensiones y seleccione Lighthouse . Se mostrará una ventana que le solicitará que haga clic en el botón Generar informe . Después de hacer clic en el botón, verá temporalmente una pantalla con un mensaje Esperando los resultados de Lighthouse . Cuando finalice la prueba, se le presentará una pantalla con los resultados de la prueba.

Conclusión

En este artículo, creaste una aplicación web progresiva con Angular y la implementaste a través de Firebase. Las aplicaciones web progresivas brindan a los usuarios una experiencia similar a las aplicaciones nativas. Sin embargo, las PWA son más livianas y mucho más flexibles.