PWA: Manifest

Comunicarse con el navegador

El archivo manifest.json es el que le indica al navegador la configuración de la aplicación, y lo usan Chrome y Edge, para validar la instalación.

La estructura tiene un primer bloque de información y configuración:

"$schema": "http://json.schemastore.org/web-manifest",
"name": "PWA",
"short_name": "pwa",
"description": "Probant PWA",
"theme_color": "#f4af7c",
"background_color": "#676262",
"start_url": "/pwa/",
"orientation": "portrait",
"display": "standalone",
"lang": "es_ES",

La etiqueta schema, marca la estructura base que estamos usando, es solo a título informativo.

name y short name: identifican a la aplicación y se usan como nombre a colocar en los accesos que se colocan en la pantalla de inicio.

description: es una b¡frase que describe lka utilidad de la aplicación y que usan los navegadores en el proceso de instalación según consideran.

theme_color: es el color de la barra de estado de la pantalla del dispositivo, solo lo cambian algunos sistemas.

background_color: es el color de fondo en la pantalla de inicio al arrancar la aplicación ya instalada que incluye este fondo, el nombre y el icono de la aplicación.

start_url: es el camino de acceso a los archivos de la aplicación desde la raíz del servidor en el que está hospedado. Si no coincide exactamente no reconoce bien la aplicación.

orientation: se puede forzar la orientación de la aplicación, aunque sigue respondiendo a la orientación del dispositivo. Puede omitirse.

display: indica el modo de visualización de la aplicación:

• fullscreen: Se utiliza toda la pantalla disponible.
• standalone: La aplicación se mostrará como una aplicación independiente. Así la aplicación puede tener su propia ventana, su propio icono en el lanzador de aplicaciones, etc. En este modo, the user agent excluirá los elementos de interfaz para controlar la navegación, pero puede incluir otros elementos como la barra de estado.
• minimal-ui: La aplicación se mostrará como una aplicación independiente, pero tendrá un mínimo de elementos de interfaz para controlar la navegación. Estos elementos podrán vari,xar según navegador.
• browser: La aplicación se abrirá en una pestaña nueva del navegador o una ventana nueva, dependiendo del navegador y plataforma. Este es valor por defecto.

lang: el idioma en el que está la aplicación (si no es multidioma).

También se puede utilizar:

dir: para indicar la dirección del texto:

• ltr (izquierda a derecha)
• rtl (derecha a izquierda)
• auto valor por defecto que lo coge de la configuración del navegador.

Los iconos

A continuación listamos los iconos disponibles:

{
"src": "img/icons/maskable_icon.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "img/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},

Todos incluyen la ubicación (partiendo de la carpeta de la aplicación), el tamaño en pixeles y el tipo de archivo.

Al principio le indicamos el archivo enmascarado que tiene fondo transparente dándole una forma circular o con las esquinas redondeadas para que lo usen aquellos navegadores que lo prefieren.

Los tamaños más usuales son: 72×72, 96×96, 128×128, 192×192, 384×384 y 512×512

También se usan: 144×144 y 1024×1024