🔌 Firefox peut enfin parler à vos appareils électroniques

Vous avez un ESP32 qui traîne sur votre bureau, une imprimante 3D à configurer ou un Raspberry Pi Pico à programmer ? Jusqu'ici, Firefox vous obligeait à passer par des logiciels natifs pour communiquer avec ce type d'appareils. C'est terminé. À partir de Firefox 151 pour desktop, le navigateur de Mozilla intègre nativement le support de l'API Web Serial.

Concrètement, cela signifie qu'une page web peut désormais envoyer et recevoir des données vers un appareil branché en USB (ou couplé en Bluetooth) sans installer le moindre driver ou application tierce. Un cap important pour tous ceux qui gravitent autour du hardware, du making, de la domotique ou de l'enseignement des sciences.

Dans cet article, on va explorer ce que permet cette API, comment elle fonctionne, quels appareils sont compatibles, et surtout comment l'utiliser concrètement dans vos projets.

🧠 C'est quoi exactement l'API Web Serial ?

La communication série est l'un des protocoles les plus anciens et les plus universels de l'informatique. Elle consiste à envoyer des données bit par bit sur un canal de communication. Même si les ports série physiques (les vieux connecteurs DB9) ont quasiment disparu des ordinateurs modernes, le protocole, lui, est toujours très vivant.

Aujourd'hui, la plupart des microcontrôleurs et cartes de développement simulent un port série via USB. Côté système d'exploitation, ils apparaissent comme un port COM (Windows) ou un fichier /dev/ttyUSB0 (Linux/macOS). C'est ce mécanisme que l'API Web Serial exploite.

L'API Web Serial est une interface JavaScript qui permet à une page web de :

• ✅ Demander à l'utilisateur de sélectionner un port série
• ✅ Ouvrir une connexion avec cet appareil
• ✅ Lire et écrire des données en temps réel
• ✅ Fermer proprement la connexion

La documentation complète est disponible sur MDN Web Docs, qui est justement maintenu par Mozilla.

Un exemple de code minimal

Voici comment initier une connexion série depuis JavaScript :

// L'utilisateur doit cliquer sur un bouton pour déclencher cette action
// (exigence de sécurité : pas d'accès automatique)
async function connecterAppareil() {
  try {
    // Ouvre une boîte de dialogue pour que l'utilisateur choisisse son port
    const port = await navigator.serial.requestPort();

    // Ouvre la connexion à 9600 bauds (vitesse courante pour les Arduino)
    await port.open({ baudRate: 9600 });

    // Prépare un lecteur pour recevoir les données
    const reader = port.readable.getReader();

    // Boucle de lecture
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;

      // Convertit les octets reçus en texte lisible
      const texte = new TextDecoder().decode(value);
      console.log('Reçu :', texte);
    }

    reader.releaseLock();
  } catch (err) {
    console.error('Erreur de connexion :', err);
  }
}

💡 À noter : l'appel à requestPort() doit obligatoirement être déclenché par une action utilisateur (un clic par exemple). Le navigateur n'autorise jamais un accès automatique et silencieux à un port série.

🛠️ Quels appareils sont compatibles ?

La liste est longue et couvre une grande variété d'usages :

• 🤖 Microcontrôleurs ESP32 / ESP8266 (Espressif) — très populaires dans la communauté maker
• 🍓 Raspberry Pi Pico — la carte RP2040 de la Fondation Raspberry Pi
• 🖨️ Imprimantes 3D — pour envoyer du G-code directement depuis le navigateur
• 🏠 Appareils domotiques compatibles ESPHome / Home Assistant
• 🧱 Briques LEGO Mindstorms et systèmes éducatifs similaires
• ⚡ Wattmètres USB — pour mesurer la consommation électrique en temps réel
• 🎓 Cartes éducatives type BBC micro:bit, Adafruit Feather, etc.

En résumé : si votre appareil apparaît comme un port série dans votre système d'exploitation, il y a de bonnes chances qu'il soit utilisable via Web Serial.

🎓 Cas d'usage concret : CircuitPython avec Adafruit

L'un des exemples les plus parlants vient d'Adafruit, entreprise américaine spécialisée dans le hardware open-source et très impliquée dans l'éducation aux sciences et à l'électronique. Ils ont développé CircuitPython, une version de Python adaptée aux microcontrôleurs.

Avec Web Serial, le workflow devient remarquablement simple :

1. Branchez votre carte compatible (ESP32-S2, Feather, etc.) en USB
2. Ouvrez l'Adafruit Web Serial ESPTool dans Firefox
3. Installez le firmware CircuitPython directement depuis le navigateur
4. Glissez-déposez votre fichier code.py sur le périphérique USB
5. Votre programme Python s'exécute sur la carte et peut communiquer avec une page web via Web Serial

⚠️ Attention : si vous utilisez Firefox, privilégiez l'ESPTool Web Serial plutôt que le bouton OPEN INSTALLER présent sur le site officiel CircuitPython, qui n'est pas encore pleinement compatible.

Exemple : afficher un message sur une carte depuis une page web

Voici un extrait simplifié de ce que pourrait contenir un fichier code.py sur une carte CircuitPython pour recevoir des messages depuis une page web :

# code.py — à déposer sur la carte CircuitPython
import supervisor
import sys

# Boucle principale : attend des messages depuis le port série
while True:
    if supervisor.runtime.serial_bytes_available:
        # Lit la ligne envoyée depuis la page web
        message = sys.stdin.readline().strip()
        print(f"Message reçu : {message}")
        # Ici, vous pouvez allumer une LED, afficher sur un écran, etc.

Et côté page web, l'envoi du message se fait simplement avec un WritableStreamDefaultWriter :

// Envoie un message texte vers la carte CircuitPython
async function envoyerMessage(port, message) {
  const writer = port.writable.getWriter();
  const encoder = new TextEncoder();

  // On envoie le message suivi d'un retour à la ligne
  await writer.write(encoder.encode(message + ' '));
  writer.releaseLock();
}

Un exemple complet est disponible sur GitHub.

⚡ Mesurer la consommation électrique avec Web Serial

Florian Quèze, ingénieur chez Mozilla, a développé un projet particulièrement élégant : une page web qui se connecte à un wattmètre USB via Web Serial pour afficher et enregistrer la consommation électrique d'un appareil en temps réel.

Le plus intéressant ? Les données peuvent être exportées directement vers le Firefox Profiler, l'outil de profilage intégré au navigateur, pour visualiser les courbes de consommation et les partager facilement.

Les wattmètres USB testés avec succès incluent :

• ⚡ AVHzY C3 USB
• ⚡ Joy-IT TC66C
• ⚡ YZXStudio USB ZY1280

La page de démonstration est accessible sur serial.combien-consomme.fr — un projet entièrement en français, ce qui est plutôt rare dans cet écosystème !

🔒 Sécurité et vie privée : ce que vous devez savoir

Donner accès au matériel depuis le navigateur soulève légitimement des questions de sécurité. Mozilla a pris ces préoccupations au sérieux dès la conception.

Consentement explicite de l'utilisateur

Aucun site ne peut accéder à un port série sans que l'utilisateur l'ait explicitement autorisé. L'appel à navigator.serial.requestPort() déclenche une boîte de dialogue native du navigateur où l'utilisateur choisit lui-même quel port partager — ou refuse complètement l'accès.

Conséquences importantes :

• 🛡️ Le site ne reçoit jamais la liste complète des ports connectés
• 🛡️ Il est impossible de faire du fingerprinting à partir des appareils branchés
• 🛡️ L'autorisation est accordée port par port et site par site

Le système de gating (validation renforcée)

Firefox utilise un mécanisme de validation renforcée (appelé add-on gating), déjà employé pour l'API Web MIDI. Avant même que la boîte de sélection du port apparaisse, l'utilisateur voit une explication détaillée de ce que le site cherche à faire. C'est plus informatif que les permissions classiques du navigateur.

Pour les entreprises

Dans un contexte professionnel, Web Serial est désactivé par défaut dans Firefox Enterprise. Les administrateurs système peuvent contrôler finement cette fonctionnalité via la politique DefaultSerialGuardSetting.

🏠 Domotique : l'exemple Home Assistant + ESPHome

Si vous vous intéressez à la domotique, vous connaissez probablement Home Assistant, la plateforme open-source de gestion de la maison connectée. Le projet ESPHome permet de flasher des firmwares compatibles Home Assistant sur des cartes ESP32 et similaires.

Avec Web Serial dans Firefox, l'installation et la configuration de ces appareils se fait désormais entièrement depuis le navigateur, en quelques clics, sans aucun logiciel supplémentaire. Pour les débutants en domotique, c'est une vraie simplification du parcours d'onboarding.

📐 Vers une standardisation officielle

L'API Web Serial est actuellement incubée au sein du Web Incubator Community Group (WICG), une structure du W3C qui accueille les propositions expérimentales avant standardisation officielle. Mozilla pousse activement pour que l'API intègre le WHATWG via une nouvelle proposition de Workstream.

Chrome et Edge supportent Web Serial depuis 2021. L'arrivée de Firefox dans la danse est un signal positif pour la standardisation : quand deux moteurs majeurs implémentent la même API, les organismes de normalisation ont davantage de raisons de l'officialiser.

💡 Safari (WebKit) ne supporte pas encore Web Serial, ce qui signifie que les utilisateurs Apple sur iOS ou macOS avec Safari restent pour l'instant exclus de ces usages.

✅ Conclusion : une vraie avancée pour les makers et les développeurs hardware

L'intégration de Web Serial dans Firefox 151 est bien plus qu'une case cochée dans une liste de compatibilité. C'est un signal fort que le web peut devenir une plateforme de premier choix pour interagir avec le monde physique — microcontrôleurs, capteurs, imprimantes, wattmètres, et bien d'autres appareils.

Pour résumer ce que vous pouvez faire dès maintenant :

• 🔌 Programmer vos ESP32, Raspberry Pi Pico ou cartes Adafruit depuis Firefox
• 🖨️ Contrôler une imprimante 3D via une interface web
• ⚡ Mesurer et visualiser la consommation électrique d'un appareil
• 🏠 Installer des firmwares domotiques ESPHome sans logiciel tiers
• 🎓 Créer des expériences pédagogiques interactives mêlant web et électronique

Si vous avez déjà un workflow basé sur Web Serial avec Chrome ou Edge, testez-le avec Firefox 151 et partagez vos retours sur Mozilla Connect. Pour les bugs techniques, rendez-vous sur Bugzilla.

Article inspiré par « Announcing Web Serial Support in Firefox » publié sur Mozilla Hacks. Lire la source originale.