---
title: El nuevo manifiesto de aplicaciones web
description: Gracias al fichero manifest.json se acortan las distancias en cuanto a funcionalidad con la plataforma nativa.
url: https://www.felixsanz.dev/es/articulos/el-nuevo-manifiesto-de-aplicaciones-web
language: es
published: 2015-04-09
updated: 2016-07-02
tags:
  - development
alternate-en: https://www.felixsanz.dev/articles/the-new-web-application-manifest
---

# El nuevo manifiesto de aplicaciones web

## Introducción

El [manifiesto para aplicaciones web](https://w3c.github.io/manifest) es un **estándar de la W3C** para definir, mediante un fichero JSON (usualmente `manifest.json`), como se comporta nuestro sitio web a la hora de actuar como una **aplicación web**.

Hasta ahora nuestra opción era depender de la etiqueta `<title>` para el título de la aplicación y un montón de etiquetas `<link>` y `<meta>` (`apple-touch-icon`, `icon`, `msapplication`, etc.) para gestionar los iconos a distintas resoluciones. Cuando un usuario añadía nuestra web a la pantalla de inicio de su teléfono móvil, aparecía utilizando este título e iconos dependiendo de la plataforma que tuviese el usuario. Esta técnica no era muy amigable para los desarrolladores y **no ofrecía flexibilidad** ni facilidades en el mantenimiento de estas directrices.

La W3C se puso las pilas y ahora podemos hacer uso del manifiesto para aplicaciones web.

## Creando el manifiesto

Para crear nuestro manifiesto utilizaremos un fichero `.json`, que se puede llamar como nosotros queramos (usualmente es `manifest.json`). Más o menos un ejemplo básico sería el siguiente:

```json
{
  "short_name": "felixsanz",
  "name": "Félix Sanz | Blog",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "landscape"
}
```

Estas propiedades vienen a decir lo siguiente:

`short_name`

Es el nombre corto de la aplicación y se usará por defecto.

`name`

a versión larga del nombre.

`icons`

Especifica una lista de imágenes que se usarán dependiendo del dispositivo.

`start_url`

Especifica la dirección que cargará al abrir la aplicación web.

`display`

El modo de presentación que obtendrá nuestra aplicación al abrirse. Puede ser `fullscreen`, `standalone`, `minimal-ui` o `browser`. Esto permite también hacer uso de `display-mode` en nuestros `@media` para aplicar estilos CSS dependiendo del *display*.

`orientation`

La orientación que adquiere nuestra aplicación al abrirse. Puede ser `portrait` o `landscape`.

Puedes consultar el resto de propiedades en el [estándar oficial](https://w3c.github.io/manifest/).

## Utilizando el manifiesto

Para utilizar el manifiesto basta con incluir una referencia en la cabecera de nuestro código HTML:

```html
<link rel="manifest" href="/manifest.json">
```

Y eso es todo, haciendo uso de funciones como "[Añadir a pantalla de inicio](https://developer.chrome.com/multidevice/android/installtohomescreen)" del navegador Chrome para Android, los usuarios utilizarán nuestro sitio web como si de una aplicación nativa se tratase.