Manifiesto de la aplicación web: sitios web abiertos como aplicaciones nativas en dispositivos móviles

Las aplicaciones nativas para teléfonos inteligentes y tabletas siguen siendo populares, pero no siempre necesarias. En su lugar, puede crear aplicaciones web utilizando HTML5, CSS3 y JavaScript. Gracias a las API de JavaScript, tiene acceso al acelerómetro, lo que le permite reconocer gestos y reaccionar en consecuencia. El manifiesto de la aplicación web le permite agregar características de aplicaciones clásicas a su aplicación web, incluidos íconos de inicio especiales y nombres que son más cortos que los títulos generalmente muy largos de los documentos HTML.

Crear e «Instalar» un Manifiesto

Si tiene experiencia en la programación de aplicaciones nativas para Android o iOS, está familiarizado con las opciones de configuración de las aplicaciones. Además de configurar un icono y un nombre para el iniciador, también puede definir la orientación preferida o ejecutar la aplicación en modo de pantalla completa, sin barra de acción. Sin embargo, estas y otras características no se pueden configurar en HTML5, CSS3 o JavaScript. En su lugar, necesitará el llamado manifiesto de la aplicación web. Este archivo de texto contiene opciones de configuración en forma de un objeto JSON. El archivo de manifiesto se implementa como un elemento de enlace en el encabezado del documento HTML.

1

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

Es importante especificar el enlace con un real atributo para indicar la referencia al archivo de manifiesto. Definiremos cada característica de la aplicación web en el archivo de manifiesto en el siguiente paso. Este archivo de manifiesto no debe confundirse con el archivo con el mismo nombre que necesita para la «caché de la aplicación». Este último se implementa mediante un elemento en lugar de un elemento de enlace.

Dale a la aplicación web un aspecto de aplicación nativa

Al cambiar algunas configuraciones en el manifiesto, puede hacer que la aplicación web se vea y actúe como una aplicación nativa clásica. Esto requiere que la aplicación web se inicie desde un acceso directo en la pantalla de inicio del teléfono inteligente o tableta. Para crear dicho acceso directo, elija el elemento del menú de Chrome «Agregar a la pantalla de inicio». Cromo es actualmente el único navegador que admita el manifiesto de la aplicación web. En el manifiesto, puede definir un nombre para el acceso directo de la pantalla de inicio que sea más corto que el título estándar del documento HTML. Aunque «name» y «short_name» son dos propiedades diferentes para el título del acceso directo, «short_name» sobrescribe el valor «name». Por lo tanto, si existe «nombre_corto», se ignorará «nombre».

1
2

"name": "Long name for web app",
"short_name": "Short name"

También puede utilizar un icono de acceso directo individual y definir el tamaño y la densidad de píxeles. Estos son referenciados por la matriz JSON.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

"icons": [
  {
    "src": "launcher-icon-36x36-1x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "1"
  }
  {
    "src": "launcher-icon-36x36-2x.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": "2"
  }
]

Según el dispositivo, se mostrará el icono correspondiente según los valores de «tamaños» y «densidad». Si no se puede encontrar un icono preciso, Chrome elegirá el que mejor se adapte. Por lo general, un acceso directo a la pantalla de inicio abriría un sitio web normal dentro del navegador, incluida la barra de navegación. Para deshabilitar la barra de navegación, use la propiedad «display». Luego, la aplicación web se ve idéntica a una aplicación nativa.

1

"display": "standalone"

El valor «independiente» deshabilita la barra de navegación del navegador; el otro valor, «pantalla completa», deshabilita la «barra de acción» del dispositivo. Especialmente los juegos se ejecutan en modo de pantalla completa. Pero no lo confundas con el modo de pantalla completa del navegador. Actualmente, parece que Chrome no admite la propiedad «pantalla completa». Nuestro dispositivo de prueba ignora esta propiedad y utiliza «independiente» en su lugar, que es el recurso predeterminado si el navegador no admite la pantalla completa. Con una barra de navegación deshabilitada, la URL del sitio web ya no es visible. Pero si hace clic en un enlace que conduce a otro dominio, el navegador muestra una pequeña barra de estado con la URL en la parte superior de la pantalla, por lo que siempre sabrá dónde se encuentra. También puede definir la orientación del dispositivo para la aplicación web. La aplicación se ejecutará independientemente de la orientación del dispositivo en modo horizontal o vertical, vertical o vertical.

1

"orientation": "portrait"

Además, es posible definir una URL de inicio para la aplicación web. La aplicación web comienza con una URL separada.

1

"start_url": "webapp.html"

Si esta propiedad no está configurada, utiliza la URL desde la que se agregó el sitio web a la pantalla de inicio. Esto le permite, por ejemplo, obligar a una aplicación web a comenzar con su página de inicio. A veces, un desarrollador quiere saber si su sitio web fue llamado desde la pantalla de inicio o como un sitio web normal. Para averiguarlo, puede desviar «start_url» de su uso previsto simplemente agregando un parámetro que se puede usar para determinar las llamadas desde la pantalla de inicio más adelante.

1

"start_url": "webapp.html?homescreen=1"

Puede consultar este parámetro mediante JavaScript o un lenguaje de secuencias de comandos del lado del servidor. Luego, las herramientas de análisis pueden sacar conclusiones de dónde se inició el sitio web o la aplicación web.

No es posible realizar cambios posteriores en las propiedades del manifiesto

Si se agregó un sitio web como acceso directo a la pantalla de inicio, ya no podrá cambiar las propiedades del acceso directo. Si desea cambiar, por ejemplo, el valor de «orientación», sus usuarios primero deberán eliminar el acceso directo de la aplicación web existente y agregar el sitio web a la pantalla de inicio nuevamente. Solo entonces se puede leer el archivo de manifiesto.

Conclusión

Una vez que se agrega una aplicación web como acceso directo a la pantalla de inicio, parece una aplicación nativa. Con la técnica HTML5 adecuada, puede cargar la aplicación web como una aplicación nativa en el teléfono inteligente o la tableta (indicar «caché de la aplicación») y guardar la configuración a través del «almacenamiento local» en el dispositivo. No se requiere una conexión a Internet para acceder a un sitio web. El único inconveniente con el manifiesto de la aplicación web es el enlace que falta para agregar el sitio web a la pantalla de inicio. Deberá explicar a los usuarios que deben ir al menú del navegador y elegir «Agregar a la pantalla de inicio». Además, necesitará la versión actual de Chrome (39) en los dispositivos Android de sus usuarios.

(dpe)