Network Information API для адаптивного контента: резервный режим
Узнайте, как navigator.connection помогает выбирать ресурсы, как обрабатывать отсутствующие или меняющиеся подсказки и как соблюдать конфиденциальность.
Нужна структурированная документация по теме Платформа?
Эта статья относится к редакционной библиотеке. Для пошаговой настройки, справки и постоянных обновлений переходите сразу в соответствующий раздел docs.
Network Information API передаёт странице приблизительные сведения о текущем соединении через navigator.connection. Приложение может использовать их для выбора политики ресурсов, но это необязательные оценки, а не гарантия пропускной способности и не идентификатор пользователя. Надёжный подход начинается с полноценного базового варианта, проверяет наличие функции и делает любое ограничение обратимым.
Что предоставляет API
Объект NetworkInformation может предоставлять effectiveType, rtt, downlink, saveData, а в некоторых реализациях и type. effectiveType объединяет наблюдаемые условия в значения вроде slow-2g, 2g, 3g и 4g. rtt является оценкой времени в оба конца в миллисекундах, а downlink означает оценку скорости загрузки в мегабитах в секунду. saveData отражает просьбу пользователя сократить расход данных. Это рассчитанные браузером и уменьшенные с учётом приватности подсказки, а не постоянное измерение доступной пропускной способности.
Поддержка и точность зависят от браузера и контекста. Считайте navigator.connection необязательной возможностью и проверяйте каждое свойство перед использованием. Если объекта или свойства нет либо значение неожиданно, обязательный контент и элементы управления должны оставаться доступными.
Прогрессивная адаптация
Определите базовую политику, работающую без сетевых подсказок. Затем используйте небольшой набор именованных вариантов, например baseline, reduced и enhanced, для ограниченных решений: отложить необязательное видео, выбрать уже предусмотренный responsive-вариант изображения или отложить необязательный предварительный запрос. Семантический контент и доступные элементы управления должны сохраняться.
const connection = navigator.connection;
const slow =
connection && (connection.saveData || connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g');
const policy = slow ? 'reduced' : 'baseline';
// Применяем обратимый выбор ресурса; обязательный контент продолжает загружаться.
Не превращайте одну подсказку в барьер совместимости. Значение 4g не гарантирует успешную передачу большого файла, а отсутствие значения не доказывает медленное соединение. Настраивайте политику по реальным результатам: завершению загрузки, ошибкам декодирования, отменам и задержке ввода.
Реакция на изменения
Объект соединения может отправлять событие change. При прослушивании меняйте необязательную работу, а не удаляйте уже доступный контент. При ухудшении условий отменяйте или приостанавливайте ожидающее улучшение, а при улучшении предлагайте понятный повтор. Используйте debounce, чтобы колебания оценки не вызывали повторные загрузки.
Ограничивайте адаптацию текущей задачей. Если пользователь явно запросил документ в полном разрешении, он должен иметь возможность продолжить после понятного предупреждения или постепенной загрузки. Режим экономии данных полезен, но отличается от результата измерения сети и не должен молча отменять явный выбор.
Конфиденциальность и границы сервиса
Сетевые подсказки могут усиливать отпечаток при сочетании с другими сигналами браузера. Используйте их временно, только чтобы выбрать политику ресурсов. По умолчанию не помещайте исходные rtt, downlink или effectiveType в идентификаторы аккаунтов, долгосрочные журналы или аналитику. Если сервису нужна удалённая настройка, отправляйте краткосрочный выбор вроде reduced, объясняйте его эффект и не сохраняйте исходное значение браузера.
Адаптация, меняющая отправляемые или загружаемые данные, требует понятного объяснения и явного выбора пользователя. Изображение худшего качества или отложенная предзагрузка является решением продукта, а не разрешением собирать дополнительные данные. Обязательные запросы, разрешения и решения об аккаунте должны быть независимы от этого API.
Тестирование и устойчивый резервный режим
Проверьте отсутствие navigator.connection, наличие только части свойств, включённый saveData и событие change во время прерванной передачи. Проверяйте поведение, а не конкретное число: обязательный текст остаётся читаемым, клавиатурные элементы доступны, а необязательная работа восстанавливается без цикла повторов. Отдельно протестируйте браузер, который предоставляет API, но сообщает unknown как тип соединения.
Responsive-изображения, отложенная загрузка, обратное давление потоков, ограниченные кэши и отмена полезны и без API. Документируйте имена и ограничения политик, пересматривайте их после изменения браузера или нагрузки и записывайте результаты, а не классификацию оборудования или сети.
Руководство по отпечатку Network Information описывает последствия для приватности. Руководство по отпечатку Client Hints объясняет, почему подсказки в запросах должны соответствовать политике страницы.
Источники
Похожие статьи
Переведите BotBrowser из исследований в продакшн
Используйте эти руководства, чтобы понять модель, а затем перейти к кроссплатформенной валидации, изолированным контекстам и масштабируемому браузерному развертыванию.