Con solo ejecutar ng add @angular/pwa, tu aplicación Angular ya cuenta con capacidades de aplicación web progresiva. Lo sorprendente es que, sin configuración adicional, el service worker empieza a trabajar por ti: cachea archivos estáticos, permite navegación offline y habilita la instalación como app de escritorio. A continuación se exploran estas características y se resuelve un problema común al desplegar una single page application en Firebase Hosting.
¿Cómo verificar que el service worker está funcionando?
Para comprobar que la PWA está activa, basta con abrir las herramientas de desarrollo del navegador. En la pestaña Network, al recargar la página, algunos recursos aparecen con un ícono de engranaje [01:00]. Esto indica que fueron servidos directamente por el service worker y no desde Internet.
En la pestaña Sources se puede confirmar de dónde proviene cada archivo: del service worker o del caché del navegador. Este comportamiento es automático gracias a la configuración que Angular genera al agregar el módulo PWA.
¿Qué funciona en modo offline y qué no?
Desde la pestaña Network se puede emular la conexión seleccionando Offline [01:35]. Al recargar la página sin conexión, la aplicación sigue viva: el slider, el footer y la navegación general continúan disponibles.
Sin embargo, hay una distinción importante entre assets y requests a un servidor:
- Los assets incluyen archivos CSS, imágenes de la carpeta Assets, HTML y JavaScript.
- El service worker cachea estos recursos por defecto.
- Los datos que provienen de una API (requests) no se cachean automáticamente, por lo que secciones como productos quedan sin contenido estando offline [02:15].
Esto significa que, para lograr una experiencia completamente offline, se requiere configurar estrategias adicionales de caché para las llamadas a APIs.
¿Cómo se instala una PWA como aplicación de escritorio?
Las versiones recientes de Google Chrome permiten instalar una PWA no solo en dispositivos móviles, sino también como aplicación de escritorio [02:50]. En la barra del navegador aparece un botón con un ícono de más (+) que dice "Instalar".
Al hacer clic, la aplicación se abre en su propia ventana, sin barra de direcciones, exactamente igual que aplicaciones como Slack o Visual Studio Code [03:10]. Algunas características de este modo:
- La app queda con su propio ícono en el escritorio.
- Se puede abrir con doble clic como cualquier programa nativo.
- La barra de URL desaparece; la navegación depende de los elementos internos de la app.
- Chrome cambia el botón de "Instalar" a "Lanzar" cuando detecta que ya está instalada [04:28].
En dispositivos móviles ocurre algo similar: la aplicación se ve y se comporta como una app nativa, sin mostrar la URL del navegador.
¿Cómo solucionar el error de rutas en Firebase Hosting?
Al desplegar una single page application en Firebase Hosting, surge un problema: si el usuario escribe directamente una ruta como /contact en la barra de direcciones y presiona Enter, el servidor devuelve un error [05:05]. Esto sucede porque Firebase busca un archivo HTML independiente para cada ruta, pero Angular maneja todas las rutas desde un único index.html.
La solución está en el archivo firebase.json. Se agrega la propiedad rewrites para indicar que cualquier ruta desconocida debe redirigirse a index.html [05:40]:
{
"hosting": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
¿Por qué funciona esta configuración?
El patrón ** captura cualquier ruta que Firebase no pueda resolver. En lugar de mostrar un error, redirige al archivo index.html, donde el router de Angular se encarga de interpretar la URL y mostrar el componente correcto [06:20].
Después de guardar el archivo, no es necesario recompilar la aplicación. Solo se ejecuta firebase deploy para subir la nueva configuración. Una vez desplegado:
- Las rutas escritas directamente funcionan correctamente.
- La recarga de página en cualquier sección no genera errores.
- El modo offline sigue operando sin problemas [07:10].
Con estos ajustes, tu aplicación web progresiva funciona como app de escritorio, mantiene soporte offline para recursos estáticos y resuelve el enrutamiento en Firebase Hosting. El siguiente paso es evaluar el estado de la PWA utilizando Lighthouse para identificar oportunidades de mejora.
