Agrega un manifiesto de aplicación web con Create React App

De forma predeterminada, Create React App incluye un manifiesto de app web que permite que cualquier persona instale tu aplicación de React en su dispositivo.

Houssein Djirdeh

Create React App (CRA) incluye un manifiesto de app web de forma predeterminada. Si modificas este archivo, podrás cambiar la forma en que se muestra tu aplicación cuando se instale en el dispositivo del usuario.

Ícono de una app web progresiva en la pantalla principal de un teléfono celular

¿Por qué es útil?

Los archivos de manifiesto de apps web proporcionan la capacidad de cambiar el aspecto de una aplicación instalada en la computadora de escritorio o el dispositivo móvil del usuario. Si modificas las propiedades del archivo JSON, puedes modificar varios detalles de tu aplicación, incluidos los siguientes:

  • Nombre
  • Descripción
  • Ícono de la aplicación
  • Color del tema

La documentación de MDN abarca todas las propiedades que se pueden cambiar en detalle.

Modifica el manifiesto predeterminado

En CRA, un archivo de manifiesto predeterminado, /public/manifest.json se incluye automáticamente cuando se crea una app nueva:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Esto permite que cualquier usuario instale la aplicación en su dispositivo y vea algunos detalles predeterminados de la aplicación. El archivo HTML, public/index.html, también incluye un elemento <link> para cargar el manifiesto.

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

Este es un ejemplo de una aplicación compilada con CRA que tiene un archivo de manifiesto modificado:

Para saber si todas las propiedades funcionan correctamente en este ejemplo, haz lo siguiente:

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completapantalla completa.
  • Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  • Haz clic en la pestaña Application.
  • En el panel Application, haz clic en la pestaña Manifest.

La pestaña Manifiesto de DevTool muestra las propiedades del archivo de manifiesto de la app.

Conclusión

  1. Si compilas un sitio que crees que no es necesario instalar en un dispositivo, quita el manifiesto y el elemento <link> del archivo HTML que lo señala.
  2. Si deseas que los usuarios instalen la aplicación en sus dispositivos, modifica el archivo de manifiesto (o crea uno si no usas CRA) con las propiedades que desees. En la documentación de MDN, se explican todos los atributos obligatorios y opcionales.