7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) bieten ernsthafte Möglichkeiten für die Interaktion von Webanwendungen mit der Funktionalität des Browsers und des Benutzergeräts. Lass uns einige dieser APIs betrachten, darunter Geolocation und Notifications, und wie man sie verwendet.
Das Geolocation API ermöglicht es einer Webanwendung, die geografische Position des Benutzergeräts zu erhalten. Dies kann nützlich sein für verschiedene Anwendungen wie Karten, Navigation und Geotargeting.
Anfrage um Erlaubnis für den Standortzugriff
Um das Geolocation API zu verwenden, muss die Webanwendung die Erlaubnis des Benutzers anfordern, um auf seinen Standort zuzugreifen. Dies geschieht mit der Methode navigator.geolocation.getCurrentPosition().
Beispiel für die Verwendung von Geolocation API:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Breitengrad: ${latitude}, Längengrad: ${longitude}`);
},
(error) => {
console.error('Fehler beim Abrufen der Geolokalisierung:', error);
},
{
enableHighAccuracy: true, // Hohe Genauigkeit
timeout: 5000, // Zeitlimit für die Antwort (ms)
maximumAge: 0 // Maximale Zeit, für die zwischengespeicherte Daten verwendet werden können (ms)
}
);
} else {
console.log('Geolocation wird von diesem Browser nicht unterstützt.');
}
Verfolgung des Standorts
Die Methode navigator.geolocation.watchPosition() ermöglicht die Verfolgung von Standortänderungen des Benutzers.
Beispiel für die Verfolgung des Standorts:
let watchId;
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Breitengrad: ${latitude}, Längengrad: ${longitude}`);
},
(error) => {
console.error('Fehler beim Abrufen der Geolokalisierung:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Stoppen der Standortverfolgung
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API erlaubt es einer Webanwendung, Benachrichtigungen im System des Benutzers anzuzeigen. Dies ist nützlich, um die Aufmerksamkeit des Benutzers auf wichtige Ereignisse zu lenken, selbst wenn der Browsertab nicht aktiv ist.
Anfrage um Erlaubnis zum Senden von Benachrichtigungen
Um das Notifications API zu verwenden, muss die Webanwendung die Erlaubnis des Benutzers anfordern, Benachrichtigungen zu senden.
Beispiel für die Anfrage um Erlaubnis:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Benachrichtigungsberechtigung erteilt.');
} else {
console.log('Benachrichtigungsberechtigung verweigert.');
}
});
} else {
console.log('Benachrichtigungen werden von diesem Browser nicht unterstützt.');
}
Senden von Benachrichtigungen
Nach Erhalt der Erlaubnis können Benachrichtigungen mit dem Notification-Konstruktor gesendet werden.
Beispiel für das Senden einer Benachrichtigung:
if (Notification.permission === 'granted') {
const options = {
body: 'Dies ist ein Benachrichtigungstext',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Hallo Welt!', options);
// Behandlung des Klicks auf die Benachrichtigung
notification.onclick = (event) => {
event.preventDefault(); // Verhindert den Standardübergang
window.open(notification.data.url, '_blank');
};
}
7.3 Andere nützliche Web API
1. DeviceOrientation API
Das DeviceOrientation API ermöglicht den Zugriff auf Daten über die Ausrichtung des Geräts im Raum.
Beispiel für die Verwendung von DeviceOrientation API:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Das Battery Status API liefert Informationen über den Zustand der Gerätebatterie.
Beispiel für die Verwendung des Battery Status API:
navigator.getBattery().then((battery) => {
console.log(`Akkustand: ${battery.level * 100}%`);
console.log(`Akku wird geladen: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Akkustand geändert: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Ladezustand des Akkus geändert: ${battery.charging}`);
});
});
3. Fullscreen API
Das Fullscreen API ermöglicht das Umschalten einer Webseite in den Vollbildmodus.
Beispiel für die Verwendung des Fullscreen API:
const element = document.documentElement; // Gesamtes Dokument
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Fehler beim Versuch, den Vollbildmodus zu aktivieren: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION