BOM. Объект Navigator

JavaScript имеет доступ к браузерному окружению, которое значительно расширяет его возможности. BOM (Browser Object Model) - это один из важных элементов браузерного окружения для JavaScript. Одним из объектов браузерного окружения является Navigator (window.navigator, или просто navigator).  Он позволяет скриптам запрашивать его и регистрироваться для выполнения некоторых действий.

С помощью объекта window.navigator  можно получить информацию о браузере и операционной системе, в которой браузер запущен. Это свойство представляет объект Navigator, у которого есть ряд свойств и методов. Основные свойства:

• appCodeName: содержит внутреннее кодовое имя текущего браузера (не стоит полагаться на это свойство, так как обычно оно возвращает Mozilla).
• appName : содержит официальное имя текущего браузера (ненадежно, поскольку каждый браузер выводит значение Netscape).
• appVersion : содержит номер версии текущего браузера (ненадежно)
• battery: представляет объект типа BatteryManager, который позволяет применять Battery Status API для взаимодействия со статусом батареи.
• bluetooth - возвращает Bluetoothобъект для текущего документа, предоставляя доступ к функциональным возможностям Web Bluetooth API
• cookieEnabled: содержит информацию о том, включены файлы cookie или нет.
• geolocation: представляет объект типа Geolocation, который позволяет применять Geolocation API для работы с геолокацией (только в https://).
• language: содержит строку, указывающую предпочтительный язык пользователя. Обычно этот язык также используется в интерфейсе соответствующего браузера. Если предпочтительный язык не может быть определен, это свойство содержит значение null.
• languages: содержит список строк, указывающих предпочтительные языки пользователя, причем наиболее предпочтительный язык находится в первой позиции (что соответствует языку из свойства language).
• onLine: логическое значение, проверяющее наличие сетевого подключения. Это не обязательно подключение к Интернету!
• platform: содержит информацию об используемой операционной системе (ненадежно)
• plugins: содержит список плагинов, поддерживаемых браузером.
• pdfViewerEnabled: унифицированный метод проверки возможности браузера отображать PDF-файлы
• product: содержит название продукта текущего браузера. Однако в целях обратной совместимости в каждом браузере возвращается значение Gecko
• productSub: содержит вложенную метку текущего браузера (20030107 или 20100101)..
• serviceWorker: представляет объект ServiceWorkerContainer, который позволяет работать с API Service Worker.
• userAgent: содержит строку, идентифицирующую используемый браузер (тоже ненадежно).
• vendor : содержит информацию о производителе браузера (одно из значений "Apple Computer, Inc.", "Google Inc." или пустая строка).
• vendorSub : предназначен для получения дополнительной информации о производителе браузера, но всегда содержит пустую строку

Давайте посмотрим на значения некоторых свойств:

Стоит отметить, что объект Navigator имеет кучу свойств для определения типа браузера, однако ни одно из них нельзя считать надежным. Если раньше нередко применялось свойство userAgent для идентификации браузера, то теперь это свойство для двух разных браузеров может возвращать одинаковые значения (например, Edge как Chrome). Поэтому также не может считаться надежным.

Для определения браузера можно использовать следующий скрипт:

Проверьте сами корректность скрипта:

Здесь вы увидите не только название браузера, но и всю строку, которая возвращается свойством navigator.userAgent. Посмотрите на ее значение в разных браузерах - увидите, насколько многие из них используют Chrome в качестве движка.

Проверка mobile или desktop

Еще вам может потребоваться проверка на то, к какому типу относится устройство - к мобильным или стационарным. Для этого тоже можно использовать свойство navigator.userAgent и регулярные выражения.

Проверяем:

Данные о скорости Интернет-соединения

С помощью свойства navigator.connection.downlink можно получить сведения о скорости вашего Интернет-соединения.

See the Pen Connection speed (JavaScript) by Burmese Potato (@BurmesePotato) on CodePen.

Данные о геолокации

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

Для того чтобы узнать вашу геолокацию, нужно, во-первых, иметь https-соединение, а во-вторых, разрешить вашему приложению/сайту/странице доступ к данным о местоположении:

Свойство navigator.geolocationпредставляет собой объект, способный программно получить местоположение устройства и предоставляет скрипту доступ к нему. Это позволяет, например, связать местоположение пользователя с картой или получить данные о погоде. Для этого можно использовать несколько методов:

• getCurrentPosition(success, error) - определяет текущее местоположение устройства и возвращает GeolocationPositionобъект с данными.
• watchPosition(success, error, options) - возвращает longзначение, представляющее вновь созданную функцию обратного вызова, которая будет вызываться при каждом изменении местоположения устройства.
• clearWatch() - удаляет определенный обработчик, ранее установленный с помощью watchPosition().

Метод getCurrentPosition()

Метод navigator.geolocation.getCurrentPosition(success, error) получает текущее местоположение пользователя (широту и долготу). Он асинхронный — то есть не возвращает данные сразу, а вызывает функции-обработчики позже, когда данные будут готовы или возникнет ошибка.

Аргументы:

• success - функция обратного вызова (callback), которая будет вызвана при успешном получении координат. В неё браузер передаёт объект с информацией о позиции.
  
  JavaScript

  function success(position) { console.log(position); }

  1 2 3

  function success(position) {   console.log(position); }

  
  Что внутри position:
  
  Параметр position

  JavaScript

  position.coords.latitude // широта position.coords.longitude // долгота position.coords.accuracy // точность (в метрах) position.timestamp // метка времени

  1 2 3 4

  position.coords.latitude      // широта position.coords.longitude     // долгота position.coords.accuracy      // точность (в метрах) position.timestamp            // метка времени

• error - функция обратного вызова, которая вызывается в случае ошибки: например, если пользователь запретил доступ к геолокации или если она недоступна.
  
  JavaScript

  function error(err) { console.warn(`Ошибка (${err.code}): ${err.message}`); }

  1 2 3

  function error(err) {   console.warn(`Ошибка (${err.code}): ${err.message}`); }

  
  Типы ошибок (в err.code):
  • PERMISSION_DENIED - пользователь запретил доступ
  • POSITION_UNAVAILABLE - недоступна информация о местоположении
  • TIMEOUT - превышено время ожидания получения координат

Итого, получаем такой код:

Для получение данных о геолокации с помощью метода getCurrentPosition() или watchPosition()  нужно передать в него ряд параметров:

Параметры:

• enableHighAccuracy: false | true - запрашивает максимально точные координаты, если true (например, GPS на телефоне).
• Когда false: Используются менее точные, но более быстрые и экономные источники (Wi-Fi, сотовая сеть). Можно сказать, что в случае true — точность может быть до нескольких метров, но может занять больше времени и расходует больше энергии. А в случае false — быстрее, но точность ниже.
• timeout: 8000 - максимальное время в миллисекундах, в течение которого браузер пытается получить координаты. В данном примере: если за 8 секунд координаты не получены — вызывается error().
• maximumAge: 0 - значение: время (в миллисекундах), которое указывает, насколько старые кэшированные координаты допустимы.
  0 означает: всегда получать "свежие" данные. Что может быть: maximumAge: 60000 (60 секунд) — браузер может использовать координаты, полученные до минуты назад, если они есть в кеше. maximumAge: Infinity — можно использовать любые закэшированные координаты, даже очень старые.

Синтаксис метода watchPosition()

• success — функция, вызываемая каждый раз при обновлении координат.

• error — вызывается при ошибках (такие же, как и в getCurrentPosition()).

• options (необязательный объект) — можно указать настройки, например, точность и интервал обновления.

Здесь вы можете посмотреть свои координаты. Если это не сработает на данном сайте, нажмите на кнопку , перейдите на codepen.io и посмотрите там, предварительно разрешив доступ к данным о местоположении. Его всегда можно отключить.

See the Pen Geolocator - JS by HTML-plus (@ambassador) on CodePen.

Данные о погоде

На основе геолокации можно получить данные о погоде и вывести их. В примере мы используем метод  getCurrentPosition().

Для примера ниже вам нужно будет зарегистрироваться на сайте openweathermap.org и получить API-код.

See the Pen Погода по геолокации by HTML-plus (@ambassador)  on CodePen.

Еще один вариант Weather App от Dima Karmazin

See the Pen Weather app by Dima Karmazin (@Dima_Gapfild) on CodePen.

В примере ниже мы отслеживаем координаты вашего устройства, и  при клике на кнопку останавливаем это отслеживание. Здесь использованы методы watchPosition() и clearWatch().

See the Pen Отслеживание координат by HTML-plus (@ambassador) on CodePen.

Геолокация на карте через  OpenStreetMap

Мы также можем получить данные о геолокации для того, чтобы отобразить точку на карте. Используем для этого Leaflet + OpenStreetMap.

See the Pen геолокация на OpenStreetMap by HTML-plus (@ambassador) on CodePen.

Преимущества Leaflet + OpenStreetMap:

• Без ключей и регистрации.
• Бесплатно и open-source.
• Быстро загружается.
• Подходит для простых и средне-сложных карт.

Об использование Navigator Clipboard API можно почитать в отдельной статье.