Convertir tu aplicación web progresiva en una app que luzca como nativa en el celular es más sencillo de lo que parece. Solo necesitas la URL de tu proyecto desplegado, Google Chrome y una correcta configuración del archivo web manifest. A continuación se explican los pasos clave para lograrlo y las opciones de personalización disponibles.
¿Cómo se instala una PWA desde el navegador del celular?
Una vez que tu aplicación está desplegada (en este caso con Firebase), puedes abrirla desde Google Chrome en tu celular. La app se verá como cualquier sitio web responsive: puedes ver productos, ir al detalle y todo funciona correctamente [0:12].
Para instalarla como app nativa existen dos caminos:
- Banner automático: si Google Chrome detecta que tu sitio cumple con los requisitos de una PWA, mostrará un banner sugiriendo la instalación.
- Instalación manual: vas a las opciones del navegador y seleccionas "agregar a la pantalla principal" [0:38].
Al agregar la app, aparece el nombre y el ícono configurados. Se instala en el home screen del celular y, una vez abierta, ya no muestra la barra de URL del navegador. Esto le da la apariencia de una aplicación descargada desde una tienda [0:55].
¿Qué rol juega el archivo web manifest en la personalización?
El archivo manifest (también llamado web manifest) es el corazón de la configuración visual de tu PWA. Desde allí controlas elementos fundamentales como:
- name: el nombre completo que aparece en el splash screen cuando la app está cargando.
- short_name: el nombre corto que se muestra debajo del ícono en la pantalla de inicio del celular [1:40].
- theme_color: define el color de la barra superior del sistema operativo (donde aparecen la hora, la batería y la conexión a internet) [2:05].
- background_color: el color de fondo del splash screen, es decir, la pantalla que se muestra mientras carga la aplicación [2:20].
- start_url: la ruta desde donde inicia tu app. Normalmente se deja como
/ para que arranque desde el home, aunque podrías configurar cualquier otra ruta [2:40].
- icons: los íconos asociados a tu aplicación en distintos tamaños.
Por ejemplo, en la práctica se cambió el nombre a Platzi Store editando tanto name como short_name en el manifest.
¿Qué diferencia hay entre standalone y fullscreen?
La propiedad display en el manifest controla cómo se presenta la app en pantalla:
- standalone: comparte la pantalla con el status bar del celular, donde se ven la hora, la conexión y la batería. Es la configuración predeterminada de la mayoría de las PWA [2:50].
- fullscreen: ocupa toda la pantalla del dispositivo sin mostrar el status bar, similar a cómo se comporta un videojuego [3:05].
En el ejercicio se cambió de standalone a fullscreen, se recompiló la aplicación y se desplegó con Firebase Deploy para ver el resultado.
¿Cómo se actualiza una PWA instalada en el celular?
Después de hacer cambios en el manifest y desplegar una nueva versión, el proceso manual requiere:
- Desinstalar la versión anterior de la app.
- Hacer un refresh en el navegador para que descargue los archivos actualizados.
- Volver a agregar la app a la pantalla principal [3:45].
Este proceso es engorroso, pero es la forma manual de hacerlo. La buena noticia es que las actualizaciones automáticas se pueden configurar para que cada vez que se haga un release, la aplicación instalada en el dispositivo del usuario lo detecte y ejecute un reload automático sin intervención manual [4:30].
¿Qué ventajas ofrece instalar una PWA de esta forma?
La principal ventaja es que puedes ofrecerle a tu cliente una experiencia prácticamente idéntica a una app nativa:
- Sin necesidad de pasar por una tienda de aplicaciones.
- Con actualizaciones inmediatas tras cada despliegue.
- Con personalización completa del aspecto visual desde el manifest.
- Con soporte para pantalla completa y splash screen personalizado.
Con solo decirle al usuario "instálala desde el navegador", obtiene todas las funcionalidades y actualizaciones futuras de forma transparente.
