Les bases du web mobile

Tu as déjà ouvert une page web sur un téléphone et dû pincer et zoomer pour lire une seule ligne. La page avait été pensée pour un grand écran et le téléphone l'a dessinée en petit. Quelques lignes de code indiquent au téléphone comment la dessiner correctement, et cette leçon les examine.

• Viewport (zone d'affichage) : la partie de l'écran dans laquelle la page est dessinée.
• Adaptatif (responsive) : une mise en page qui change selon la largeur de l'écran.
• Media query : une règle CSS qui ne s'applique que si une condition est vraie, par exemple une largeur minimale.
• Manifeste : un petit fichier qui donne au téléphone le nom, les icônes et les couleurs d'une application web.
• Service worker : un script que le navigateur conserve et qui peut répondre aux requêtes à partir d'une copie enregistrée.
• Cache : un espace où l'on garde des copies de fichiers.

ls app liste l'application web : une page, ses styles, son script, un manifeste, un service worker et deux icônes. Le second script demande trois de ces fichiers au serveur d'aperçu et affiche la réponse. Chacun répond 200, ce qui veut dire qu'il a été trouvé, et le manifeste a son propre type, application/manifest+json. Ouvre maintenant le lien Preview dans ton navigateur, rétrécis la fenêtre et regarde la mise en page changer.

Le script lit index.html et cherche une balise meta nommée viewport. Elle est trouvée, avec width=device-width, initial-scale=1 : dessiner la page aussi large que l'écran, à la taille normale. Essaie : supprime cette ligne dans JupyterLab, enregistre, relance le script, et il répond MISSING (absente). Un téléphone dessinerait alors la page comme si l'écran était bien plus large, puis la réduirait.

La feuille de style est mobile d'abord : les règles simples sont celles du téléphone, et les media queries ajoutent des règles quand l'écran s'élargit. Le script en trouve trois. Deux sont des largeurs, 600 px et 900 px, et la troisième n'est pas une largeur mais une préférence pour le mode sombre. Élargis la fenêtre de ton navigateur au-delà de 600 px et le formulaire se met sur une ligne. Au-delà de 900 px, la liste passe sur deux colonnes.

Un bout de doigt couvre bien plus qu'un pointeur de souris, et il cache ce qu'il touche. Ce lab prend 44 pixels comme seuil qu'un bouton doit atteindre. Le script liste toutes les tailles de la feuille de style : le bouton Add (Ajouter) fait 32 px de haut, les boutons de filtre 36 px, et le bouton rond « fait » 30 sur 30, donc quatre tailles sont sous 44. Elles sont volontairement un peu trop petites, et les corriger est ta tâche.

Le manifeste est un fichier JSON. Le script vérifie sept champs. Six sont présents : le nom, un nom court pour sous l'icône, la page à ouvrir d'abord, le mode d'affichage (standalone, c'est-à-dire sans les barres du navigateur), les icônes et la couleur de la barre du haut. Un est MISSING (absent), background_color, la couleur affichée pendant le démarrage de l'application. Les deux fichiers d'icône existent. Savoir si un téléphone propose d'installer l'application dépend du navigateur : cherche l'option dans le menu de ton propre navigateur.

Le service worker nomme un cache, habits-v1, et une liste de huit fichiers à enregistrer à l'installation. Le script vérifie que chacun existe, et sept existent. Le huitième, /offline.html, n'existe pas. C'est un vrai défaut : si un seul fichier de la liste ne peut pas être enregistré, toute l'installation échoue et rien ne marche hors ligne. Un navigateur n'autorise les service workers que sur une adresse sécurisée, il peut donc refuser celui-ci sur le lien d'aperçu : la console de ton navigateur le dit.

Une application native est conçue pour un seul système de téléphone et installée depuis une boutique. Une application web mobile est une page web. Elle a un seul code pour tous les téléphones, elle est à jour dès que tu changes les fichiers, et un lien suffit à l'ouvrir. Elle peut garder des données sur le téléphone, fonctionner hors ligne grâce à un service worker et, dans de nombreux navigateurs, être ajoutée à l'écran d'accueil. Elle accède moins au téléphone : ce qu'elle peut utiliser, comme les notifications ou le travail en arrière-plan, dépend du navigateur et du téléphone, et le navigateur peut effacer ses données. Choisir entre les deux, c'est faire un compromis, pas désigner un gagnant.