JS об'єкт Navigator
Отримання базової інформації про браузер
Об'єкт Navigator в JavaScript є частиною API браузера, який надає інформацію про браузер та операційну систему. Через Navigator можна отримувати дані про версію браузера, платформу, на якій він працює, і іншу інформацію, що може бути корисною при адаптації веб-застосунків під конкретне середовище користувача.
Однією з основних завдань при роботі з об'єктом Navigator є визначення специфікацій користувацького середовища.
Версія браузера:
navigator.userAgent: Ця властивість повертає рядок, що ідентифікує браузер, так що веб-сайт може вирішити, як відображати контент або які функції використовувати.
console.log(navigator.userAgent);
Коли ви запустите цей код, ви побачите довгий рядок, який містить інформацію про ваш браузер, версію і платформу.
Платформа:
navigator.platform: Іноді може бути корисно знати, на якій платформі працює браузер (Windows, MacOS, Linux тощо).
console.log(navigator.platform);
Запустивши цей код, ви дізнаєтеся про операційну систему, яку використовує ваш комп'ютер.
Мовні налаштування:
navigator.language: Знаючи мовні налаштування користувача, ви можете автоматично відображати контент на відповідній мові або надавати рекомендації щодо мови.
console.log(navigator.language);
При запуску цього коду виведеться мовний код, наприклад "en-US" для американської англійської мови.
Робота з геолокацією
Об'єкт Navigator надає доступ до API геолокації, який дозволяє отримувати фізичне місцезнаходження пристрою.
Отримання поточного місцезнаходження:
navigator.geolocation.getCurrentPosition(): Цей метод надає поточне місцезнаходження користувача (якщо він дав згоду на його використання).
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude:", position.coords.latitude);
console.log("Longitude:", position.coords.longitude);
});
Коли ви запустите цей код, він запитає дозвіл на доступ до геолокації. Після отримання дозволу він виведе вашу широту та довготу.
Відстеження місцезнаходження:
navigator.geolocation.watchPosition(): Цей метод повертає ідентифікатор, який можна використовувати для відстеження змін місцезнаходження користувача в реальному часі.
let watchID = navigator.geolocation.watchPosition(function(position) {
console.log("Latitude:", position.coords.latitude);
console.log("Longitude:", position.coords.longitude);
});
// Для зупинки відстеження
// navigator.geolocation.clearWatch(watchID);
Після запуску цього коду ваше місцезнаходження буде відстежуватися та виводитися кожен раз, коли воно змінюється.
| Нотатка: | Коли працюєте з геолокацією, завжди пам'ятайте про приватність користувача. Ніколи не зберігайте місцезнаходження користувача без його відома або згоди. |
| Нотатка: | Для деяких функцій, таких як геолокація, браузери можуть вимагати дозвіл користувача. Уважно працюйте з цими запитами, інформуючи користувача, чому саме вам потрібен доступ до цієї інформації. |
| Нотатка: | Деяка інформація, яку надає Додаткова інформація про браузер може бути корисною для адаптації засобів, проте завжди слід ставитися обережно до інформації, яка відкривається третім сторонам, щоб забезпечити конфіденційність користувачів. |
| Порада: | Хоча об'єкт |
Синтаксис
let ua = navigator.userAgent;Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
3 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | |
|---|---|
1.8 |
Приклади
В цьому прикладі ми використовуємо властивість navigator.language для отримання мови, яку вибрав користувач у своєму браузері. Це може бути корисно для завантаження правильних мовних ресурсів на веб-сайті.
let userLang = navigator.language || navigator.userLanguage;
console.log(`Мова користувача: ${userLang}`);
В коді перевіряється наявність geolocation в об'єкті navigator, і якщо ця можливість доступна, отримуємо поточну позицію користувача.
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(`Широта: ${position.coords.latitude}, Довгота: ${position.coords.longitude}`);
});
} else {
console.log("Geolocation не підтримується цим браузером");
}
Сервісні робітники - це одна з ключових технологій, що дозволяють створювати прогресивні веб-застосунки (PWA). Щоб гарантувати, що сервісні робітники підтримуються браузером, можна використовувати об'єкт Navigator.
Тут ми перевіряємо, чи підтримує браузер сервісних робітників, і якщо так, реєструємо сервісний робітник з файлу service-worker.js.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Сервісний робітник зареєстровано:', registration);
})
.catch(function(error) {
console.log('Реєстрація сервісного робітника не вдалася:', error);
});
} else {
console.log('Сервісні робітники не підтримуються цим браузером.');
}
Методи
javaEnabled()- Перевіряє підтримку Java у браузері користувача.
taintEnabled()- Перевіряє, чи ввімкнено в браузері механізм "забруднення" даних.
Властивості
appCodeName- Відображає кодову назву браузера, в якому виконується код.
appName- Повертає назву браузера, який виконує код.
appVersion- Повертає версію браузера, який використовує користувач.
platform- Повертає рядок, який ідентифікує операційну систему користувача.
product- Повідомляє назву рушія браузера.
language- Повідомляє про переважну мову користувача, налаштовану в браузері.
cookieEnabled- Повідомляє, чи ввімкнено підтримку cookies в браузері користувача.
geolocation- Надає доступ до API геолокації для визначення місцезнаходження користувача.
userAgent- Повідомляє про рядок агента користувача, що ідентифікує браузер.
onLine- Визначає, чи має користувач підключення до інтернету.