Una app web puede instalarse en el móvil
Una app web instalable es una página que el navegador deja añadir a la pantalla de inicio. Tiene su nombre y su icono, como cualquier otra aplicación, y para eso necesita un archivo llamado manifiesto.
Piensa en la app del comedor de tu universidad. Con un icono en el móvil, se abre en un toque y sin la barra del navegador.
Al terminar esta lección
Nota
Puedo describir qué necesita una app web para poder instalarse.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Manifiesto | un archivo que dice al móvil el nombre, los iconos y los colores de la app | |
| Icono | la imagen que representa la app en la pantalla de inicio | |
| Modo de pantalla | cómo se muestra la app al abrirla | standalone |
| Dirección de inicio | la página que se abre primero | |
| Conexión segura | una dirección que empieza por https |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
El manifiesto es un archivo de datos
El manifiesto es un archivo en formato JSON, un texto con llaves que cualquier lenguaje lee. La página lo enlaza desde su head.
El navegador lo lee para saber cómo presentar la app: su nombre, sus iconos, su color y qué página abrir.
Un manifiesto pequeño
{
"name": "Comedor universitario",
"short_name": "Comedor",
"start_url": "/",
"display": "standalone",
"theme_color": "#2f6f4f",
"background_color": "#ffffff",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Ejemplo resuelto: qué dice cada campo
| Campo | En el ejemplo | Para qué sirve |
|---|---|---|
| name | Comedor universitario | El nombre completo de la app |
| short_name | Comedor | El nombre corto, bajo el icono |
| start_url | / | La página que se abre primero |
| display | standalone | Se abre sin las barras del navegador |
| theme_color | #2f6f4f | El color de la barra superior |
| background_color | #ffffff | El color que se ve mientras la app arranca |
| icons | dos imágenes PNG | Una de 192 y otra de 512 píxeles |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
El laboratorio comprueba siete campos
La app de hábitos del laboratorio tiene su propio manifiesto. El script siguiente comprueba siete campos y los marca como present (presente) o MISSING (falta).
También mira si los archivos de los iconos existen. Sus palabras están en inglés, porque son del laboratorio. Lee qué campo falta.
Comprobar los campos del manifiesto
docker exec jupyter python3 steps/manifest.pySe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Contar las líneas que nombran un icono
docker exec jupyter grep -c icon app/manifest.webmanifestSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
La instalación depende del navegador
Un navegador suele pedir tres cosas para ofrecer la instalación. Primero, un manifiesto con nombre, dirección de inicio y modo de pantalla. Después, iconos de 192 y de 512 píxeles. Por último, una conexión segura.
Las reglas exactas cambian entre navegadores y versiones. Mira la opción de instalar en el menú de tu propio navegador, y no des nada por hecho.
Ejemplo resuelto: los modos de pantalla
| Valor de display | Cómo se ve | Cuándo usarlo |
|---|---|---|
| browser | Como una pestaña normal | Una web que no necesita parecer una app |
| minimal-ui | Con muy pocos controles del navegador | Cuando conviene dejar atrás y recargar |
| standalone | Sin barras, como una app | La mayoría de las apps |
| fullscreen | Toda la pantalla | Juegos y vídeo |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que con un manifiesto la app ya funciona sin conexión. El manifiesto solo dice cómo se presenta la app. Que abra sin red lo decide otra pieza, el service worker, que se ve en la lección siguiente.