Что такое «навигатор» в прогрессивных веб-приложениях?

Как "навигатор" позволяет постепенно улучшать ваши веб-приложения

Tom • Прогрессивные веб-приложения, Обучение • 20 10 2021

Что такое «навигатор» в веб-приложениях?

Если поддерживается, глобальный объект «окно» в вашем веб-приложении обеспечивает доступ к объекту «навигатор». «Навигатор» содержит потенциально много информации о приложении и может предоставить вам доступ к определенным событиям, на которые можно подписаться. Это помогает вам писать по-настоящему современные веб-приложения, которые могут казаться почти нативными.

Экземпляр «навигатора» напрямую привязан к пользовательскому агенту, то есть к приложению, запускающему ваше веб-приложение, - к браузеру.

Как «навигатор» может постепенно улучшать ваше приложение

«Постепенное улучшение» означает, что «навигатор» предлагает определенный набор возможностей в зависимости от браузера, в котором размещено приложение. Например, в Chrome от Google всегда было реализовано большинство функций, даже нестабильных, поскольку Google постоянно расширяет границы прогрессивных веб-приложений.

Как вы увидите во всех примерах в документации MDN, вам необходимо убедиться, что переменная или функция, к которой вы хотите получить доступ, действительно доступны в «навигаторе».

// Just a simple example of how
// to check for availability 
// of features.


function checkNetwork(){
  if("connection" in navigator){
    // Now it's safe to use 'navigator.connection'.
    // 👉 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
  }
  
  // Alternative if you're using:
  // 'navigator?.connection'
}

javascriptLanguageCheck out all coding posts

Некоторая информация, которую «навигатор» позволяет использовать в вашем приложении:

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

Вы действительно можете увидеть некоторые из этих функций вживую и в действии на этом самом PWA. Просто прокрутите вниз до конца любой страницы, где вы можете увидеть несколько доступных реализаций аппаратных метрик, например количество ядер ЦП.

Работа с «навигатором»

Эта статья предназначена только для того, чтобы дать вам очень краткое представление о возможностях, которые предоставляет «навигатор» для прогрессивных веб-приложений. У MDN есть отличная страница обзора, а также документация по каждой из доступных функций.

Для Google Chrome существует также проект «Project Fugu», в котором реализованы экспериментальные новые функции, доступные только после флага функции в браузерах Chromium.

Действия