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.
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](https://web.developers.google.cn/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=7&hl=es-419)
¿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
- 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.
Conclusión
- 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. - 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.