Об'єкт navigator

JavaScriptJunior~2 хв читання

navigator, це властивість об'єкта window, яка представляє Browser Object Model (BOM), інтерфейс для взаємодії JavaScript з браузером, а не зі сторінкою. Через нього код дізнається характеристики браузера й пристрою та отримує доступ до системних можливостей: геолокації, камери, буфера обміну.

Теорія

TL;DR

navigator, це об'єкт усередині window: window.navigator === navigator повертає true.
Він представляє BOM, тобто модель браузера, а не модель документа.
Дає інформацію: тип браузера, ОС, мову, онлайн-статус, cookie, ядра, пам'ять.
Дає можливості: геолокація, буфер обміну, share, вібрація, камера й мікрофон, Service Workers.
Багато його API вимагають дозволу користувача та захищеного контексту (HTTPS).

Швидкий приклад

javascript

console.log(window.navigator === navigator); // true

console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.onLine);

Виведе приблизно таке:

text

"Mozilla/5.0 (Windows NT 10.0; Win64; x64)..."
"uk-UA"
true

Що таке `navigator`

navigator, це властивість об'єкта window. Вона представляє Browser Object Model (BOM), інтерфейс, який дозволяє JavaScript взаємодіяти з браузером, а не зі сторінкою. Пошук і зміна елементів, це робота document, а navigator відповідає за середовище, у якому цей документ відкрито.

javascript

console.log(window.navigator === navigator); // true

Основні властивості `navigator`

Властивість	Що робить
`navigator.userAgent`	рядок, що описує браузер і ОС
`navigator.language`	мова інтерфейсу користувача (`"en-US"`, `"uk-UA"`)
`navigator.languages`	масив бажаних мов
`navigator.platform`	платформа або ОС (`"Win32"`, `"MacIntel"`, `"Linux x86_64"`)
`navigator.onLine`	`true`, якщо є підключення до мережі
`navigator.cookieEnabled`	`true`, якщо в браузері дозволені cookie
`navigator.hardwareConcurrency`	кількість логічних ядер процесора
`navigator.deviceMemory`	обсяг оперативної пам'яті пристрою (у ГБ)
`navigator.vendor`	виробник браузера (наприклад, `"Google Inc."`)

Методи `navigator`

Метод	Опис
`navigator.geolocation.getCurrentPosition()`	отримати геолокацію користувача
`navigator.clipboard.writeText()` / `readText()`	робота з буфером обміну
`navigator.share()`	викликати системне вікно «Поділитися» (на мобільних)
`navigator.vibrate()`	вібрація на мобільних пристроях
`navigator.mediaDevices.getUserMedia()`	доступ до камери й мікрофона
`navigator.serviceWorker`	робота із Service Workers (PWA, офлайн-режим)
`navigator.permissions.query()`	перевірка, чи дозволені API (наприклад, геолокація)

Приклади використання

Перевірити браузер:

javascript

if (navigator.userAgent.includes("Chrome")) {
  console.log("The user is in Chrome");
}

Перевірити з'єднання:

javascript

if (!navigator.onLine) {
  alert("No internet connection!");
}

Отримати поточні координати:

javascript

navigator.geolocation.getCurrentPosition(pos => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

Цей метод запитує дозвіл у користувача.

Скопіювати текст у буфер обміну:

javascript

navigator.clipboard.writeText("Hello, world!");

Отримати мову користувача:

javascript

console.log(`Your language: ${navigator.language}`);

Структура і підсумок

text

window
 |-- navigator
      |-- userAgent
      |-- language
      |-- geolocation
      |-- clipboard
      |-- mediaDevices
      |-- ...

Питання	Відповідь
Що робить	Надає інформацію про браузер і пристрій
Де живе	Усередині `window` (`window.navigator`)
Що можна дізнатися	тип браузера, мову, ОС, онлайн-статус
Що можна робити	отримувати геолокацію, копіювати в буфер, викликати share, використовувати камеру
Типовий приклад	`navigator.userAgent`, `navigator.onLine`, `navigator.geolocation.getCurrentPosition()`

Отже, navigator, це об'єкт, через який JavaScript дізнається характеристики браузера та пристрою і взаємодіє із системними можливостями: геолокацією, камерою, буфером обміну, PWA тощо.

Типові помилки

Визначати браузер за navigator.userAgent. Цей рядок легко підмінити, і браузери навмисно його маскують; надійніше перевіряти саму можливість (feature detection).
Вважати navigator.onLine === true доказом доступу до інтернету. Воно означає лише наявність мережевого підключення, а не те, що сервер відповідає.
Використовувати navigator.platform. Ця властивість застаріла; сучасна заміна, це navigator.userAgentData.
Викликати navigator.clipboard, geolocation чи mediaDevices на HTTP. Ці API працюють лише в захищеному контексті (HTTPS або localhost).
Забувати обробити відмову користувача в дозволі: у getCurrentPosition() є другий колбек для помилки, і без нього код мовчки нічого не робить.
Очікувати, що deviceMemory і hardwareConcurrency є скрізь. Вони підтримуються не в усіх браузерах і повертають округлені значення.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.