Que es y Como Configurar “Manifest JSON” en una Página Web

Nube Colectiva

hace 6 años

En esta página:

Demo Github

Existen muchas tecnologías y herramientas en el mundo del Desarrollo Web que nos ayudan a mejorar ciertas características de nuestro proyecto Web, pueden ser Lenguajes de Programación, Plugins, Especificaciones, etc. Una de estas tecnologías es Manifest JSON que añade ciertas funcionalidades que hacen que tu proyecto sea mas dinámico, en esta artículo te contamos los detalles sobre esta tecnología.

Vamos a explicar que es Manifest JSON, para que sirve, la estructura o datos que contiene y como implementarlo en tu página Web, vamos con el artículo.

Que es Manifest JSON ?

Es un archivo en formato JSON que te sirve para crear un manifiesto de tu App Web o Aplicación Web, en este archivo manifiesto le indicas al navegador que elementos deben de mostrarse para cada página Web, como el color, la pantalla de inicio, que elementos del navegador debe de mostrarse cuando el usuario inicia la navegación en una Web, etc. Estos detalles son parte del paradigma de las PWA (Progressive Web Apps).

También puedes controlar que en los dispositivo móviles se muestren un icono en especifico, un título, etc. En el siguiente ejemplo puedes ver un icono personalizado de acceso rápido que un usuario agrego a la pantalla de inicio de su dispositivo móvil

El archivo Manifest esta en formato JSON, la información se presenta como un Array de datos, el siguiente es un ejemplo base de un archivo manifest.json con datos esenciales:


{
  "name": "Nube Colectiva",
  "short_name": "NubeColectiva",
  "start_url": "/home",
  "display": "standalone",
  "background_color": "#fff",
  "description": "El conocimiento en la Nube es Colectivo. Compartimos Tutoriales y Recursos sobre Desarrollo Web, Back-end, Front-end, Aplicaciones Móviles, UX, UI, Seguridad Web, etc.",
  "icons": [{
    "src": "img/tactil/home48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "img/touch/home72.png",
    "sizes": "72x72",
    "type": "image/png"
  },
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store"
  }]
}

{

"name": "Nube Colectiva",

"short_name": "NubeColectiva",

"start_url": "/home",

"display": "standalone",

"background_color": "#fff",

"description": "El conocimiento en la Nube es Colectivo. Compartimos Tutoriales y Recursos sobre Desarrollo Web, Back-end, Front-end, Aplicaciones Móviles, UX, UI, Seguridad Web, etc.",

"icons": [{

"src": "img/tactil/home48.png",

"sizes": "48x48",

"type": "image/png"

}, {

"src": "img/touch/home72.png",

"sizes": "72x72",

"type": "image/png"

"related_applications": [{

"platform": "play",

"url": "https://play.google.com/store"

}]

}

Como puedes ver hay datos de muchos tipos que puedes usar en el archivo manifest.json si deseas conocer sobre los tipos de datos que puedes usar en un archivo JSON te recomendamos leer nuestro artículo Tipos de Datos que podemos usar en JSON.

Estructura o datos de un archivo Manifest JSON

Vamos a explicar para que sirven los elementos más importantes del archivo Manifest, veamos:

name

Sirve para definir como se llama tu Aplicación Web, este nombre se muestra cuando un icono de acceso directo a tu aplicación en la pantalla de inicio de tu dispositivo.

short_name

Con este dato mostramos un nombre mas corto de la aplicación Web, el dispositivo muestra este nombre corto cuando no hay espacio para mostrar el nombre completo e la pantalla de inicio del dispositivo.

start_url

Acá definimos la URL que navegará el usuario cuando este haga clic en el icono de tu aplicación.

display

En este dato especificamos como el usuario visualizará nuestra página Web al visitarla, las opciones que puedes aplicar son:

fullscreen: Se usará todo el espacio del navegador para visualizar la página Web.
standalone: La Web usará sus propios elementos o estilos como una ventana diferente, su propio icono, etc.
minimal-ui: Usará los elementos mínimos para visualizar la Web.
browser: La Web se abre en una pestaña o ventana nueva. (Este valor es el predeterminado)

background_color

Acá especificamos el color de Fondo para la aplicación Web.

description

Nos permite crear una descripción de lo que trata el sitio Web.

icons

Acá le decimos al dispositivo que use uno de los iconos según sea la circunstancia como el icono de acceso directo en la pantalla de inicio , para una lista de aplicaciones cada una con su icono, etc. Los datos que pueden usarse en este dato son:

sizes: Acá definimos las dimensiones de la imagen.
src: La ruta en donde se encuentra la imagen.
type: El formato de la imagen.
purpose: Aquí le indicamos el objetivo o propósito de la imagen, este dato puede tener las siguientes opciones:
- insignia: La imagen debe mostrarse en donde las restricciones de espacio y/o los requisitos de color son diferentes al icono de la Aplicación.
- masked: Cualquier parte de esta imagen que se encuentre fuera del alcance de visualización correcta, puede ser ignorada y por ende enmascarada o masked por el dispositivo.
- anyone: Esta imagen o icono puede mostrarse en cualquier contexto (Este valor es el predeterminado)

Lo genial es que puedes tener más de un diseño del icono de tu aplicación Web.

related_applications

Con esta opción le decimos al usuario que contamos con aplicaciones en la Play Store o iTunes

Esta opción tiene las siguientes opciones:

platform: Acá especificamos el lugar o la plataforma en donde esta alojada la aplicación.
url: Aquí puedes especificar la URL en donde se encuentra la aplicación.
id: el identificador de la aplicación en la Plataforma o Store.

Veamos un ejemplo del Array de este dato:


"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id333333333"
  }]

"related_applications": [

{

"platform": "play",

"url": "https://play.google.com/store/apps/details?id=com.example.app1",

"id": "com.example.app1"

}, {

"platform": "itunes",

"url": "https://itunes.apple.com/app/example-app1/id333333333"

}]

orientation

Aca indicamos la orientación que debe tener la Web al visualizarse en los dispositivos móviles, puedes usar los siguientes valores

any: Cualquier orientación.
natural: De manera normal.
landscape: De tipo paisaje.
landscape-primary: Paisaje Primario.
landscape-secondary: Paisaje Secundario.
portrait: Retrato
portrait-primary: Retrato Primario
portrait-secondary: Retrato Secundario.

A continuación un ejemplo de orientación portrait y landscape:

theme_color

Con esta opción definimos el color para la aplicación Web


"theme_color": "#4094c5"

// Si deseas puedes escribir el nombre del color 
"theme_color": "burlywood"

"theme_color": "#4094c5"

// Si deseas puedes escribir el nombre del color

"theme_color": "burlywood"

Estos son los datos más importantes que debe llevar un archivo manifest.json si deseas conocer más opciones puedes visitar este enlace.

Como implementar Manifest JSON en una Web

Para integrar Manifest en tu Web crea un archivo con el nombre de archivo y la extensión JSON llamado manifest.json este archivo se debe de colocar entre las etiquetas <head></head> de tu código HTML


<html lang="es">
<head>
    <meta charset="utf-8"/>
    <title>Mi Página Web</title>

    <!-- Coloca acá el archivo Manifest.json-->

    <link rel="manifest" href="manifest.json">

</head>

<body>

    <!--  Contenido de la página HTML -->
	
</body>
</html>

<head>

<title>Mi Página Web</title>

</head>

<body>

</body>

</html>

Este archivo manifest.json lo puedes crear en el directorio principal de tu proyecto Web o en un directorio.

Con esto ya tenemos listo el archivo y para poder comprobar si tu archivo Manifest JSON esta funcionando correctamente, puedes usar Chrome DevTools dirigiéndote a la pestaña Application y en la parte izquierda la opción Manifest.

Cuando una Web no tiene el archivo manifest.json Chrome DevTools te muestra el siguiente mensaje:

Y si una Página Web si tiene el archivo manifest.json nos muestra los siguientes datos que hemos definido en dicho archivo:

Notas

El Framework para el desarrollo de interfaces React JS incluye esta etiqueta al crear un nuevo proyecto, la versión de React que probamos en donde viene esta etiqueta Manifest JSON es la versión de React JS 16.8.5
Puedes agregar mas opciones según los que necesites hacer. Si deseas conocer más opciones puedes visitar este enlace.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.