Añadir a la pantalla principal
Aquí, el banner de instalación de la aplicación web se centra en la aplicación web, con la función de agregar a la pantalla de inicio.
Soporte del navegador para agregar a la pantalla de inicio
Actualmente, la funcionalidad Agregar a la pantalla de inicio es compatible con:
- Cromo
- Safari de iOS
Puede ver el estado más reciente de compatibilidad del navegador con esta función aquí.
En Android
En Android, el banner "agregar a la pantalla de inicio" aparece automáticamente si cumples con ciertos requisitos. Así es como debería verse en Android:
Agregar al mensaje de la pantalla de inicio cuando se inicia la aplicación


Requisitos
incluir un manifest.json
archivo con las siguientes propiedades:
short name
name
192x192
tamaño delpng
iconostart_url
- incluir un trabajador del servicio que esté registrado y activado
- el sitio web servido a través de HTTPS (aún puede probar esto con localhost sin HTTPS)
- el sitio web cumple con las heurísticas de participación definidas por Chrome
manifest.json
{ "name": "FreeCodeCamp", "short_name": "FreeCodeCamp", "theme_color": "#00FF00", "background_color": "#00FF00", "display": "standalone", "Scope": "/", "start_url": "/", "icons": [ { "src": "assets/images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
name
es el nombre de la aplicación web. (Se mostrará en la pantalla de inicio)short name
es el nombre corto de la aplicación web. (Se mostrará debajo del icono del menú del teléfono)theme_color
es el color de la parte superior del navegador.background_color
es el color de fondo de la pantalla de inicio.display
es la forma en que debería mostrarse la aplicación web una vez iniciada en el teléfono.start_url
Defina la URL de inicio del sitio web.icons
es una matriz que almacena todas las imágenes, ubicación, tamaño y tipo.
En otros dispositivos
Aunque este método no funciona en iOS y Windows, existe un método alternativo.
iOS
En iOS, el botón "agregar a la pantalla de inicio" debe agregarse manualmente. Agregue las siguientes metaetiquetas a la sección principal de su HTML para admitir el ícono de la aplicación web iOS.
Ventanas
En Windows Phone, agregue las siguientes metaetiquetas a la sección principal de su HTML: