7.1 Geolocation API
Web API-lər (Web Application Programming Interfaces) veb tətbiqlərinin brauzer və istifadəçi cihazının funksionallığı ilə qarşılıqlı əlaqəsi üçün geniş imkanlar təqdim edir. Gəlin bu API-lərdən, o cümlədən Geolocation və Notifications-dan və onların istifadəsindən bəhs edək.
Geolocation API istifadəçinin cihazının coğrafi mövqeyini veb tətbiqə təmin edir. Bu, xəritələr, naviqasiya və geotargeting kimi müxtəlif tətbiqlər üçün faydalı ola bilər.
Mövqeyə giriş üçün icazə istəməsi
Geolocation API-dən istifadə etmək üçün veb tətbiq istifadəçidən onun mövqeyinə giriş icazəsi istəyir. Bu, navigator.geolocation.getCurrentPosition() metodu ilə həyata keçirilir.
Geolocation API istifadəsi nümunəsi:
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Enlem: ${latitude}, Uzunluq: ${longitude}`);
},
(error) => {
console.error('Geolokasiyanı əldə etməkdə xəta:', error);
},
{
enableHighAccuracy: true, // Yüksək dəqiqlik
timeout: 5000, // Cavab gözləmə vaxtı (ms)
maximumAge: 0 // Keşlənmiş məlumatları istifadə etmə müddəti (ms)
}
);
} else {
console.log('Geolokasiya bu brauzer tərəfindən dəstəklənmir.');
}
Mövqeyin izlənməsi
navigator.geolocation.watchPosition() metodu istifadəçinin mövqeyində dəyişiklikləri izləməyə imkan verir.
Mövqeyin izlənməsi nümunəsi:
let watchId;
if ('geolocation' in navigator) {
watchId = navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`Enlem: ${latitude}, Uzunluq: ${longitude}`);
},
(error) => {
console.error('Geolokasiyanı əldə etməkdə xəta:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Mövqeyin izlənməsinin dayandırılması
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API veb-tətbiqə istifadəçi sistemində bildirişləri göstərməyə imkan verir. Bu, istifadəçinin diqqətini vacib hadisələrə cəlb etmək üçün faydalıdır, hətta brauzer səhifəsi aktiv olmasa belə.
Bildiriş göndərməyə icazənin alınması
Notifications API istifadə etmək üçün veb-tətbiq istifadəçidən bildiriş göndərmək üçün icazə almalıdır.
İcazə istəyinin nümunəsi:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Bildiriş göndərmə icazəsi verildi.');
} else {
console.log('Bildiriş göndərmə icazəsi rədd edildi.');
}
});
} else {
console.log('Bu brauzer bildirişləri dəstəkləmir.');
}
Bildirişlərin göndərilməsi
İcazə alındıqdan sonra Notification konstruktorundan istifadə edərək bildirişlər göndərilə bilər.
Bildiriş göndərmə nümunəsi:
if (Notification.permission === 'granted') {
const options = {
body: 'Bu bildirişin məzmunudur',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Salam, dünya!', options);
// Bildiriş üzərində klik işlənməsi
notification.onclick = (event) => {
event.preventDefault(); // Varsayılan keçidin qarşısını alır
window.open(notification.data.url, '_blank');
};
}
7.3 Digər faydalı Web API-lər
1. DeviceOrientation API
DeviceOrientation API cihazın məkan üzrə mövqeyini öyrənməyə imkan verir.
DeviceOrientation API-dən istifadə nümunəsi:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status API cihazın batareyasının vəziyyəti haqqında məlumat verir.
Battery Status API-dən istifadə nümunəsi:
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 veb-səhifəni tam ekran rejiminə keçirməyə imkan verir.
Fullscreen API-dən istifadə nümunəsi:
const element = document.documentElement; // Bütün sənəd
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Tam ekran rejimini aktivləşdirmək cəhdində səhv: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
GO TO FULL VERSION