Qu'est-ce qu'une application web installable ?
Une application web installable est un site que le navigateur peut ajouter à l'écran d'accueil, avec son nom et son icône, comme une application. Elle s'appuie sur un manifeste, un petit fichier JSON qui la décrit.
Ce que le navigateur propose exactement dépend du navigateur et de l'adresse du site. Le manifeste est le point de départ commun.
À la fin de cette leçon
Remarque
Je peux décrire ce qui rend une application web installable.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Manifeste | le fichier JSON qui donne le nom, les icônes et l'affichage d'une application web | |
| Installable | se dit d'un site que le navigateur peut ajouter à l'écran d'accueil | |
| Mode d'affichage | la façon dont l'application s'ouvre, avec ou sans les barres du navigateur | standalone |
| Adresse de départ | la page ouverte en premier, appelée start_url | |
| Icône | l'image de l'application sur l'écran d'accueil | |
| Couleur de thème | la couleur de la barre du haut |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Que contient un manifeste ?
Un manifeste est un objet JSON : des noms de champs et des valeurs. Chaque champ répond à une question que le navigateur se pose.
Le fichier s'appelle souvent manifest.webmanifest. La page l'annonce avec une balise link dont l'attribut rel vaut manifest.
Exemple : les champs du manifeste
| Champ | Question à laquelle il répond | Exemple |
|---|---|---|
| name | Quel est le nom complet ? | Carnet de courses |
| short_name | Quel nom court sous l'icône ? | Courses |
| start_url | Quelle page ouvrir en premier ? | / |
| display | Avec ou sans les barres du navigateur ? | standalone |
| icons | Quelles images utiliser ? | icone-192.png et icone-512.png |
| theme_color | Quelle couleur pour la barre du haut ? | #1f6f50 |
| background_color | Quelle couleur pendant le démarrage ? | #ffffff |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Un manifeste complet, ligne par ligne
{
"name": "Carnet de courses",
"short_name": "Courses",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f6f50",
"icons": [
{ "src": "icone-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icone-512.png", "sizes": "512x512", "type": "image/png" }
]
}Le mode d'affichage choisit les barres du navigateur
Le champ display dit comment l'application s'ouvre. Avec browser, elle s'ouvre comme un onglet ordinaire. Avec standalone, elle s'ouvre dans sa propre fenêtre, sans les barres du navigateur.
Les deux autres modes sont minimal-ui, avec quelques commandes, et fullscreen, qui prend tout l'écran.
Exemple : les quatre modes d'affichage
| Mode | Ce que la personne voit | Usage typique |
|---|---|---|
| browser | les barres du navigateur | un site ordinaire |
| minimal-ui | quelques commandes du navigateur | une application avec retour et recharge |
| standalone | la page seule, comme une application | un carnet, une messagerie |
| fullscreen | tout l'écran, sans barre | un jeu, une vidéo |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Vérifier le manifeste de l'application du laboratoire
Un script lit le manifeste de l'application et vérifie sept champs. Il contrôle aussi que les fichiers d'icônes existent.
Ses mots sont en anglais : present veut dire présent, MISSING absent, file exists le fichier existe. Le Run doit montrer six champs présents et un absent, background_color, puis display is standalone.
Contrôler les champs du manifeste
docker exec jupyter python3 steps/manifest.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Une erreur fréquente
Attention
Beaucoup pensent qu'un manifeste fait marcher l'application sans réseau. Faux : le manifeste décrit l'application, c'est tout. Marcher sans réseau demande un service worker, qui est le sujet de la leçon suivante.
Pourquoi deux tailles d'icônes ?
Une icône de 192 pixels sert à l'écran d'accueil. Une icône de 512 pixels sert surtout à l'écran de démarrage. Beaucoup de navigateurs attendent ces deux tailles pour proposer l'installation.
Ce qui est exigé varie selon le navigateur. Vérifiez dans le menu de votre navigateur si l'installation est proposée.