Ces dernières années, les sites statiques sont revenus à la mode. Légers, rapides, ils sont très adaptés à certains besoins, à un usage en mobilité. Malgré leur nom, ils peuvent aussi se faire dynamiques, côté client. Et servir de base de travail pour une application web progressive (PWA). On vous explique comment.
Dans un précédent article, nous avions décortiqué ce qui fait la spécificité des PWA. Mais cela peut sembler abstrait. Pour mieux comprendre nous allons aujourd'hui créer avec vous une telle application. Cela commence par la mise en ligne d'un site très simple, statique, qui ne nécessite donc aucune technologie spécifique côté serveur.
Le statique, c'est fantastique
Une tendance que l'on retrouve chez les défenseurs de la JAMStack (JavaScript, API, Markdown) et des générateurs de sites statiques, permettant d'en créer depuis de simples fichiers textes. Un concept à l'origine des GitHub Pages (via Jekyll) mais il existe des dizaines d'outils du même genre dont 11ty, Hugo, Hexo ou même le français Cecil.
Dans ce dossier nous opterons pour une méthode 100 % manuelle, ce qui vous aidera à mieux comprendre ce qui compose un site, comme il en existe des millions en ligne, que n'importe qui peut créer simplement. Puis comment en faire une PWA. Libre à vous de plonger ensuite dans les méandres de bibliothèques et frameworks plus complexes à la manière d'Angular, React, Vue.js ou même d'outils comme Gatsby.
Pour rendre le tout plus intéressant, notre site utilisera une dose de JavaScript pour charger du contenu, le traiter puis l'afficher. Seule contrainte : nous avons besoin d'un hébergement sécurisé (HTTPS/TLS), un prérequis des PWA. Heureusement, il existe des services qui proposent de telles solutions, avec un accès gratuit pour de petits projets.
Un « Hello, World ! » gratuit mais sécurisé
Il y a quelques années, il était impensable de pouvoir diffuser une page web avec accès sécurisé sans totalement dépendre d'une plateforme tierce et de ses contraintes. Let's Encrypt a tout changé en 2016, permettant à n'importe qui d'obtenir un certificat gratuit pour son nom de domaine, facile à créer et à mettre en place.
Malgré cela, il est rare de pouvoir trouver des hébergeurs avec une offre gratuite. Si Scaleway le fait, c'est uniquement à travers son offre de stockage objet (75 Go offerts) qui n'est pas vraiment prévue pour cela. Ce n'est pas le cas de Gandi, Infomaniak ou OVH pour ne citer que ces exemples. Surtout, ils en sont resté à des méthodes de déploiement « old school », nécessitant en général de passer par un serveur FTP pour envoyer vos fichiers.
Il existe pourtant bien mieux désormais. Avec ses Pages, GitHub avait montré la voie dès 2015 : il suffisait d'envoyer des fichiers texte au format Markdown dans un dépôt via Git, et votre site est publié. L'upload peut ainsi se faire via une multitude de clients compatibles, ou l'interface web du service. La conversion en site est assurée par Jekyll.
Certains hébergeurs se sont inspirés de ces méthodes et ont capitalisé dessus, ainsi que sur la JAMStack et la mode des sites statiques. C'est notamment le cas de l'américain Netlify. Il propose ainsi de nombreux services et plugins, du serverless, du déploiement simplifié, et surtout des comptes gratuits pour les projets personnels.
Création et mise en ligne de la première version du site
Le nombre de sites hébergés est illimité, mais vous ne devez pas dépasser 100 Go de bande passante par mois et 300 minutes de build time via Git, ce qui est largement suffisant. D'autres limites sont imposées, tous les détails se trouvent par ici. Aucun moyen de paiement n'est nécessaire pour créer un compte, un email suffit.
Ce sera donc suffisant pour notre test du jour, d'autant que les certificats Let's Encrypt sont gérés. On commence donc par créer un fichier index.html dans un dossier de notre machine nommé Site.
Une première page web qui contient le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Bonjour, le monde !</title>
</head>
<body>
<p>Bonjour, le monde !</p>
</body>
</html>
C'est un simple « Hello, world ! ». On déclare une page HTML, en français, utilisant le codage de caractères UTF-8 (à utiliser par défaut), avec un titre et un paragraphe affichant notre message à quiconque se rendra sur le site internet. Vous pouvez lancer ce fichier avec votre navigateur pour observer le résultat.
Pour le mettre en ligne, rendez-vous dans l'onglet Sites de Netlify, puis glissez votre dossier Site dans la zone prévue à cet effet. Un espace d'hébergement sera créé, une URL (xxx.netlify.app) lui sera attribuée.
Votre site est désormais en ligne. Facile non ?
Notez que vous pouvez opter pour une mise en ligne via Git. Trois plateformes sont gérées pour cette méthode de déploiement continu : GitHub, GitLab et Bitbucket. Seuls les comptes Business peuvent le faire depuis un serveur Github/GitLab auto-hébergé. Autre bonne nouvelle, l'accès est sécurisé (HTTPS/TLS) par défaut.
Vous pouvez aussi opter pour un nom de domaine personnalisé. Netlify en vend mais vous pouvez aussi le faire chez votre registrar habituel. Il faudra simplement y configurer votre zone DNS pour qu'elle pointe vers les serveurs de Netlify. Ce dernier peut également gérer entièrement les DNS de votre domaine. C'est à vous de voir.
Différents guides (en anglais) sont disponibles par ici.
Ajoutons un peu de style à notre site
Prochaine étape, faire de cette page web un environnement un peu plus accueillant. Pour cela, nous lui fournissons une icône. Nous avons opté pour une fusée sur Flaticon. Attention, pensez à bien créditer le site et l'auteur si vous faites de même sur l'un de vos projets. C'est l'une des exigences de la licence gratuite du service.
Nous récupérons différentes tailles : des carrés de 16, 32, 64, 128 et 512 pixels. Avec Gimp, nous plaçons celle de 512 px centrée sur un fond noir de 1024x1024 px (Image > Taille du canevas puis Calque > Nouveau calque). Cela sera utile pour plus tard, pour en faire une icône maskable pour notre PWA.
Nous plaçons tous ces fichiers dans un répertoire nommé assets :
Nous modifions la page web en lui ajoutant des éléments décrivant notre projet : constituer une page référençant la liste des paquets du dépôt GitHub de winget via ses manifestes. On modifie donc le titre, on ajoute des descriptions, une barre de navigation, un logo, une dose de responsive, etc. Le résultat est le suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:locale" content="fr_FR">
<meta property="og:site_name" content="Packages winget">
<meta property="og:title" content="Packages winget">
<title>Packages winget</title>
<meta property="og:description" content="Retrouvez le contenu du dépôt des packages winget">
<meta name="description" content="Retrouvez le contenu du dépôt des packages winget">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="assets/icon-16.png">
<link rel="apple-touch-icon" href="/assets/icon-maskable.png">
</head>
<body>
<nav>
<a href="/"><img id="logo" alt="Logo Paquets winget" src="assets/icon-32.png">Paquets winget</a>
</nav>
<main>
<span id="pkgsList">Le contenu du dépôt winget est en cours de chargement...</span>
</main>
</body>
</html>
On a tout d'abord ajouté de nombreuses balises META qui servent à déclarer des propriétés. La première par exemple pour que le site s'adapte à l'écran de l'appareil (smartphone, tablette, ordinateur). Certaines sont issues du standard OpenGraph (og). Nous déclarons certaines icônes pour qu'elles soient utilisées par le navigateur ou iOS, par exemple quand un utilisateur ajoute le site à son écran d'accueil (apple-touch-icon).
Vous noterez également que nous avons référencé une feuille de style CSS (stylesheet), sobrement nommée style.css. Nous créons ce fichier à la racine du projet. On lui ajoute le code suivant :
body {
background: #283134;
font-family: monospace;
font-size: 1em;
overflow-wrap: anywhere;
margin:0;
}
body, a {
color: #dae5e9;
}
a:hover {
color: #ea7e19;
}
nav {
width:100%;
position: fixed;
margin: 0;
font-size: 20px;
font-weight: 900;
background: #05384a;
padding: 10px;
}
main {
width: 95%;
margin: auto;
padding-top: 70px;
}
#logo {
vertical-align: middle;
margin-right: 15px;
}
Il s'agit ici essentiellement de gérer des marges et des alignements, tailles de police et autres couleurs, comme pour les liens (a) ou lorsqu'on les survole (hover). Certaines sont liées à un id particulier (#).
On enregistre l'ensemble des fichiers. On fait un glisser-déposer du dossier Sites dans la section Deploys du projet Netlify. Quelques secondes plus tard, votre site est mis à jour, accessible à tous.
Ajoutons un peu de dynamisme
Un site statique au sens de la JAMStack est un site qui ne nécessite pas de traitement par le serveur. Cela tombe bien, Netlify n'en propose pas. Mais on peut tout de même ajouter du JavaScript côté client afin de charger des données, gérer une connexion, des commentaires, etc. Dans ce guide, nous allons charger un fichier JSON.
C'est celui fourni par GitHub, contenant la liste des répertoires de manifestes du dépôt winget-pkgs :
On créé un fichier app.js à la racine du projet et on y place le code suivant :
const wingetUrl = "https://api.github.com/repos/microsoft/winget-pkgs/contents/manifests"
// On récupère la liste des paquets, on affiche une erreur en cas de problème
fetch(wingetUrl)
.then(response => response.json())
.then(jsonPkgs => showPkgs(jsonPkgs))
.catch((error) => console.log("Erreur pendant la récuparation du JSON des paquets winget : ", error))
// On affiche la liste des paquets dans la zone pkgsList
let showPkgs = (data) => {
let zone = document.getElementById("pkgsList")
let frag = document.createDocumentFragment();
// Pour chaque élément du fichier JSON on créé une puce avec un lien
// On stocke le tout dans un fragment dans un premier temps
data.forEach(app => {
let link = document.createElement("a")
link.href = app.html_url
link.target = "_blank"
link.rel = "noopener"
link.innerText = app.name
let puce = document.createElement("li")
puce.appendChild(link)
frag.appendChild(puce)
});
// On affiche le nombre d'éléments
zone.innerText = `Le dépôt de winget compte ${data.length} entrées : `
// On affiche la liste à puce en utilisant le fragment
let list = document.createElement("ol")
list.appendChild(frag)
zone.appendChild(list)
document.title = `Paquets winget (${data.length})`
}
Ici, l'objectif est très simple, récupérer le contenu de l'URL, puis envoyer les données à notre page sous la forme d'une liste à puces si tout s'est bien passé. Sinon, une erreur sera affichée au sein de la console du navigateur.
Les plus attentifs auront remarqué que nous utilisons ici une syntaxe JavaScript dite moderne (ECMAScript 2015), reposant sur les fonctions fléchées et les promesses permettant des actions asynchrones et enchainées (then, error). Une manière de faire simplifiant énormément les choses par rapport à l'époque des requêtes XHR.
Il faut désormais dire à notre site de lancer ce JavaScript. On le déclare donc à la fin de la section body :
<script src="./app.js"></script>
On peut une dernière fois glisser-déposer le dossier dans Netlify pour mettre à jour le site. On s'aperçoit qu'il est désormais pleinement fonctionnel et très rapide. Valide selon les règles du W3C.
Par défaut un texte est affiché, une fois les données récupérées et traitées, elles sont affichées. Ce site n'a que deux défauts : il n'est pas accessible hors-ligne et les informations sont récupérées depuis le dépôt GitHub winget-pkgs à chaque fois que l'on consulte la page. C'est là que la magie de la PWA entre en action.
Le site que vous devriez obtenir si tout s'est bien passé
Dans le prochain article de notre dossier, nous convertirons donc notre page web en application progressive, dotée d'un service worker, installable sur un ordinateur ou un appareil mobile, fonctionnant en toutes circonstances. Vous retrouverez le code source de ce projet et son évolution dans ce dépôt GitHub.
