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

De forma predeterminada, se incluye un manifiesto de app web en Create React App y 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. Modificando esto te permitirá cambiar la forma en que se muestra tu aplicación cuando se instale en el dispositivo del usuario.

Un ícono de app web progresiva en la pantalla principal de un teléfono móvil

¿Por qué es útil?

Los archivos de manifiesto de una aplicación web permiten cambiar la forma en que un en la computadora o el dispositivo móvil del usuario. Modificando propiedades en el archivo JSON, puedes modificar varios detalles en tu para su aplicación, como los siguientes:

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

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

Cómo modificar 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 app en su dispositivo y vea algunas 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 manifiesto modificado archivo:

Para saber si todas las propiedades funcionan correctamente en este ejemplo, sigue estos pasos:

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  • Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
  • Haz clic en la pestaña Application.
  • En el panel Application, haz clic en la pestaña Manifest.

En la pestaña Manifiesto de la Herramienta para desarrolladores, se muestran las propiedades del archivo de manifiesto de la app.

Conclusión

  1. Si estás creando un sitio que consideras que no necesita instalarse en una quita el manifiesto y el elemento <link> en el archivo HTML que señala.
  2. Si quieres que los usuarios instalen la aplicación en sus dispositivos, modifica el archivo de manifiesto (o crea uno si no usas CRA) con cualquier propiedades que te gustan. El Documentación de MDN en la que se explican todos los atributos obligatorios y opcionales.