Crea una app web progresiva con la CLI de Angular

¿Quieres que tu app de Angular se pueda instalar? ¡No esperes más!

Minko Gechev

En esta publicación, aprenderás a usar la interfaz de línea de comandos (CLI) de Angular para crear una app web progresiva (AWP).

Puedes encontrar la muestra de código de esta guía en GitHub.

Crea una AWP instalable

Para convertir tu aplicación de Angular en una AWP, solo debes ejecutar un comando:

ng add @angular/pwa

Este comando hará lo siguiente:

  • Crea un service worker con una configuración de almacenamiento en caché predeterminada.
  • Crea un archivo de manifiesto que le indica al navegador cómo debe comportarse tu app cuando se instala en el dispositivo del usuario.
  • Agrega un vínculo al archivo de manifiesto en index.html.
  • Agrega la theme-color <meta> etiqueta a index.html.
  • Crea íconos de la app en el directorio src/assets.

De forma predeterminada, tu service worker debería registrarse en unos segundos después de la primera carga de la página. Si no es así, considera modificar la registrationStrategy.

Personaliza tu AWP

En la publicación Almacenamiento previo en caché con el service worker de Angular, se explica cómo configurar el service worker de Angular. Allí, puedes encontrar cómo especificar qué recursos quieres que el service worker almacene en caché y qué estrategia debe usar para hacerlo.

El archivo de manifiesto de tu app te permite especificar el nombre, el nombre abreviado, los íconos, el color del tema y otros detalles de la app. Lee sobre el conjunto completo de propiedades que puedes configurar en la publicación Agrega un manifiesto de la app web.

Echa un vistazo al archivo de manifiesto generado por la CLI de Angular:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Puedes personalizar cualquiera de estas propiedades cambiando el valor pertinente en manifest.webmanifest.

Una AWP hace referencia a su archivo de manifiesto con un elemento link en index.html. Una vez que el navegador encuentre la referencia, mostrará el mensaje Agregar a la pantalla principal:

Un mensaje para instalar una app web progresiva

Dado que los esquemas ng-add agregan todo lo necesario para que tu app se pueda instalar, generan algunos íconos de acceso directo que se muestran una vez que el usuario agrega la app a su escritorio:

Ícono de acceso directo de una app web progresiva

Asegúrate de personalizar las propiedades y los íconos del manifiesto antes de implementar tu AWP en producción.

Conclusión

Para crear una app de Angular instalable, haz lo siguiente:

  1. Agrega @angular/pwa a tu proyecto con la CLI de Angular.
  2. Edita las opciones en el archivo manifest.webmanifest para que se adapten a tu proyecto.
  3. Actualiza los íconos en el directorio src/assets/icons para que se adapten a tu proyecto.
  4. De manera opcional, edita el theme-color en index.html.