SingleFile CLI : sauvegarder une page web dans un seul fichier HTML

Couverture de l’article « SingleFile CLI : sauvegarder une page web dans un seul fichier HTML »
Tags

Nous venions d’acheter notre Nissan Qashqai et je voulais conserver une copie de sa fiche de vente.

Pas seulement quelques captures d’écran ou les photos du véhicule : je voulais garder la page complète, son apparence et, autant que possible, ses interactions, même une fois l’annonce retirée du site.

L’objectif était donc assez simple :

C’est exactement le genre de problème que cherche à résoudre SingleFile.

SingleFile CLI

SingleFile est surtout connu comme extension de navigateur, mais il existe également en version ligne de commande :

github.com/gildas-lormeau/single-file-cli

Les exécutables précompilés sont disponibles directement dans les releases :

github.com/gildas-lormeau/single-file-cli/releases

Sous Windows, il suffit notamment de récupérer :

single-file.exe

L’exécutable peut être utilisé directement, sans installation particulière. Il pilote Chrome ou un autre navigateur basé sur Chromium, charge réellement la page, puis rassemble son contenu et ses différentes ressources dans un fichier HTML autonome.

La commande utilisée

Dans mon cas, j’ai utilisé PowerShell avec la commande suivante.

L’adresse du site d’origine est volontairement anonymisée ici :

.\single-file.exe "<URL_DE_L_ANNONCE>" "HOPAUTO_QASHQAI_82005_ISO_OFFLINE.html" --browser-headless=false --block-scripts=false --load-deferred-images=true --browser-wait-until=networkIdle --browser-wait-delay=8000 --remove-hidden-elements=false --remove-unused-styles=false --remove-unused-fonts=false --remove-alternative-images=false --browser-executable-path="C:\Program Files\Google\Chrome\Application\chrome.exe"

Le résultat est un gros fichier :

HOPAUTO_QASHQAI_82005_ISO_OFFLINE.html

Les images, feuilles de style et autres ressources peuvent notamment être intégrées directement dans ce HTML.

À quoi servent les paramètres ?

ParamètreRôle
--browser-headless=falseLance Chrome visiblement au lieu de travailler en arrière-plan. Pratique pour voir ce que la page charge réellement.
--block-scripts=falseAutorise l’exécution des scripts JavaScript de la page. Indispensable ici pour conserver les parties dynamiques.
--load-deferred-images=trueForce le chargement des images différées ou lazy-loaded.
--browser-wait-until=networkIdleAttend que l’activité réseau se calme avant de considérer la page comme chargée.
--browser-wait-delay=8000Attend encore 8 secondes avant la capture. Utile pour les composants qui apparaissent tardivement.
--remove-hidden-elements=falseConserve les éléments HTML actuellement masqués. Certains peuvent devenir visibles après une interaction.
--remove-unused-styles=falseConserve les règles CSS qui semblent inutilisées au moment de la capture.
--remove-unused-fonts=falseÉvite de supprimer certaines déclarations de polices.
--remove-alternative-images=falseConserve les variantes d’images plutôt que d’optimiser agressivement la page.
--browser-executable-path=...Indique explicitement l’emplacement de Chrome à SingleFile.

Ces options privilégient clairement la fidélité de la copie plutôt que la taille du fichier final.

Un piège avec les sites React

La première sauvegarde semblait parfaite.

J’ouvrais le HTML localement, la page apparaissait avec les bonnes photos puis, une fois son chargement terminé… les photos disparaissaient.

Le problème ne venait pas de SingleFile lui-même mais du fonctionnement du site.

La page utilisait React/Next.js. SingleFile avait correctement intégré les JPEG dans le HTML, mais les données utilisées ensuite par React contenaient toujours les URL originales des images.

Le scénario devenait donc :

Ouverture du HTML

Affichage des images intégrées par SingleFile

Hydratation de l'application React

Réapplication des URL originales

Tentative de chargement depuis Internet

Images perdues hors ligne

La solution évidente aurait été de désactiver complètement JavaScript.

Elle aurait aussi supprimé une bonne partie de l’intérêt de la sauvegarde : galerie, boutons et autres interactions n’auraient plus fonctionné.

Dans mon cas, la meilleure solution a donc été plus ciblée : conserver React et le JavaScript de la page, mais empêcher uniquement la réhydratation de remplacer les images intégrées par leurs anciennes URL distantes.

C’est une limite importante à connaître : SingleFile peut parfaitement capturer les ressources d’une page, mais un site web moderne reste parfois une véritable application dont le JavaScript continue à vouloir communiquer avec son serveur d’origine.

Un outil à garder sous la main

Malgré cette petite difficulté, single-file.exe est exactement le genre d’utilitaire que j’aime garder dans un dossier d’outils.

Pas d’interface compliquée, pas besoin de créer un projet : une URL, un fichier de sortie et une commande.

Pour archiver une documentation, une fiche produit, une ancienne page personnelle ou, comme ici, la fiche du véhicule que l’on vient d’acheter, c’est particulièrement pratique.

Et surtout, quelques années plus tard, un gros fichier HTML autonome sera probablement beaucoup plus utile qu’un lien terminé depuis longtemps en erreur 404.