El manifiesto en las Progressive Web Apps

Cuando hablamos de Progressive Web Apps (PWA), el archivo de manifiesto es una forma de orientar a los navegadores web, especialmente a los dispositivos móviles, sobre cómo mostrar una aplicación. Es un archivo JSON donde podemos indicar sus diferentes propiedades con sus valores. En este artículo, explicamos de manera muy práctica qué es este archivo manifest.json y cómo utilizarlo correctamente.

El archivo manifest.json debe colocarse en el directorio raíz de tu aplicación y su nombre debe ser el que indicamos. Estableceremos en él el nombre de la aplicación Cloud, los iconos de esta, si la mostraremos en vertical u horizontal, colores, etc.

Agregar el archivo de manifiesto a mi web

1. Como indicábamos antes, se debe colocar en el directorio raíz del proyecto el archivo llamado manifest.json.
2. Su estructura elemental debe ser la siguiente.

   {
      'short_name': 'ArsysBlog',
      'name': 'ArsysBlog',
      'icons': [
        {
          'src': 'launcher-icon-1x.png',
          'type': 'image/png',
          'sizes': '48x48'
        },
        {
          'src': 'launcher-icon-2x.png',
          'type': 'image/png',
          'sizes': '96x96'
        },
        {
          'src': 'launcher-icon-4x.png',
          'type': 'image/png',
          'sizes': '192x192'
        }
      ],
      'start_url': 'index.html?launcher=true'
    }

   Te recomendamos consultar la sección correspondiente al manifiesto de MDN, donde encontrarás más documentación sobre este archivo. También te puede resultar útil ver los manifiestos de otras Progressive Web Apps que utilices.

3. En el index.html añade la siguiente línea:

   <link rel='manifest' href='/manifest.json'>

Personalizando el inicio de mi App en el móvil

Lo más interesante y nada complicado que podemos conseguir con manifest.json es una página de inicio. Mostraremos cosas básicas como un fondo acorde con el grafismo de la aplicación, así como un icono o logotipo que mostraremos al usuario mientras cargan la página web.

Dependiendo de la pantalla del usuario se mostrarán los iconos en diferentes tamaños, tarea que se encargará automáticamente el navegador.

1. Intenta utilizar, para nombrar tus iconos nombres que ya aparecen en el archivo  manifest.json, como launcher-icon-1x.png, launcher-icon-2x.png y launcher-icon-4x.png con los tamaños (anchura y altura) descritos respectivamente en ese JSON.
2.  Deberás de añadir las propiedades de tu tema gráfico y otras preferencias, como por ejemplo:

   'background_color': '#0598ED',
   'theme_color': '#0598ED',
   'orientation': 'portrait',
   'display': 'standalone',

Probando manifest

1.- Desde Chrome, añade la URL de tu página y usa Chrome Developer Tool. 2.- En la pestaña Application ve Manifest. Allí podrás comprobar las propiedades que detallaste.

Algunas características de las PWA funcionan únicamente en páginas que son seguras. Es decir, aquellas que tienen un SSL o protocolo https://. Además, deberás tener en cuenta que no todos los navegadores son 100% compatibles.

Publicado el 15/10/2024 por:

Fernán García de Zúñiga

Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.