Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Об'єкт navigator». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`navigator`, це властивість об'єкта `window`, яка представляє Browser Object Model (BOM) і дає JavaScript змогу взаємодіяти з браузером та пристроєм, а не зі сторінкою.** Через нього можна дізнатися тип браузера й операційну систему (`userAgent`, `platform`, `vendor`), мову інтерфейсу (`language`, `languages`), статус мережі (`onLine`), чи дозволені cookie (`cookieEnabled`), кількість логічних ядер (`hardwareConcurrency`) та обсяг пам'яті (`deviceMemory`). Він також відкриває системні можливості: геолокацію (`navigator.geolocation`), буфер обміну (`navigator.clipboard`), системне вікно «Поділитися» (`navigator.share()`), вібрацію (`navigator.vibrate()`), камеру й мікрофон (`navigator.mediaDevices`), Service Workers для PWA та перевірку дозволів (`navigator.permissions`). ```javascript console.log(window.navigator === navigator); // true console.log(navigator.language); // "uk-UA" console.log(navigator.onLine); // true ``` **Ключове:** `navigator`, це вікно JavaScript у характеристики браузера та системні можливості пристрою.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**`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` є скрізь. Вони підтримуються не в усіх браузерах і повертають округлені значення.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.