7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) offrono grandi opportunità per l'interazione delle applicazioni web con le funzionalità del browser e del dispositivo dell'utente. Diamo un'occhiata ad alcuni di questi API, tra cui Geolocation e Notifications, e come utilizzarli.
Geolocation API consente a un'applicazione web di ottenere la posizione geografica del dispositivo dell'utente. Questo può essere utile per varie applicazioni, come mappe, navigazione e geotargeting.
Richiedere l'autorizzazione per accedere alla posizione
Per utilizzare Geolocation API, l'applicazione web deve richiedere all'utente l'autorizzazione per accedere alla sua posizione. Questo viene fatto usando il metodo navigator.geolocation.getCurrentPosition().
Esempio di utilizzo di Geolocation API:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
},
(error) => {
console.error('Error getting geolocation:', error);
},
{
enableHighAccuracy: true, // Alta precisione
timeout: 5000, // Timeout in attesa di risposta (ms)
maximumAge: 0 // Massimo tempo in cui è possibile utilizzare i dati memorizzati nella cache (ms)
}
);
} else {
console.log('Geolocation is not supported by this browser.');
}
Tracciamento della posizione
Il metodo navigator.geolocation.watchPosition() consente di tracciare le modifiche alla posizione dell'utente.
Esempio di tracciamento della posizione:
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('Error getting geolocation:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Interrompere il tracciamento della posizione
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API consente a un'applicazione web di visualizzare notifiche nel sistema dell'utente. Questo è utile per attirare l'attenzione dell'utente su eventi importanti, anche se la scheda del browser non è attiva.
Richiedere l'autorizzazione per inviare notifiche
Per utilizzare Notifications API, l'applicazione web deve richiedere all'utente l'autorizzazione per inviare notifiche.
Esempio di richiesta di autorizzazione:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Notification permission granted.');
} else {
console.log('Notification permission denied.');
}
});
} else {
console.log('Notifications are not supported by this browser.');
}
Invio delle notifiche
Dopo aver ottenuto il permesso, è possibile inviare notifiche utilizzando il costruttore Notification
Esempio di invio di una notifica:
if (Notification.permission === 'granted') {
const options = {
body: 'Questo è il corpo di una notifica',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Ciao, mondo!', options);
// Gestione del clic sulla notifica
notification.onclick = (event) => {
event.preventDefault(); // Evita il comportamento predefinito
window.open(notification.data.url, '_blank');
};
}
7.3 Altri utili Web API
1. DeviceOrientation API
DeviceOrientation API consente di ottenere dati sulla posizione del dispositivo nello spazio.
Esempio di utilizzo di DeviceOrientation API:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status API fornisce informazioni sullo stato della batteria del dispositivo.
Esempio di utilizzo di Battery Status API:
navigator.getBattery().then((battery) => {
console.log(`Battery level: ${battery.level * 100}%`);
console.log(`Battery charging: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Battery level changed: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Battery charging state changed: ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen API consente di passare una pagina web in modalità schermo intero.
Esempio di utilizzo di Fullscreen API:
const element = document.documentElement; // L'intero documento
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Errore nel tentativo di attivare la modalità schermo intero: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION