Les Web APIs du navigateur — Cours JavaScript avancé

Le navigateur est une boîte à outils géante

Au-delà du DOM, le navigateur expose des dizaines d'APIs : des objets tout prêts pour géolocaliser l'utilisateur, envoyer une notification, lire le presse-papiers, jouer du son, détecter la connexion réseau… On les appelle les Web APIs. La plupart vivent sur navigator, window ou des objets dédiés.

navigator.language;     // "fr-FR"
navigator.onLine;        // true / false (connecté ?)
window.matchMedia("(prefers-color-scheme: dark)").matches;  // mode sombre ?

La notion clé : la permission

Les APIs sensibles (ta position, ta caméra, tes notifications) ne s'activent pas en douce : le navigateur demande l'autorisation à l'utilisateur. C'est une protection de la vie privée. Ton code doit donc toujours gérer les trois cas : accordé, refusé, pas encore demandé.

// Géolocalisation : déclenche une demande de permission
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),  // accordé
  (err) => console.log("Refusé ou indisponible :", err.message)     // refusé
);

// Notifications : on demande d'abord la permission
const perm = await Notification.requestPermission();   // "granted" | "denied"
if (perm === "granted") new Notification("Bonjour 👋");

Quelques APIs très utiles

Clipboard : copier dans le presse-papiers — await navigator.clipboard.writeText("Copié !") (sur clic utilisateur).
Geolocation : la position, avec permission (cartes, météo locale).
Notifications : alerter même hors de l'onglet, avec permission.
fetch (déjà vu) : parler à un serveur — l'API réseau de base.
localStorage (déjà vu) : mémoriser des données dans le navigateur.

Le réflexe : tu n'apprends pas ces APIs par cœur. Quand tu as un besoin (« copier un texte », « savoir où est l'utilisateur »), tu cherches « Web API … » sur MDN, et tu lis sa doc : ce qu'elle prend, ce qu'elle renvoie, si elle exige une permission.

Le temps réel : WebSockets

fetch fonctionne en aller-retour ponctuel (tu demandes, le serveur répond, fin). Pour du temps réel (chat, notifications live, cours de bourse), on garde une connexion ouverte dans les deux sens : c'est le rôle des WebSockets.

const socket = new WebSocket("wss://exemple.fr/chat");

socket.addEventListener("open",    () => socket.send("Bonjour !"));
socket.addEventListener("message", (e) => console.log("Reçu :", e.data));
socket.addEventListener("close",   () => console.log("Connexion fermée"));

Le serveur peut alors pousser un message au navigateur à tout moment, sans que celui-ci ait à redemander. (Un vrai WebSocket exige un serveur dédié — d'où l'exemple non exécutable ici.)

Exécute : ce que le navigateur sait de lui-même

Une vraie Web API, sans permission : on interroge navigator et window. (Les résultats dépendent de TON navigateur.)

Essaie toi-même

Rappel libre

Sans remonter dans la leçon : pourquoi une API comme navigator.geolocation exige-t-elle une permission alors que navigator.language non, et quand préfère-t-on WebSocket à fetch ?

navigator.geolocation expose une donnée sensible (la position physique de l'utilisateur) : le navigateur demande donc l'autorisation et ton code doit gérer les trois cas (accordé, refusé, pas encore demandé). navigator.language n'est pas sensible, il se lit directement. On choisit WebSocket quand le serveur doit pousser des données en temps réel via une connexion ouverte dans les deux sens (chat, cours de bourse) ; fetch reste suffisant pour un aller-retour ponctuel.

Accepter ou rejeter le code de l'IA

Tu demandes à l'IA un bouton « Copier mon lien » au chargement de la page. Elle propose ceci. Tu l'acceptes tel quel ou tu le rejettes ?

window.addEventListener("load", async () => {
  await navigator.clipboard.writeText(location.href);
  alert("Lien copié !");
});

Rejeter. navigator.clipboard.writeText exige un geste utilisateur (clic, appui) : appelé depuis l'événement load, le navigateur bloque l'écriture et la promesse part en rejet. Comme rien n'attrape l'erreur (try/catch absent), tu obtiens un échec silencieux puis un alert mensonger « Lien copié ! » alors que rien n'a été copié. La bonne version : appeler writeText dans un addEventListener("click", …) sur le bouton, dans un try/catch qui n'affiche le succès que si l'écriture a réussi.

Pourquoi la géolocalisation demande-t-elle une autorisation ?

Pour ralentir le site C'est une donnée sensible : le navigateur protège la vie privée de l'utilisateur Parce que c'est lent

Pour un chat en temps réel, on utilise plutôt…

localStorage Un seul fetch au chargement Les WebSockets (connexion ouverte dans les deux sens)

Prochaine étape

Une dernière API, et pas des moindres : dessiner des pixels à l'écran, jusqu'à l'animation. Le Canvas.

Leçon 5 : Canvas →

The browser is a giant toolbox

Beyond the DOM, the browser exposes dozens of APIs: ready-made objects to geolocate the user, send a notification, read the clipboard, play sound, detect network connection… They're called Web APIs. Most live on navigator, window or dedicated objects.

navigator.language;     // "en-US"
navigator.onLine;        // true / false (connected?)
window.matchMedia("(prefers-color-scheme: dark)").matches;  // dark mode?

The key idea: permission

Sensitive APIs (your location, camera, notifications) don't activate silently: the browser asks the user for permission. It's a privacy protection. So your code must always handle the three cases: granted, denied, not yet asked.

// Geolocation: triggers a permission request
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),  // granted
  (err) => console.log("Denied or unavailable:", err.message)       // denied
);

// Notifications: ask for permission first
const perm = await Notification.requestPermission();   // "granted" | "denied"
if (perm === "granted") new Notification("Hello 👋");

A few very useful APIs

Clipboard: copy to the clipboard — await navigator.clipboard.writeText("Copied!") (on a user click).
Geolocation: position, with permission (maps, local weather).
Notifications: alert even outside the tab, with permission.
fetch (already seen): talk to a server — the basic network API.
localStorage (already seen): remember data in the browser.

The reflex: you don't learn these APIs by heart. When you have a need ("copy a text", "know where the user is"), search "Web API …" on MDN, and read its docs: what it takes, what it returns, whether it requires a permission.

Real time: WebSockets

fetch works as a one-off round trip (you ask, the server answers, done). For real time (chat, live notifications, stock prices), you keep a connection open both ways: that's WebSockets.

const socket = new WebSocket("wss://example.com/chat");

socket.addEventListener("open",    () => socket.send("Hello!"));
socket.addEventListener("message", (e) => console.log("Received:", e.data));
socket.addEventListener("close",   () => console.log("Connection closed"));

The server can then push a message to the browser at any moment, without it having to ask again. (A real WebSocket needs a dedicated server — hence the non-runnable example here.)

Run it: what the browser knows about itself

A real Web API, no permission: we query navigator and window. (Results depend on YOUR browser.)

Try it yourself

Next step

One last API, and a big one: drawing pixels on screen, up to animation. The Canvas.

Lesson 5: Canvas →