7.1 Geolocation API
Web APIs (Web Application Programming Interfaces) надають серйозні можливості для взаємодії веб-додатків з функціональністю браузера і пристрою користувача. Давайте розглянемо деякі з цих API, включаючи Geolocation і Notifications, а також їх використання.
Geolocation API дозволяє веб-додатку отримувати географічне положення пристрою користувача. Це може бути корисно для різних додатків, таких як карти, навігація і геотаргетинг.
Запит дозволу на доступ до місця
Щоб використовувати Geolocation API, веб-додаток має запросити у користувача дозвіл на доступ до його місця. Це робиться за допомогою методу navigator.geolocation.getCurrentPosition().
Приклад використання 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);
},
{
enableHighAccuracy: true, // Висока точність
timeout: 5000, // Таймаут очікування відповіді (мс)
maximumAge: 0 // Максимальний час, протягом якого можна використовувати кешовані дані (мс)
}
);
} else {
console.log('Geolocation не підтримується цим браузером.');
}
Відстеження місця
Метод navigator.geolocation.watchPosition() дозволяє відслідковувати зміни місцезнаходження користувача.
Приклад відстеження місцезнаходження:
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);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
}
// Зупинка відстеження місцезнаходження
function stopTracking() {
if (watchId) {
navigator.geolocation.clearWatch(watchId);
}
}
7.2 Notifications API
Notifications API дозволяє веб-додатку відображати сповіщення в системі користувача. Це корисно для привернення уваги користувача до важливих подій, навіть якщо вкладка браузера неактивна.
Запит дозволу на надсилання сповіщень
Щоб використовувати Notifications API, веб-додаток має запросити у користувача дозвіл на надсилання сповіщень.
Приклад запиту дозволу:
if ('Notification' in window) {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
console.log('Дозвіл на сповіщення надано.');
} else {
console.log('Дозвіл на сповіщення відхилено.');
}
});
} else {
console.log('Сповіщення не підтримуються цим браузером.');
}
Надсилання сповіщень
Після отримання дозволу можна надсилати сповіщення за допомогою конструктора Notification
Приклад надсилання сповіщення:
if (Notification.permission === 'granted') {
const options = {
body: 'Це тіло сповіщення',
icon: 'icon.png',
data: { url: 'https://example.com' }
};
const notification = new Notification('Привіт, світ!', options);
// Обробка кліка на сповіщення
notification.onclick = (event) => {
event.preventDefault(); // Запобігає переходу за замовчуванням
window.open(notification.data.url, '_blank');
};
}
7.3 Інші корисні Web API
1. DeviceOrientation API
DeviceOrientation API дозволяє отримувати дані про положення пристрою у просторі.
Приклад використання DeviceOrientation API:
window.addEventListener('deviceorientation', (event) => {
console.log(`Alpha: ${event.alpha}, Beta: ${event.beta}, Gamma: ${event.gamma}`);
});
2. Battery Status API
Battery Status API надає інформацію про стан батареї пристрою.
Приклад використання Battery Status API:
navigator.getBattery().then((battery) => {
console.log(`Рівень заряду батареї: ${battery.level * 100}%`);
console.log(`Заряд батареї: ${battery.charging}`);
battery.addEventListener('levelchange', () => {
console.log(`Рівень заряду батареї змінився: ${battery.level * 100}%`);
});
battery.addEventListener('chargingchange', () => {
console.log(`Стан зарядки батареї змінився: ${battery.charging}`);
});
});
3. Fullscreen API
Fullscreen API дозволяє перемикати веб-сторінку в повноекранний режим.
Приклад використання Fullscreen API:
const element = document.documentElement; // Весь документ
function toggleFullScreen() {
if (!document.fullscreenElement) {
element.requestFullscreen().catch((err) => {
console.error(`Помилка спроби увімкнення повноекранного режиму: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
document.getElementById('fullscreenButton').addEventListener('click', toggleFullScreen);
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ