Важно понимать, как работает ваше приложение или сайт при плохом или нестабильном подключении, и учитывать это при разработке. Вам могут помочь различные инструменты.
Тестирование при низкой пропускной способности и высокой задержке
Все больше людей пользуются интернетом на мобильных устройствах. Даже дома многие отказываются от фиксированного широкополосного доступа в пользу мобильного.
В этом контексте важно понимать, как работает ваше приложение или сайт при плохом или ненадежном подключении. Существует множество программных инструментов, которые позволяют эмулировать и симулировать низкую пропускную способность и высокую задержку.
Эмуляция ограничения пропускной способности сети
При создании или обновлении сайта необходимо обеспечить его адекватную производительность в различных условиях подключения. Для этого есть несколько инструментов.
Инструменты браузера
Инструменты разработчика Chrome позволяют протестировать сайт при разных скоростях загрузки и скачивания и времени прохождения сигнала, используя стандартные или пользовательские настройки на панели "Сеть". Подробнее о том, как начать работу с инструментом "Анализ эффективности сети"…
Системные инструменты
Network Link Conditioner – это панель настроек, доступная на компьютерах Mac, если вы установите Hardware IO Tools для Xcode.
Эмуляция устройств
Эмулятор Android позволяет имитировать различные условия сети при запуске приложений (включая веб-браузеры и гибридные веб-приложения) на Android.
Для iPhone можно использовать Network Link Conditioner, чтобы симулировать ухудшение условий сети (см. выше).
Протестируйте работу сайта в разных местоположениях и сетях
Качество подключения зависит от местоположения сервера и типа сети.
WebPagetest – это онлайн-сервис, который позволяет тестировать производительность сайта в разных сетях и регионах. Например, вы можете протестировать свой сайт на сервере в Индии в сети 2G или по кабелю из города в США.
Выберите местоположение, а затем в расширенных настройках выберите тип подключения. Вы даже можете автоматизировать тестирование с помощью скриптов (например, для входа на сайт) или RESTful API. Это позволяет включить проверку подключения в процессы сборки или ведение журнала производительности.
Fiddler поддерживает глобальное проксирование через GeoEdge, а его специальные правила можно использовать для имитации скорости модема.
Тестирование в сети с низкой скоростью передачи данных
Программные и аппаратные прокси-серверы позволяют эмулировать проблемные условия мобильной сети, такие как ограничение пропускной способности, задержка пакетов и случайная потеря пакетов. Общий прокси-сервер или сеть с ограниченной пропускной способностью позволяют разработчикам тестировать приложения в условиях, приближенных к реальным.
Augmented Traffic Control (ATC) от Facebook – это набор приложений с лицензией BSD, которые можно использовать для формирования трафика и эмуляции ухудшенных условий сети:
Facebook даже ввел вторники 2G, чтобы понять, как люди используют их продукт в сетях 2G. По вторникам у сотрудников появляется всплывающее окно с предложением симулировать подключение 2G.
Для настройки пропускной способности и задержки можно использовать HTTP/HTTPS-прокси Charles. Charles – это коммерческое ПО, но у него есть бесплатная пробная версия.
Дополнительную информацию о Charles можно найти на сайте codewithchris.com.
Как справиться с ненадежным подключением и "lie-fi"
Что такое Lie-Fi?
Термин lie-fi появился по крайней мере в 2008 году (когда телефоны выглядели так) и относится к подключению, которое не является тем, чем кажется. Браузер ведет себя так, как будто подключение есть, хотя по какой-то причине это не так.
Неправильная интерпретация подключения может привести к ухудшению работы, поскольку браузер (или JavaScript) упорно пытается получить ресурсы, вместо того чтобы сдаться и выбрать разумный резервный вариант. Lie-fi может быть даже хуже, чем отсутствие подключения. Если устройство точно находится в офлайн-режиме, JavaScript может предпринять соответствующие действия.
Проблема ложного Wi-Fi, скорее всего, будет усугубляться, поскольку все больше людей переходят на мобильный интернет и отказываются от фиксированного широкополосного доступа. Согласно последним данным переписи населения США, пользователи отказываются от фиксированного широкополосного доступа. На следующей диаграмме показано использование мобильного интернета дома в 2015 году по сравнению с 2013 годом:
Используйте тайм-ауты для обработки прерывистого подключения
Раньше для проверки периодического подключения использовались методы взлома с помощью XHR, но сервисный работник позволяет использовать более надежные методы установки тайм-аутов сети. Это можно сделать с помощью Workbox, добавив всего несколько строк кода:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Подробнее о Workbox можно узнать из выступления Джеффа Посника (Jeff Posnick) на Chrome Dev Summit: Workbox: Flexible PWA Libraries.
Функция тайм-аута также разрабатывается для Fetch API, а Streams API должен помочь оптимизировать доставку контента и избежать монолитных запросов. Джейк Арчибальд (Jake Archibald) рассказывает о том, как бороться с lie-fi, в статье Supercharging page load (на английском языке).