Manifest Generator for Web Apps

Generador de Manifiestos para Web Apps

Crea fácilmente el archivo manifest.json para tu Progressive Web App

Info Básica

Nombre corto para espacios reducidos.
Página que se carga al iniciar la aplicación.

Presentation

Icons

It is recommended to add icons in various sizes. | Se recomienda añadir iconos en varios tamaños.

Opciones Avanzadas

Determina qué páginas forman parte de la PWA.

Opciones Avanzadas Adicionales

Resultado: manifest.json

{
    // Tu manifiesto aparecerá aquí
}

Código para incluir en HTML

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

¿Qué es un PWA y cómo integrar un manifest?

Una Progressive Web App (PWA) es una aplicación web que utiliza tecnologías modernas para ofrecer una experiencia similar a la de una aplicación nativa. Las PWAs permiten funcionalidades como notificaciones push, trabajo offline y una alta responsividad en distintos dispositivos.

El archivo manifest.json es un componente esencial en una PWA, ya que define propiedades como el nombre de la aplicación, colores, iconos y la URL de inicio. Esto permite que el navegador instale y ejecute la aplicación de forma nativa.

Instrucciones de Implementación

  1. Descarga los archivos: Descarga el archivo manifest.json y los íconos generados.
  2. Coloca los archivos en tu servidor: Sube los archivos a la raíz de tu sitio web o en una carpeta específica.
  3. Vincula el manifest en tu HTML: Añade el siguiente código en la sección <head>: 
    <link rel="manifest" href="/manifest.json">
  4. Agrega etiquetas meta adicionales: Incluye las siguientes etiquetas en el <head> para mejorar la integración en dispositivos móviles: 
    <meta name="theme-color" content="#003366">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Tu App">
<link rel="apple-touch-icon" href="/icon-192x192.png">
  5. Implementa un Service Worker: Para funcionalidades offline, debes implementar un Service Worker.