API информации о сети

API информации о сети предоставляет сведения о подключении системы с точки зрения общего типа подключения (например, 'wifi', 'cellular' и т. д.). Это можно использовать для выбора контента высокого разрешения или низкого разрешения в зависимости от подключения пользователя.

Интерфейс состоит из одного объекта NetworkInformation, экземпляр которого возвращается свойством Navigator.connection или свойством WorkerNavigator.connection.

NetworkInformation

Предоставляет информацию о подключении устройства к сети и обеспечивает возможность уведомления скриптов о том, что тип подключения изменился. Интерфейс NetworkInformation нельзя создать. Вместо этого к нему обращаются через интерфейс Navigator или интерфейс WorkerNavigator.

Navigator.connection Только для чтения

Возвращает объект NetworkInformation содержащий информацию о сетевом подключении устройства.

WorkerNavigator.connection Только для чтения

Предоставляет объект NetworkInformation, содержащий информацию о сетевом подключении устройства.

В этом примере отслеживаются изменения подключения пользователя.

let type = navigator.connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    `Connection type changed from ${type} to ${navigator.connection.effectiveType}`,
  );
  type = navigator.connection.effectiveType;
}

navigator.connection.addEventListener("change", updateConnectionStatus);

Объект подключения полезен для определения того, следует ли загружать ресурсы, которые занимают большой объем пропускной способности или памяти. Этот пример вызывается сразу после загрузки страницы, чтобы проверить тип подключения, при котором предварительная загрузка видео может быть нежелательна. Если обнаружено подключение по сотовой связи, флаг preloadVideo устанавливается в значение false. Для простоты и ясности, в этом примере проверяется только один тип подключения. В реальном сценарии использования, вероятно, будет использоваться оператор switch или какой-либо другой метод для проверки всех возможных значений NetworkInformation.type. Независимо от значения type, вы можете оценить скорость подключения через свойство NetworkInformation.effectiveType.

let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}

• События онлайн и офлайн