Manifiesto de PWA: crear su manifiesto de aplicación web de forma fácil

Un manifiesto de aplicación web configurado correctamente es crucial para el proceso de instalación de su PWA, ya que sin él, todo el proceso simplemente no es posible. Y, sorprendentemente, tampoco es tan difícil configurar correctamente el manifiesto de su aplicación web.

¿Para qué sirve?

El manifiesto de la aplicación web es una parte vital de su PWA, ya que determina cómo se presenta su aplicación al usuario en la pantalla de presentación y en la pantalla de inicio del usuario. Todas estas son etapas iniciales importantes que contribuyen a dar forma a las impresiones de los usuarios sobre su aplicación, por lo que es importante que lo haga bien.

Maneras de configurar tu manifest.json

Empezando desde cero

Con un poco de familiaridad con el formato de datos JSON, puede crear su propio manifiesto de aplicación web sin ningún esfuerzo.

Un manifest.json típico debería verse así:

 {
    "tema_color": "#f69435",
    "background_color": "#ffffff",
    "pantalla": "pantalla completa",
    "alcance": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "nombre_corto": "SimiCart",
    "description": "Soluciones de comercio electrónico de próxima generación para Magento",
    "iconos": [
        {
            "origen": "/icono-192x192.png",
            "tamaños": "192x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-256x256.png",
            "tamaños": "256x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-384x384.png",
            "tamaños": "384x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-512x512.png",
            "tamaños": "512x",
            "tipo": "imagen/png"
        }
    ]
}

Puede omitir algunas partes del código, pero todavía hay algunos miembros obligatorios, sin los cuales el usuario no podrá instalar su PWA:

 nombre, nombre corto, iconos, pantalla, start_url

• name : el nombre de su aplicación que se muestra debajo del ícono de su aplicación en la pantalla de inicio y en varios otros lugares. Mantenga el valor de su propiedad de nombre corto y simple.

• short-name : cuando el valor de la propiedad de su name no se ajusta a la pantalla del usuario, se utilizará el valor de esta propiedad. Se recomienda que su short-name tenga menos de 20 caracteres. De hecho, dispara para 10 caracteres.

• icons : los iconos de su aplicación, que pueden constar de varias imágenes para diferentes sistemas operativos y dispositivos. Puede definir un conjunto de iconos para que el navegador los use para agregar a la pantalla de inicio, la pantalla de bienvenida, etc.

Por ejemplo, solo iOS requiere 4 tamaños diferentes para 4 de su dispositivo:

• iPhone: 120 x 120 píxeles y 180 x 180 píxeles
• iPad Pro: 167 x 167 píxeles
• iPad y iPad mini: 152 x 152 píxeles

Incluso Google Chrome requiere al menos 2 tamaños diferentes para una usabilidad completa en iOS y Android:

• 512 x 512 píxeles
• 192 x 192 píxeles

Para que se llame a su icono de imagen, se utiliza un conjunto de propiedades, a saber, src , type y sizes .

• src : la ruta al archivo de imagen del icono
• types : el tipo de archivo de imagen
• sizes : ancho x alto de la imagen, en píxeles

 "iconos" : [ 
    {
       "fuente" : "/imgs/icono152.png",
       "tipo": "imagen/png",
       "tamaños": "192x192"
    },
    {
       "origen": "/imgs/icon215.png",
       "tipo": "imagen/png",
       "tamaños" : "512x512"
    }
]

• display : Indica cómo se debe mostrar la aplicación. Para una experiencia inmersiva y similar a la de una aplicación, se recomienda configurarlo en fullscreen (sin interfaz de usuario). Sin embargo, también están disponibles opciones como standalone , minimal-ui , que son menos costosas en términos de rendimiento, pero tienen el costo de perder la experiencia inmersiva (es posible que aún se muestre la barra de estado).

• start_url : indica la ruta desde la que se inicia su aplicación. Su valor start_url podría ser un simple / si su aplicación comienza desde el mismo directorio .root donde está almacenado su manifest.json .

Miembros opcionales

Ir por el libro es una cosa, pero siempre hay espacio para que intentes ser mejor. A continuación se encuentran nuestras claves recomendadas para un manifiesto de aplicación web mejor y más detallado:

• scope : limita el alcance al que puede llegar un usuario. Si el usuario navega fuera del alcance, vuelve a una página web normal dentro de una pestaña o ventana del navegador. Para definir el alcance de su sitio web, simplemente ingrese un / o ingrese la URL completa de su sitio web.

Notas :
– El comportamiento predeterminado del scope es el directorio desde donde se sirve su manifest.json .
– Cualquier enlace abierto en la aplicación web se representará dentro de la ventana de PWA existente. Para abrir cualquier enlace en una pestaña del navegador, debe agregar target="_blank" a la etiqueta <a> .
– start_url debe estar en el ámbito.

• background_color : indica el color de fondo en ciertos contextos de aplicaciones. Más específicamente, este campo se puede usar para establecer el color de fondo de la pantalla de bienvenida.

• theme_color : indica el color del tema de los elementos de la interfaz de usuario de la aplicación web, como la barra de direcciones. El cambio se aplica en todo el sitio y solo es efectivo cuando el sitio se inicia desde la pantalla de inicio.

Notas : sus configuraciones a nivel de página, por ejemplo, la metaetiqueta de color de tema: <meta name="theme-color" content="#3367D6"> , anulará el valor de su theme_color en el manifiesto de la aplicación web.

• description : Esto debería explicarse por sí mismo.

• shortcuts : define accesos directos a páginas dentro de la aplicación web. Se puede acceder a los accesos directos de la aplicación manteniendo presionado el ícono del iniciador de la aplicación en Android o haciendo clic con el botón derecho en el ícono de la aplicación en la barra de tareas (Windows)/el Dock (macOS).

 "atajos" : [
  {
    "name": "Notificaciones",
    "url": "/usuario/notificaciones/",
    "description": "Noticias que te has perdido"
  },
  {
    "name": "Crear nuevo pedido",
    "url": "/crear/pedir"
  },
  {
    "name": "Mi lista de deseos",
    "url": "/usuario/lista de deseos"
  }
]

Uso de un generador de manifiesto de aplicación web

Una forma más fácil y sin esfuerzo de hacer esto sería usar un generador de manifiesto de aplicación web. El generador toma su entrada y, en base a la cual, genera un manifiesto de aplicación web completamente funcional que se puede usar tal cual.

Vincula tu manifest.json

Cuando todo esté configurado correctamente, el siguiente paso es hacer referencia al manifiesto de la aplicación web en su encabezado HTML.

 <enlace rel="manifiesto" href="/manifest.webmanifest">

Después de hacer referencia al manifiesto de la aplicación web, todos los navegadores compatibles ahora deberían reconocer correctamente su manifest.json . Para obtener una lista completa de los navegadores compatibles actualmente, consulte CanIUse.

Conclusión

Y eso es todo para un simple manifiesto de aplicación web. No debería tomarle ningún tiempo crear un manifest.json completamente funcional. Y solo con algunos ajustes adicionales, su aplicación web puede instalarse como cualquier otra PWA.