Comment transformer un site web en application avec manifest.json et Google Chrome
Le but de ce cours est d'apprendre à convertir un site web accessible dans n’importe quel navigateur en une application de bureau ou mobile en utilisant le fichier manifest.json et Google Chrome.
En tant que développeur web maîtrisant HTML, CSS et JavaScript, vous pouvez facilement convertir votre site en une application qui ressemble à une application native.
On appelle cela : Progressive Web Apps (PWA) !
Étape 1 : Créer le site internet
Pour notre exercice, je vous propose de créer un site web interactif. Je vous donne directement le code source. 👍
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application</title>
<style>
/* Ajoutez ici le style */
</style>
</head>
<body>
<main>
<h1>Mon application</h1>
<div class="ligne"><input type="text" placeholder="Prénom"></div>
<div class="ligne"><input type="text" placeholder="Nom"></div>
<div class="ligne"><button id="creer">Créer</button></div>
<div class="ligne masquer">
<p>Merci d'avoir créé votre compte !</p>
<p>Vos informations ont été enregistrées avec succès :</p>
<ul>
<li>Prénom : <strong id="prenom">Henrique</strong></li>
<li>Nom : <strong id="nom">Dumont</strong></li>
</ul>
</div>
</main>
<script>
/* Ajoutez ici le script */
</script>
</body>
</html>
CSS
Ajoutez le code CSS dans /* Ajoutez ici le style */ dans la code HTML :
h1 {
text-align: center;
font-family: Arial, sans-serif;
color:rgb(56, 56, 56);
}
.ligne {
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
flex-direction: column;
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
font-family: Arial, sans-serif;
color:rgb(56, 56, 56);
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, sans-serif;
}
p, ul {
font-family: Arial, sans-serif;
color:rgb(56, 56, 56);
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
text-align: left;
}
}
.afficher {
display: flex;
}
.masquer {
display: none;
}
JavaScript
Et enfin, ajoutez le code JavaScript dans /* Ajoutez ici le script */ dans la code HTML :
const creer = document.getElementById('creer');
const inputs = document.querySelectorAll('input');
const messageDiv = document.querySelector('.ligne.masquer');
creer.addEventListener('click', () => {
const prenomInput = document.querySelector('input[placeholder="Prénom"]');
const nomInput = document.querySelector('input[placeholder="Nom"]');
const prenom = document.getElementById('prenom');
const nom = document.getElementById('nom');
if (prenomInput.value.trim() === '' || nomInput.value.trim() === '') {
alert('Veuillez remplir tous les champs.');
return;
}
prenom.textContent = prenomInput.value;
nom.textContent = nomInput.value;
messageDiv.classList.remove('masquer');
messageDiv.classList.add('afficher');
});
inputs.forEach(input => {
input.addEventListener('focus', () => {
input.value = '';
messageDiv.classList.remove('afficher');
messageDiv.classList.add('masquer');
});
});
Site internet
Notre site internet est prêt et voici à quoi il ressemble :
Étape 2 : Créer le manifest.json
Notre site est prêt, mais il est encore sous forme de site. Pour le transformer en application, nous devons créer et remplir ensemble un fichier appelé manifest.json. Comme son nom l’indique, c’est un fichier JSON.
Le fichier manifest.json
{
"id": "/",
"name": "Application",
"short_name": "Application",
"lang": "fr",
"start_url": "/",
"scope": "/",
"display": "minimal-ui",
"background_color": "#FFFFFF",
"theme_color": "#FBFDFF",
"orientation": "portrait-primary",
"icons": [
{
"src": "./images/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "./images/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"prefer_related_applications": false
}
Comprendre les propriétés
Nous allons expliquer chaque propriété utilisé dans le fichier manifest.json.
id
name
short_name
description
lang
start-url
scope
display
background_color
theme_color
orientation
icons
Nous insérerons les images plus tard.
Étape 3 : Prendre en compte la manifest.json dans le code HTML
Il est nécessaire d’intégrer le manifest.json dans le code HTML en ajoutant un bout de code dans la section <head>.
<!-- Favicon et manifest -->
<link rel="icon" type="image/png" href="./images/icon-192.png" />
<link rel="manifest" href="./manifest.json">
<!---------------------------->
J’en ai profité pour ajouter le favicon. Nous insérerons l’image dans le projet plus tard.
Étape 4 : Insérer les images pour le favicon et les icônes
Nous allons utiliser deux images : une pour le favicon et la version 192×192 de l’icône, et l’autre pour l’icône au format 512×512.
Image 192×192
Image 512×512
L'arborescence
Voici l'arborescence du projet pour vous y retrouver :
monProjet/
|-- images/
|-- icon-192.png
|-- icon-512.png
|-- index.html
|-- manifest.json
Étape 5 : Installer l'application
L’application est prête ! 😊
Vos utilisateurs pourront l’utiliser. Lorsqu’ils se connecteront, une indication en haut à droite de la fenêtre ou de l'écran leur indiquera comment installer votre application. Cela fonctionne sur ordinateur et mobile. Cependant, il est nécessaire d’utiliser Google Chrome (ou probablement d’autres navigateur basés sur le même système).
Que faire d'autres ?
Il est possible d’optimiser notre application en ajoutant des propriétés au fichier manifest.json. De plus, l’utilisation d’un « Service Worker » permet de mettre en cache l’application, ce qui la rend fonctionnelle sans connexion internet et permet de le lancer en un éclair. ⚡️