Le web hors du navigateur

Beaucoup d'applications installées sur un ordinateur ordinaire sont des sites web.

• Discord, Slack, Signal, Notion, Obsidian, Postman : des applications de bureau qui sont un navigateur affichant un site
• Spotify : même chose, avec CEF plutôt qu'Electron
• Visual Studio Code : l'éditeur lui-même est une application Electron, et ses extensions affichent leurs vues en HTML
• Steam : depuis juin 2023, toute l'interface du client est rendue par CEF et écrite en React — le magasin, la bibliothèque, l'overlay par-dessus le jeu, et l'interface du Steam Deck. C'est documenté par Valve, qui explique aussi comment y brancher un inspecteur

Les logiciels de production audiovisuelle emploient le même montage.

• After Effects, Premiere, Photoshop : les panneaux d'extension (CEP) sont des pages HTML/CSS/JS. Adobe migre vers UXP, qui s'en éloigne, mais des milliers d'extensions installées aujourd'hui sont du web
• Figma : l'interface d'un plugin est une page web, point
• Unity : l'UI Toolkit se décrit en UXML et se met en forme en USS, deux formats copiés sur HTML et CSS. Le sélecteur, la cascade, le flexbox : tout y est
• Unreal : un widget navigateur permet d'afficher une page dans l'éditeur ou dans le jeu

Ça se vérifie en dix secondes : dans VS Code, menu Aide → Basculer les outils de développement. L'inspecteur de Chrome s'ouvre sur l'éditeur lui-même, et le HTML de la barre latérale s'y lit comme celui de n'importe quelle page.

Téléviseurs, bornes, écrans d'avion : le système n'exécute rien d'autre que des applications web, et personne n'installe rien.

La télévision. Une application pour un téléviseur LG s'écrit en HTML, CSS et JavaScript ; la documentation de webOS commence par un index.html. Chez Samsung, c'est Tizen, et c'est pareil.

Le bouton rouge. Sur la TNT, la norme HbbTV permet à une chaîne d'envoyer une application avec son signal. Le bouton rouge de la télécommande, pendant le journal de la RTBF, affiche une page web : l'annonce arrive par l'antenne, le reste par internet. Plus de neuf téléviseurs connectés sur dix vendus en Europe savent la lire.

Les bornes. Musées, gares, cinémas, fast-foods, bornes de commande et caisses automatiques : dans la plupart des cas, un navigateur en mode kiosque, en plein écran, sur une machine posée derrière la cloison. Une borne en panne affiche le message d'erreur de son système d'exploitation, ce qui est la façon la plus courante de s'en apercevoir.

L'avion. Le système de divertissement FlytEDGE de Thales est annoncé comme entièrement web : le passager interagit avec un navigateur, sur l'écran du dossier devant lui ou sur son propre téléphone.

Un cas mérite d'être connu parce qu'il complique la règle. L'application Netflix sur les téléviseurs est bien du JavaScript, mais son moteur maison, Gibbon, abandonne le DOM sur les appareils faibles et dessine tout dans un canvas. Il reste le langage et l'outillage, il ne reste pas les pages. « C'est du web » ne décrit donc pas un appareil à soi seul : reste à savoir quelle partie du web, et ce qui est abandonné en route.

Le graphisme animé posé sur une image en direct — compteur, bandeau, résultat — se fabrique de la même façon aux deux bouts de l'échelle : chez un streamer et dans un studio de télévision.

Sur Twitch. Le compteur d'abonnés, l'alerte de don, le cadre autour de la webcam, le « BRB » entre deux parties : ces éléments sont des pages web. OBS a une source « navigateur », qui est un CEF de plus, et l'overlay est une adresse qu'on lui donne. StreamElements et Streamlabs ne vendent rien d'autre que des pages hébergées, qui écoutent les événements de la chaîne et se mettent à jour toutes seules.

À l'antenne. Même principe, avec une exigence de fiabilité qui n'a rien à voir. Le synthé qui donne le nom de l'invité, le tiers inférieur, les résultats sportifs, la soirée électorale : les moteurs de graphisme composent sur l'image en direct des gabarits écrits en HTML5, qui reçoivent leurs données au moment de passer. L'habillage de la RTBF marche comme ça.

Le chemin depuis After Effects. La compo s'exporte en Lottie avec Bodymovin, un convertisseur en fait un gabarit HTML avec ses champs de texte et ses marqueurs d'entrée et de sortie, et le serveur de diffusion le joue avec les données du jour. C'est ce que fait Ferryman, gratuit et à code ouvert.

Le serveur aussi peut être gratuit. CasparCG a été écrit par la télévision publique suédoise, il est en production 24 heures sur 24 depuis 2006, et son HTML producer est un CEF de plus : il charge une adresse et la compose sur le signal. La télévision publique finlandaise publie de son côté son pupitre de pilotage, un client dans le navigateur pour envoyer les gabarits à l'antenne. Deux diffuseurs nationaux, du code lisible, rien à acheter.

Un streamer avec vingt spectateurs et le journal de vingt heures habillent donc leur image dans le même langage. Ce qui les sépare n'est pas la technique : c'est la latence tolérée, le nombre de gens qui regardent quand la page plante, et le fait qu'à l'antenne, personne ne peut recharger.

Le frigo. Les réfrigérateurs Family Hub de Samsung tournent sous Tizen, et Samsung documente comment y déployer une application web ordinaire : un index.html, du CSS, du JavaScript, un fichier de configuration.

La montre. De 2014 à 2021, les montres Samsung sous Tizen acceptaient le même genre d'application. Puis la marque est passée à Wear OS et a fermé la distribution des applis web pour montre. Le web arrive partout, et il en repart aussi.

Les objets connectés ordinaires. Le routeur, l'imprimante, le NAS, l'onduleur, la station météo, l'imprimante 3D avec OctoPrint, la domotique avec Home Assistant. Aucun de ces objets n'a d'écran ; tous servent une page. Un microcontrôleur ESP32 à quelques euros fait la même chose en une vingtaine de lignes : il ouvre un réseau Wi-Fi et répond en HTML.

La capsule. Le Crew Dragon de SpaceX n'a presque pas de boutons : trois écrans tactiles. L'interface affichée dessus est faite de HTML, de CSS et de JavaScript, rendus par Chromium.

Un mot sur ce que ça ne veut pas dire. La capsule ne vole pas en JavaScript : le logiciel de vol est en C++, et l'un des ingénieurs de l'équipe a pris la peine de le préciser publiquement.

Le web est l'interface, pas le pilote. C'est sa place partout ailleurs sur cette page : le frigo refroidit sans JavaScript, et la télé décode l'image sans JavaScript.

Les exemples qui précèdent sont nombreux ; les montages qui les produisent sont trois.

L'application embarque un navigateur. Elle est livrée avec son moteur : c'est Electron, c'est CEF (Chromium Embedded Framework), c'est la WebView du système sur mobile. L'application est un site, plus le navigateur qui l'affiche, dans le même dossier. Discord, Spotify, VS Code, Steam, les panneaux d'extension d'Adobe et la source « navigateur » d'OBS sont tous ce montage-là.

L'appareil est le navigateur. Le téléviseur, la montre, le frigo : le système n'exécute rien d'autre que des applications web. Une application y est un dossier avec un index.html dedans, empaqueté et signé.

L'objet sert la page. Le routeur, l'imprimante, le NAS, le microcontrôleur à quatre euros : la machine héberge un serveur minuscule et répond en HTML à qui tape son adresse. L'écran est celui du visiteur, et rien n'est installé.

Jusqu'ici, chaque exemple répond à une commande. Les mêmes langages servent aussi à des travaux que personne n'a demandés.

Peindre. Diana Smith code des tableaux à la main, en HTML et en CSS. Aucune image, aucun SVG, pas une ligne de JavaScript : des milliers de rectangles, de dégradés et de masques, écrits un par un. Pure CSS Francine imite une huile du XVIIIe, Pure CSS Lace un portrait baroque flamand. Le code est publié sur GitHub.

La contrainte volontaire. Lynn Fisher dessine avec un seul div : un élément HTML, et tout le reste en CSS. CSSBattle demande de reproduire une image cible avec le moins de caractères possible.

Séparer la forme du fond, pour de vrai. CSS Zen Garden, ouvert en 2003, est un unique fichier HTML que personne n'a jamais modifié, habillé par des centaines de feuilles de style envoyées par des inconnus. Deux versions n'ont visuellement rien en commun. C'est la démonstration la plus courte de ce que « structurer un contenu » veut dire, et elle a vingt-trois ans.

Sortir un fichier. Remotion rend une vidéo image par image à partir de composants web : la mise en forme et l'animation s'écrivent en CSS, une commande produit un MP4. Le projet est du texte, donc versionnable, générable en série et pilotable par des données — cent capsules avec cent noms différents ne demandent pas cent rendus à la main.

Imprimer. Paged.js pagine une page web pour en faire un PDF : notes en bas de page, folios, sauts, gabarits gauche et droite. Des livres vendus en librairie sont composés comme ça, et la thèse de Julie Blanc raconte pourquoi des graphistes s'y sont mis. Le même langage tient la brochure d'une banque, une huile du XVIIIe siècle, un tiers inférieur du JT et un livre relié.

Cette ubiquité a trois contreparties.

Le poids. Chaque application embarque son moteur, donc une machine ordinaire héberge dix copies du même programme, et chacune consomme sa mémoire de son côté. Ce que ça achète, c'est du temps de fabrication : une équipe, une base de code, cinq plateformes. Ce que ça coûte, ce sont des applications lourdes pour des tâches légères.

La monoculture. Ces moteurs sont presque tous le même : Chromium. Quand une seule famille décide de ce que « le web » veut dire, la norme cesse d'être un contrat entre plusieurs constructeurs et devient la documentation d'un produit. C'est arrivé une fois, avec Internet Explorer, et ça a coûté dix ans.

L'obsolescence. Un frigo dure vingt ans, un téléviseur dix, un moteur de rendu non mis à jour six mois. Le frigo photographié plus haut a été présenté en 2011 ; son écran a vieilli plus vite que son compresseur, et le passage de Samsung à Wear OS a fermé une boutique d'applications que des gens avaient remplie. Un appareil connecté qu'on ne met plus à jour n'est pas un appareil neutre : c'est un navigateur périmé, branché en permanence, dans un logement.

À côté de ça, la même technologie tient la promesse inverse. Une page de 1998 s'ouvre encore aujourd'hui, sans rien installer. Un jeu exporté depuis Bitsy est un unique fichier HTML : il se joue en 2026 et se jouera en 2036, là où un projet Flash de 2009 est illisible et où une application mobile de 2015 ne s'installe plus. Le socle est durable ; ce sont les couches qu'on empile dessus qui périment.

Trois vérifications tiennent en une minute :

• dans VS Code, Aide → Basculer les outils de développement ;
• le bouton rouge de la télécommande, sur la RTBF ou la VRT ;
• l'adresse d'une box tapée dans un onglet : la page vient de la boîte, pas d'internet.

Un tiers inférieur se fabrique en une soirée : un rectangle, deux lignes de texte, une transition d'entrée, écrits en HTML et en CSS, enregistrés dans un fichier, et ce fichier ajouté à OBS comme source « navigateur ». C'est le même objet que celui qui passe à l'antenne, et le même fichier : il n'a pas besoin d'être changé pour aller sur un serveur de diffusion.

Pour un projet, la conséquence est qu'un écran d'exposition, un téléviseur, la borne d'un festival et le téléphone d'un visiteur acceptent le même matériau. Une installation interactive n'exige pas de langage réservé — voir l'interactivité comme œuvre pour ce que des artistes en font, et Lusion pour ce qu'un navigateur affiche quand on le pousse.

D'un support à l'autre, ce qui change n'est pas la technique. C'est la distance de lecture, le doigt à la place de la souris, l'absence de clavier, douze heures d'affichage sans redémarrage, et personne pour recharger la page quand elle se bloque. Ce sont des contraintes de mise en scène, pas de code.