Enregistrer une page en Web Archive Safari pour l'importer dans UnHTML

Oui. Un Web Archive Safari est l'un des trois types de fichiers qu'UnHTML accepte directement : glissez le fichier .webarchive dans le plugin exactement comme vous le feriez avec un fichier .html autonome, sans configuration de CLI, sans bookmarklet à installer au préalable. Ce qui compte, c'est tout ce qui se passe avant ce glissement : ce qu'un .webarchive capture réellement, en quoi il diffère d'un simple export HTML, et quand il capture assez d'une page pour que l'import en vaille la peine.

Ce qu'est vraiment un fichier .webarchive

Un .webarchive réunit le HTML d'une page avec son CSS, son JavaScript et ses images liées en un seul fichier. C'est toute la différence avec un export .html simple, qui ne conserve que le balisage et laisse chaque ressource liée derrière lui, prête à renvoyer une erreur 404 dès que vous ouvrez ce fichier ailleurs. Un Web Archive stocke ces fichiers source concaténés au format plist binaire, sérialisé avec NSKeyedArchiver, et sa prise en charge sous Windows a été abandonnée dès 2012. Aujourd'hui, il est créé et lu uniquement sur les plateformes Apple : macOS et iOS ou iPadOS. Si vous transmettez un fichier à un collègue sous Windows, cela compte : son Safari, s'il en a encore un, ne pourra pas l'ouvrir, un Mac ou un appareil iOS reste donc l'endroit naturel pour vérifier le fichier avant de l'importer.

La raison pour laquelle le contenu imbriqué survit au voyage est structurelle, pas accidentelle. L'objet WebArchive de WebKit contient une ressource principale accompagnée de ses sous-ressources et des archives de ses sous-cadres, et chaque cadre imbriqué transporte ses propres ressources groupées plutôt que de renvoyer vers la page en ligne pour les obtenir. Copiez plutôt un fichier HTML simple, et une iframe intégrée, un lecteur vidéo en ligne ou un widget tiers disparaît généralement dès que vous ouvrez ce fichier ailleurs que dans l'onglet d'origine.

Cela compte pour un import. Une page que vous voulez reconstruire dans Figma est rarement un seul document plat. Les pages marketing intègrent souvent un lecteur vidéo, un widget de réservation ou un tableau comparatif servi depuis une autre origine, chacun sous forme d'iframe. Un .webarchive conserve ce contenu attaché au fichier. Un export HTML simple, non.

Enregistrer un Web Archive sur Mac

Prérequis : Safari sur macOS, ouvert sur la page que vous voulez capturer.

1. Ouvrez la page dans Safari et laissez-la finir de charger, y compris tout ce qui se charge en différé au défilement.
2. Choisissez Fichier (File) puis Enregistrer sous (Save As).
3. Sous Format, choisissez Web Archive. Le code source de la page ne conserve que le balisage brut, et Page web, HTML uniquement supprime la plupart des ressources liées, aucune des deux options ne réunit une page comme le fait Web Archive.
4. Enregistrez, et notez le dossier de destination pour retrouver le fichier lors de l'étape d'import.

Apple décrit la copie enregistrée comme conservant des liens qui ne fonctionnent que tant que les pages de destination restent en ligne : c'est un instantané de la page telle qu'elle était rendue au moment de l'enregistrement, pas un miroir autonome de chaque page vers laquelle elle pointe. Pour un import, cette distinction n'a presque jamais d'importance. UnHTML n'a besoin que de la page enregistrée, pas de tout ce vers quoi cette page renvoie.

Enregistrer un Web Archive sur iPhone ou iPad

Prérequis : Safari sur iOS ou iPadOS 13 ou version ultérieure.

1. Ouvrez la page dans Safari et laissez-la finir de charger.
2. Touchez l'icône Partager.
3. Choisissez Enregistrer dans Fichiers, et sélectionnez un emplacement accessible plus tard depuis un Mac, comme iCloud Drive ou un dossier synchronisé.
4. Confirmez l'enregistrement, puis déplacez le fichier vers votre Mac lorsque vous êtes prêt à l'importer.

Le chemin mobile existe surtout pour les pages que vous ne rencontrez que sur un téléphone ou une tablette : la page d'atterrissage d'un concurrent ouverte depuis le lien d'une application, un email promotionnel qui ne s'ouvre que dans Safari mobile, ou une mise en page qui affiche un design réellement différent à son point de rupture mobile. Une fois le fichier arrivé sur un Mac, l'importer fonctionne exactement comme n'importe quel autre .webarchive, quel que soit l'appareil qui l'a créé.

Importer le .webarchive dans UnHTML

UnHTML accepte exactement trois types d'entrée, glissés directement dans le plugin : un fichier .html autonome, un .webarchive Safari, ou un scene.json capturé avec sa propre CLI ou son bookmarklet open source. Il ne récupère pas d'URL en direct par lui-même. Quelque chose doit capturer la page d'abord, et un .webarchive est la capture la plus rapide, celle qui ne demande aucune configuration : aucune CLI à installer, aucun bookmarklet à glisser dans une barre de favoris.

Un .webarchive suffit lorsque le contenu de la page est déjà présent dans le DOM au moment de l'enregistrement : pages marketing, documentation, la plupart des articles de blog et des textes longs, tableaux de prix rendus côté serveur. Là où il montre ses limites, c'est pour tout ce qui continue de se rendre après le chargement initial. Une application monopage construite en React ou en Vue, ou une page qui va chercher des ressources sur une autre origine, peut se figer en plein rendu dans un instantané enregistré, ou perdre complètement le contenu à origine croisée (CORS). C'est exactement l'écart que la CLI ou le bookmarklet d'UnHTML existent pour combler, en capturant à la place un site rendu en JavaScript sous forme de fichier scene.json, avec l'état déjà entièrement rendu et les ressources distantes déjà résolues.

Voici un moyen rapide de vérifier avant d'importer : rouvrez le .webarchive enregistré hors ligne. Ressemble-t-il exactement à la page en ligne ? L'import devrait alors se dérouler proprement. Des sections vides, des images manquantes ? Préférez la capture par CLI à l'enregistrement du fichier.

Une fois l'import lancé, UnHTML convertit les mises en page CSS en auto layout natif de Figma pour flex, grid et block, quand c'est possible. Le niveau gratuit limite un import à 500 calques et retombe sur un positionnement absolu au-delà. Retirer cette limite et obtenir la conversion complète en auto layout sur des pages plus grandes, c'est ce qu'ajoutent les offres payantes.

Un cas d'usage courant pour tout ce flux : démonter la page de tarifs d'un concurrent pour voir comment elle est construite. Cette page est généralement assez rendue côté serveur pour qu'un .webarchive la capture entièrement, tableaux, icônes et tout le reste, si bien qu'il y a rarement une raison de recourir à la CLI ici. Comparez cela à un site marketing construit sur un framework JavaScript, où le tableau de tarifs n'apparaît qu'après une requête côté client. Enregistrer cette page avec Fichier, Enregistrer sous fige souvent la capture avant que le tableau ne se rende, laissant une section vide une fois le fichier rouvert. C'est le signal pour passer à la capture par CLI ou bookmarklet.

Ce qui ne survit toujours pas au voyage

Même un import .webarchive propre a des limites, et UnHTML les répertorie dans son rapport d'import plutôt que de vous laisser les découvrir plus tard.

Toute police non installée localement est remplacée, Inter par défaut, et chaque remplacement est listé dans ce rapport pour que rien ne change silencieusement sans que vous le sachiez. Si une page repose sur une police d'affichage sous licence que vous n'avez pas installée, attendez-vous à la voir signalée là plutôt que rendue comme prévu. Voyez comment les polices manquantes sont remplacées et consignées pour le mécanisme complet.

La mise en page est l'autre endroit où les choses peuvent bouger. Les mises en page CSS grid complexes qui ne peuvent pas se traduire proprement en auto layout Figma retombent à la place sur un positionnement absolu. Le résultat est un ensemble de calques fidèle et modifiable, pas une copie exacte de la page d'origine, et cette honnêteté est délibérée : le rapport d'import est l'endroit où chaque remplacement de police et chaque repli de mise en page est consigné, pour que vous sachiez précisément quoi vérifier avant de commencer à éditer, pas après.

Conclusion

Un Web Archive Safari est le moyen le plus rapide de remettre à UnHTML un véritable instantané d'une page : enregistrez-le depuis le menu Fichier sur Mac ou depuis la feuille Partager sur iOS, puis glissez le fichier directement dans le plugin. Cela fonctionne bien pour tout ce qui était déjà rendu au moment de l'enregistrement. Pour les pages qui continuent de se rendre côté client après le chargement, la capture par CLI ou bookmarklet reste la voie la plus fiable. Dans tous les cas, le rapport d'import vous indique précisément ce qui est arrivé intact et ce qui a été remplacé en chemin.