Cómo agregar a la pantalla de inicio en una aplicación web progresiva

Programación

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

rápido lanzamiento

Requisitos

incluir un manifest.jsonarchivo con las siguientes propiedades:

  • short name
  • name
  • 192x192tamaño del pngicono
  • start_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 }
  • namees el nombre de la aplicación web. (Se mostrará en la pantalla de inicio)
  • short namees 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: