Veamos en este artículo cómo crear un elemento clave dentro del desarrollo de aplicaciones web progresivas: el archivo Manifiesto.
Un punto clave al momento de crear una PWA es la integración del archivo manifiesto, conocido también como Manifest File. El mismo posee una estructura de texto o pares clave-valor, basada en JSON, y su función principal es agrupar en ésta, una ser de datos a modo de configuración, que se relacionan directamente con la aplicación.
Quienes vienen de otros mundos del desarrollo, podrán encontrar al mismo como un proceso equivalente al desarrollo de aplicaciones Android: manifest.xml o a su equivalente en el ecosistema Java: manifest.mf. En el caso de las PWA, su nombre puede variar entre manifest.json o app.webmanifest. Cualquiera de estos es bienvenido.
En la imagen anterior, vemos cómo inspeccionar el contenido de un archivo manifiesto, a través de las Herramientas para el Desarrollador.
Navegador Web → DevTools → Application → Manifiest es la ruta para visualizarlo. Al llegar a esta ruta, podrás visualizar todas las propiedades definidas dentro de este archivo.
Beneficios de agregar un archivo manifiesto
El primero de todos es generar un camino de instalación de nuestras PWA en cualquiera de los sistemas operativos actuales: Windows, Linux, Mac OS, iOS, iPadOS y por supuesto: Android.
La mayoría de los navegadores ya le dan soporte a este archivo, de forma total o parcial. Puntualmente es Safari quien, hasta el momento de escribir esta publicación, solo le da un soporte parcial a este archivo.
Y si solemos utilizar Lighthouse integrado en las Herramientas para el Desarrollador o DevTools, veremos que esta herramienta nos “llama la atención" cuando no incluimos un archivo manifiesto en el proyecto web que estamos testeando.
Figura 02: estructura del archivo manifiesto. Como vemos, es contenido JSON puro.
Cómo construirlo
Dentro del proyecto web donde queremos integrar un archivo Manifiesto, debemos crear un nuevo archivo del tipo JSON, en la raiz del proyecto, al mismo nivel del documento index.html. Recordemos nombrar el archivo como manifest.json o web.appmanifest.
El paso siguiente es referenciarlo dentro de cada documento HTML que tenga nuestro proyecto. Puntualmente dentro del apartado "head", es donde debemos agregar la siguiente línea:
<link rel="manifest" href="manifest.json">
Luego, dentro del archivo manifiesto, nos queda comenzar a armar la estructura del archivo en sí. Lo que haremos es compartirles una tabla con cada propiedad o clave, y su descripción. Más luego, un código de ejemplo de un archivo Manifiesto, más las referencias a otras guías del tema, para ampliar el material de éste.
| Propiedad o Clave | Descripción de su valor |
|---|---|
| scope | Punto raíz del sitio web. Usualmente se utiliza "/" que hace referencia a la carpeta que contiene el proyecto. |
| start_url | La ruta “/route/” o archivo inicial de nuestro proyecto web. Este se debe respetar en todos los otros documentos HTML que referencian al Manifiesto, para que el usuario pueda agregar nuestro proyecto y que éste siempre inicie en la página principal correcta. |
| display | Muestra el comportamiento de la ventana contenedora de nuestra PWA. Sus valores pueden variar entre:
Es bastante referencial el nombre de cada valor, acorde a cómo se verá la PWA al ejecutarse en el equipo móvil o de escritorio. |
| orientation | La orientación de la PWA en la pantalla. portrait o landscape sus valores aceptados, pero solo funcionan en dispositivos Android. |
| name | Nombre de la PWA. Puede ser algo descriptivo aquí. Este nombre puede llegar a utilizarse como nombre de la PWA en computadoras de escritorio. |
| shortname | Nombre de la PWA, lo más resumido posible, para ser utilizado puntualmente en pantallas de dispositivos móviles. |
| description | Por supuesto, una descripción más clara de la PWA, lo que hace y demás cuestiones. |
| icons | Soporta un array JSON con definición de íconos en diferentes tamaños. Dicho array debe llevar la ruta hacia el archivo de íconos, el tamaño de los mismos, el tipo de imagen y la propiedad purpose, donde ya hablamos de las máscaras que soportan dichos íconos, en este otro artículo. |
| background_color | Define el color de fondo que tendrá la PWA. El color debe ser definido como hexadecimal. |
| theme_color | Define el color del tema predeterminado de la PWA. Aquellos navegadores que lo soportan pueden cambiar el color de ventana y barra URL, acorde al que se indica en esta propiedad. El color debe ser definido como hexadecimal. |
El orden de las propiedades puede variar sin afectar a nuestro proyecto.
Existen otras tantas propiedades más, pero con estas definidas en el archivo manifiesto, tu PWA funcionará de forma óptima. Dejamos las propiedades más avanzadas y otras tantas que están aún en implementación, para una próxima publicación.
Ejemplo de archivo Manifiesto
Veamos a continuación un bloque de código con el ejemplo de cada propiedad mencionada:
{
“short_name": “PWAManifest",
“name": “PWA Manifest",
“description": “Mi primer proyecto PWA",
“background_color": “#FFFFFF",
“theme_color": “#FFFFFF",
“orientation": “portrait",
“display": “standalone",
“icons":[
{
“src": “icons/ru-512.png",
“type": “image/png",
“sizes": “512x512",
“purpose": “maskable"
},
{
“src": “icons/ru-192.png",
“type": “image/png",
“sizes": “192x192",
“purpose": “maskable"
}
]
}
Con esto funcional, ya puedes probar de agregar tu proyecto web, al escritorio de tu computadora o móvil.
A tener en cuenta
La propiedad orientation como icons, no funcionan en Mac OS Safari ni en el ecosistema iOS, iPadOS de Apple. Para esto último, debes agregar los "meta-tag-icon" en los documentos HTML, como lo explicamos hace un tiempo en este otro tutorial.
En Mac OS Safari tampoco hay posibilidad de agregarlo al escritorio del S.O. Solo se dispone de esta propiedad en iOS y/o iPadOS.
Si integras el archivo manifiesto con Service Worker, éste funcionará mucho mejor todavía. Recuerda que nuestro artículo sobre Workbox incluye referencia a los fundamentos de Service Worker, como también nuestro tutorial de Cache Storage.
¡Gracias por leernos!
Para dejar tu comentarios debes pertenecer a la Comunidad.