Genera tu Manifest JSON usando Modyo

Un manifest.json contiene la información necesaria para permitir al navegador interactuar con tu PWA (progressive web application o aplicación web progresiva). Desarrollar PWAs es costoso y crear los archivos de configuración es una de las partes más aburridas del trabajo. En Modyo ofrecemos una manera de generar el manifest.json automáticamente para evitar demoras en tu flujo de trabajo.

¿Qué es un PWA y por qué es importante manifest.json?

Un PWA es una aplicación web que puede ser vista desde la web o instalada en un dispositivo móvil. El objetivo es crear una experiencia muy similar entre aplicación web y aplicación móvil sin sacrificar los beneficios de ambos. Esto trae múltiples beneficios a diferencia de crear una aplicación móvil tradicional:

• Las PWAs son más ligeras y rápidas ya que se evitan los paquetes adicionales necesarios de los mercados de aplicaciones como Apple App Store o Google Play Store.

• Funcionan sin necesidad de estar conectado o con poca conexión a Internet.

• El usuario no tiene que preocuparse por instalar actualizaciones.

El manifest.json actúa como el vínculo entre un dispositivo (computadora o móvil) y el PWA. El archivo contiene la configuración para establecer los detalles de la comunicación como: la URL del PWA, el ícono de la app, el tipo de ventana a abrir, etc. Esto tiene como resultado que cuando un usuario visita tu página web, puede ser invitado a instalar tu PWA o ser redirigido invisiblemente si utiliza algún dispositivo móvil.

Crear un manifest.json en Modyo

Este archivo es de suma importancia y como tal, cualquier error en esta parte puede ser catastrófico para el PWA. Con Modyo, ya no tienes que preocuparte de escribir este archivo desde cero.  Solo tienes que dejar que el sistema genere automáticamente tu manifest.json:

El primer paso es ir dentro de la configuración de tu sitio, en la sección PWA, activando la opción de “Habilitar manifiesto PWA” se abrirá la siguiente ventana:

Aquí debes insertar la información que utilizará el sistema operativo movil para desplegar tu PWA, entre los datos que necesitarás están: 

• Nombre de la aplicación: El nombre completo de la aplicación que aparecerá al ser instalada.
• Nombre corto: Este nombre aparece cuando el nombre completo es demasiado largo para el usuario.
• Color del tema: Define el color de la barra superior, debe coincidir con el valor de meta theme-color.
• Color del fondo: Al ser iniciado en móvil, este color es usado de fondo.
• Display: El atributo display define que tipo de ventana se abre al utilizar PWA. Por lo general, recomendamos el uso de display Standalone ya que es la opción estandar.
• Orientación: En móvil, define en qué orientación se abre la ventana.
• Scope: Define los límites en donde la app considera dentro de su alcance. El URL de inicio debe estar dentro del alcance.
• URL de inicio: El primer URL a donde se dirige la app al ser iniciada.
• Ícono: Este archivo PNG necesita ser de 512px mínimo por que se generan 9 versiones de diferente tamaño y se muestra el que mejor luce en la pantalla del usuario.

Una vez que termines de llenar la información, haces click en generar y verás el manifest.json generado:

Ahora que ya tienes un manifest.json con toda la información necesaria para desplegar correctamente tu aplicación, estás un paso más cerca de migrar tu sitio a una PWA.

Photo by Pavan Trikutam on Unsplash