Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • ¿Por qué resulta útil?
  • Modificar el manifiesto predeterminado
  • Conclusión

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

Un manifiesto de aplicación web se incluye de forma predeterminada en Create React App y permite que cualquiera pueda instalar su aplicación React en su dispositivo.

Apr 29, 2019 — Actualizado May 19, 2021
Available in: English y Português
Appears in: React
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
En esta página
  • ¿Por qué resulta útil?
  • Modificar el manifiesto predeterminado
  • Conclusión
Si no sabes cómo funcionan los archivos de manifiesto de aplicación web, consulta primero la guía Agregar un manifiesto de aplicación web.

Create React App (CRA) incluye un manifiesto de aplicación web de forma predeterminada. La modificación de este archivo te permitirá cambiar la forma que se muestra tu aplicación cuando se instala en el dispositivo del usuario.

A progressive web app icon on a mobile phone's home screen

¿Por qué resulta útil? #

Los archivos de manifiesto de aplicación web ofrecen la posibilidad de cambiar el aspecto de una aplicación instalada en el escritorio o en el dispositivo móvil del usuario. Al modificar las propiedades en el archivo JSON, puedes modificar una serie de detalles de tu aplicación, incluyendo su:

  • Nombre
  • Descripción
  • Icono de la aplicación
  • Color del tema

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

Modificar el manifiesto predeterminado #

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

{
"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 a cualquiera instalar la aplicación en su dispositivo y ver algunos detalles por defecto de la aplicación. El archivo HTML public/index.html, también incluye un <link> para cargar el manifiesto.

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

A continuación, se muestra un ejemplo de una aplicación creada con CRA que tiene un archivo de manifiesto modificado:

Para saber si todas las propiedades funcionan correctamente en este ejemplo:

  • To preview the site, press View App. Then press Fullscreen fullscreen. - Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  • Click the Application tab.

  • En el panel de Aplicación, haga clic en la pestaña Manifiesto.

DevTool's Manifest tab shows the properties from the app manifest file.

Conclusión #

  1. Si estás creando un sitio que crees que no necesita ser instalado en un dispositivo, elimina el manifiesto y el elemento <link> en el archivo HTML que apunta a él.
  2. Si deseas que los usuarios instalen la aplicación en su dispositivo, modifica el archivo de manifiesto (o crea uno si no estás usando CRA) con las propiedades que desees. La documentación MDN explica todos los atributos obligatorios y opcionales.
Última actualización: May 19, 2021 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.