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" для американської англійської мови.

автор: Bond

Робота з геолокацією

Об'єкт 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);

Після запуску цього коду ваше місцезнаходження буде відстежуватися та виводитися кожен раз, коли воно змінюється.

автор: Bond

Порада

Хоча об'єкт Navigator є стандартною частиною більшості сучасних браузерів, завжди варто перевіряти, чи підтримується конкретний метод або властивість, перш ніж його використовувати.

автор: Bond
Нотатка

Коли працюєте з геолокацією, завжди пам'ятайте про приватність користувача. Ніколи не зберігайте місцезнаходження користувача без його відома або згоди.

автор: Bond
Нотатка

Для деяких функцій, таких як геолокація, браузери можуть вимагати дозвіл користувача. Уважно працюйте з цими запитами, інформуючи користувача, чому саме вам потрібен доступ до цієї інформації.

автор: Bond
Нотатка

Деяка інформація, яку надає Navigator, може бути використана зловмисниками для цілеспрямованих атак на користувачів. Важливо обережно використовувати інформацію, отриману з Navigator, та не викладати її в публічний доступ без необхідності.

Додаткова інформація про браузер може бути корисною для адаптації засобів, проте завжди слід ставитися обережно до інформації, яка відкривається третім сторонам, щоб забезпечити конфіденційність користувачів.

автор: Bond

Синтаксис

let ua = navigator.userAgent;

методи

Метод Опис
javaEnabled Перевіряє підтримку Java у браузері користувача.
taintEnabled Перевіряє, чи ввімкнено в браузері механізм "забруднення" даних.

властивості

Властивість Опис
appCodeName Відображає кодову назву браузера, в якому виконується код.
appName Повертає назву браузера, який виконує код.
cookieEnabled Повідомляє, чи ввімкнено підтримку cookies в браузері користувача.
geolocation Надає доступ до API геолокації для визначення місцезнаходження користувача.
language Повідомляє про переважну мову користувача, налаштовану в браузері.
onLine Визначає, чи має користувач підключення до інтернету.
product Повідомляє назву рушія браузера.
userAgent Повідомляє про рядок агента користувача, що ідентифікує браузер.
appVersion Повертає версію браузера, який використовує користувач.
platform Повертає рядок, який ідентифікує операційну систему користувача.

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 3 12 4
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1
Підтримка: серверні переглядачі
Переглядач Node.js Deno
21.0.0 1.8

Приклади

+ запропонувати свій приклад у пісочниці

В цьому прикладі ми використовуємо властивість navigator.language для отримання мови, яку вибрав користувач у своєму браузері. Це може бути корисно для завантаження правильних мовних ресурсів на веб-сайті.

let userLang = navigator.language || navigator.userLanguage; 
console.log(`Мова користувача: ${userLang}`);
автор: Bond

В коді перевіряється наявність geolocation в об'єкті navigator, і якщо ця можливість доступна, отримуємо поточну позицію користувача.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log(`Широта: ${position.coords.latitude}, Довгота: ${position.coords.longitude}`);
  });
} else {
  console.log("Geolocation не підтримується цим браузером");
}
автор: Bond

Сервісні робітники - це одна з ключових технологій, що дозволяють створювати прогресивні веб-застосунки (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('Сервісні робітники не підтримуються цим браузером.');
}
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід