7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) offrent des possibilités sérieuses pour l'interaction des applications web avec la fonctionnalité du navigateur et de l'appareil de l'utilisateur. Jetons un coup d'œil à certaines de ces API, y compris Geolocation et Notifications, ainsi que leur utilisation.
Geolocation API permet à une application web d'obtenir la position géographique de l'appareil de l'utilisateur. Cela peut être utile pour diverses applications, telles que les cartes, la navigation et le ciblage géographique.
Demande de permission pour accéder à la position
Pour utiliser Geolocation API, l'application web doit demander la permission de l'utilisateur pour accéder à sa position. Cela se fait via la méthode navigator.geolocation.getCurrentPosition().
Exemple d'utilisation de Geolocation API :
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude : ${latitude}, Longitude : ${longitude}`);
},
(error) => {
console.error('Erreur lors de l\'obtention de la géolocalisation :', error);
},
{
enableHighAccuracy: true, // Haute précision
timeout: 5000, // Délai d'attente de la réponse (ms)
maximumAge: 0 // Durée maximale pendant laquelle les données en cache peuvent être utilisées (ms)
}
);
} else {
console.log('La géolocalisation n\'est pas prise en charge par ce navigateur.');
}
Suivi de la position
La méthode navigator.geolocation.watchPosition() permet de suivre les changements de position de l'utilisateur.
Exemple de suivi de la position :
let watchId;
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude : ${latitude}, Longitude : ${longitude}`);
},
(error) => {
console.error('Erreur lors de l\'obtention de la géolocalisation :', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Arrêt du suivi de la position
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API permet à une application web d'afficher des notifications dans le système de l'utilisateur. Ceci est utile pour attirer l'attention de l'utilisateur sur des événements importants, même si l'onglet du navigateur n'est pas actif.
Demande de permission pour envoyer des notifications
Pour utiliser Notifications API, l'application web doit demander la permission à l'utilisateur pour envoyer des notifications.
Exemple de demande de permission :
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Permission de notification accordée.');
} else {
console.log('Permission de notification refusée.');
}
});
} else {
console.log('Les notifications ne sont pas prises en charge par ce navigateur.');
}
Envoi de notifications
Après avoir obtenu la permission, vous pouvez envoyer des notifications en utilisant le constructeur Notification
Exemple d'envoi de notification :
if (Notification.permission === 'granted') {
const options = {
body: 'Ceci est le corps de la notification',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Hello, world!', options);
// Gestion du clic sur la notification
notification.onclick = (event) => {
event.preventDefault(); // Empêche la navigation par défaut
window.open(notification.data.url, '_blank');
};
}
7.3 Autres Web API utiles
1. DeviceOrientation API
DeviceOrientation API permet d'obtenir des données sur l'orientation de l'appareil dans l'espace.
Exemple d'utilisation de DeviceOrientation API :
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha : ${event.alpha}, Beta : ${event.beta}, Gamma : ${event.gamma}`);
});
2. Battery Status API
Battery Status API fournit des informations sur l'état de la batterie de l'appareil.
Exemple d'utilisation de Battery Status API :
navigator.getBattery().then((battery) => {
console.log(`Niveau de batterie : ${battery.level * 100}%`);
console.log(`Batterie en charge : ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Niveau de batterie modifié : ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`État de charge de la batterie modifié : ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen API permet de passer une page web en mode plein écran.
Exemple d'utilisation de Fullscreen API :
const element = document.documentElement; // Tout le document
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Erreur lors de la tentative d'activation du mode plein écran : ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION