APIs web matérielles

Nous référençons ici des interfaces de programmation web accessible en JavaScript qui permettent d'avoir des informations matérielles sur l'appareil utilisé (état du réseau, informations de capteurs...) et/ou d'agir sur certains dispositifs matériels (vibreur...)

API d'état de la batterie

API permettant d'être informé de l'évolution de la charge de la batterie à l'aide d'une promesse obtenue avec navigator.getBattery() (retournant un BatteryManager).
Utilité : adapter le code en fonction de l'état de la batterie (différer des tâches coûteuses si la batterie est faible)

Page de démonstration

navigator.getBattery().then(
	battery => {
		let updater = () => {
			document.getElementById("batteryLevel").innerText = battery.level;
			document.getElementById("batteryCharging").innerText = battery.charging ? "yes": "no";
		};
		updater(); // call a first time
		// and then install listeners for refresh
		battery.addEventListener("levelchange", updater);
		battery.addEventListener("chargingchange", updater);
	})
	.catch(() => { // if we don't retrieve the battery from the promise
		document.getElementById("batteryLevel").innerText = "Battery not available";
		document.getElementById("batteryCharging").innerText = "Battery not available";
	});

Pour en savoir plus :

• Référence W3C
• Documentation Mozilla

API d'orientation d'écran

API permettant de connaître l'orientation actuelle de l'écran de l'appareil

Pour en savoir plus :

• Documentation Mozilla

API de géolocalisation

• API permettant de connaître la position géographique de l'appareil en utilisant diverses sources (GPS, triangulation cellulaire, Wifi, balises Bluetooth...)
• La plupart des navigateurs demande un accord préalable de l'utilisateur pour chaque origine (donnée sensible pouvant être envoyée vers le serveur)
• Certains navigateurs (comme Chrome) peuvent exiger l'utilisation de HTTPS

Usages possibles :

• Vérification du support de l'API : "geolocation" in navigator
• Obtention d'une géolocalisation unique avec navigator.geolocation.getCurrentPosition(position => { do_something(position.coords.latitude, position.coords.longitude); })
• Suivi de la localisation avec var watchID = navigator.geolocation.watchPosition(position => { do_something(position.coords.latitude, position.coords.longitude); })
• Annulation du suivi avec navigator.geolocation.clearWatch(watchID)
• Possibilité de fournir une fonction supplémentaire pour gérer les cas d'erreur (permission non accordée, positionnement non disponible...)

Page de démonstration

(() => {
	let OSM_URL = "https://www.openstreetmap.org/?mlat=$lat&mlon=$lon&zoom=12";
	let startButton = document.getElementById("startGeolocationWatch");
	let stopButton = document.getElementById("stopGeolocationWatch");
	let watchID = null;
	let addPosition = position => {
		let e = document.createElement("div");
		let link = OSM_URL.replace("$lat", position.coords.latitude).replace("$lon", position.coords.longitude);
		e.innerHTML = `${Date()}: latitude=${position.coords.latitude}, longitude=${position.coords.longitude} <a href="${link}">Link to OSM</a>`;
		document.getElementById("geolocationData").appendChild(e);
	};
	let errorHandler = error => {
		window.alert(`Cannot obtain geolocation: ${error.message}`);
	};
	if ('geolocation' in navigator) {
		startButton.disabled = false;
		startButton.onclick = () => {
			watchID = navigator.geolocation.watchPosition(addPosition, errorHandler);
			stopButton.disabled = false;
			startButton.disabled = true;
		};
		stopButton.onclick = () => {
			navigator.geolocation.clearWatch(watchID);
			watchID = null;
			startButton.disabled = false;
			stopButton.disabled = true;
		};
	}
})();