Se incluye un manifiesto de app web en Crear app de React de forma predeterminada y permite que cualquier persona instale tu aplicación de React en su dispositivo.
Crear app de React (CRA) incluye un manifiesto de app web de forma predeterminada. Si modificas este archivo, podrás cambiar cómo se muestra tu aplicación cuando se instale en el dispositivo del usuario.
¿Por qué es útil?
Los archivos de manifiesto de la app web permiten cambiar el aspecto de una aplicación instalada en la computadora de escritorio o el dispositivo móvil del usuario. Cuando modificas las propiedades del archivo JSON, puedes modificar varios detalles de la aplicación, incluidos los siguientes:
- Nombre
- Descripción
- Ícono de la app
- Color del tema
La documentación de MDN abarca todas las propiedades que se pueden cambiar en detalle.
Cómo modificar el manifiesto predeterminado
En CRA, un archivo de manifiesto predeterminado, /public/manifest.json se incluye automáticamente cuando se crea una nueva app:
{
"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 persona 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" />
A continuación, se muestra un ejemplo de una aplicación compilada con CRA que tiene un archivo de manifiesto modificado:
Para averiguar 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
. - Presiona "Control + Mayús + J" (o bien "Comando + Opción + 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.
Conclusión
- Si creas un sitio que crees que no necesita instalarse en un dispositivo, quita el manifiesto y el elemento
<link>del archivo HTML que se dirige a él. - 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 las propiedades que desees. En la documentación de MDN, se explican todos los atributos obligatorios y opcionales.