Fundamentos de la web móvil

Seguro que has abierto una página web en el móvil y has tenido que pellizcar y ampliar para leer una sola línea. La página estaba hecha para una pantalla ancha y el móvil la dibujó pequeña. Unas pocas líneas de código le dicen al móvil cómo dibujarla bien, y esta lección las examina.

• Viewport (área de visualización): la parte de la pantalla en la que se dibuja la página.
• Adaptable (responsive): un diseño que cambia según el ancho de la pantalla.
• Media query: una regla de CSS que solo se aplica cuando se cumple una condición, por ejemplo un ancho mínimo.
• Manifiesto: un archivo pequeño que le dice al móvil el nombre, los iconos y los colores de una aplicación web.
• Service worker: un script que el navegador conserva y que puede responder a peticiones con una copia guardada.
• Caché: un almacén de copias guardadas de archivos.

ls app lista la aplicación web: una página, sus estilos, su script, un manifiesto, un service worker y dos iconos. El segundo script le pide tres de ellos al servidor de vista previa y muestra la respuesta. Cada uno responde 200, que significa que se encontró, y el manifiesto tiene su propio tipo, application/manifest+json. Ahora abre el enlace Preview en tu navegador, estrecha la ventana y mira cómo cambia el diseño.

El script lee index.html y busca una etiqueta meta llamada viewport. La encuentra, con width=device-width, initial-scale=1: dibujar la página tan ancha como la pantalla, a tamaño normal. Pruébalo: borra esa línea en JupyterLab, guarda, vuelve a ejecutar el script y dirá MISSING (falta). Un móvil dibujaría entonces la página como si la pantalla fuera mucho más ancha y la encogería.

La hoja de estilos es primero móvil: las reglas simples son las del móvil, y las media queries añaden reglas a medida que la pantalla se ensancha. El script encuentra tres. Dos son anchos, 600 px y 900 px, y la tercera no es un ancho sino una preferencia por el modo oscuro. Ensancha la ventana de tu navegador por encima de 600 px y el formulario se pone en una fila. Por encima de 900 px, la lista pasa a dos columnas.

La yema de un dedo cubre mucho más que un puntero de ratón y tapa lo que pulsa. Este laboratorio usa 44 píxeles como la línea que debe alcanzar un botón. El script lista cada tamaño de la hoja de estilos: el botón Add (Añadir) mide 32 px de alto, los botones de filtro 36 px y el botón redondo de «hecho» 30 por 30, así que cuatro tamaños están por debajo de 44. Son un poco pequeños a propósito, y arreglarlos es tu tarea.

El manifiesto es un archivo JSON. El script comprueba siete campos. Seis están presentes: el nombre, un nombre corto para debajo del icono, la página que se abre primero, cómo mostrarla (standalone, es decir, sin las barras del navegador), los iconos y el color de la barra superior. Uno está MISSING (falta), background_color, el color que se ve mientras arranca la aplicación. Los dos archivos de icono existen. Que un móvil ofrezca instalar la aplicación depende del navegador, así que busca la opción en el menú de tu propio navegador.

El service worker nombra una caché, habits-v1, y una lista de ocho archivos que guardar al instalarse. El script comprueba que cada uno exista, y siete existen. El octavo, /offline.html, no existe. Es un fallo real: si un solo archivo de la lista no se puede guardar, toda la instalación falla y nada funciona sin conexión. Un navegador solo permite service workers en una dirección segura, así que puede rechazar este en el enlace de vista previa: la consola de tu navegador lo dice.

Una aplicación nativa se crea para un solo sistema de móvil y se instala desde una tienda. Una aplicación web móvil es una página web. Tiene un solo código para todos los móviles, se actualiza en cuanto cambias los archivos y un enlace la abre. Puede guardar datos en el móvil, funcionar sin conexión con un service worker y, en muchos navegadores, añadirse a la pantalla de inicio. Llega menos al móvil: lo que puede usar, como las notificaciones o trabajar en segundo plano, depende del navegador y del móvil, y el navegador puede borrar sus datos. Elegir entre las dos es un equilibrio, no una competición.