Важно понимать, что ощущается при использовании вашего приложения или сайта, когда соединение плохое или ненадежное, и строить его соответствующим образом. Вам может помочь ряд инструментов.
Тестирование с низкой пропускной способностью и высокой задержкой
Все больше людей пользуются Интернетом на мобильных устройствах. Даже дома многие люди отказываются от фиксированной широкополосной связи в пользу мобильной связи .
В этом контексте важно понимать, что ощущается при использовании вашего приложения или сайта, когда соединение плохое или ненадежное. Ряд программных инструментов может помочь вам эмулировать и симулировать низкую пропускную способность и высокую задержку .
Эмулировать регулирование сети
При создании или обновлении сайта вы должны обеспечить адекватную производительность в различных условиях подключения. Несколько инструментов могут помочь.
Инструменты браузера
Chrome DevTools позволяет тестировать ваш сайт с различными скоростями загрузки/выгрузки и временем передачи , используя предустановки или пользовательские настройки на панели «Сеть». См. раздел «Начало работы с анализом производительности сети», чтобы изучить основы.
Системные инструменты
Network Link Conditioner — это панель предпочтений, доступная на Mac, если вы устанавливаете Hardware IO Tools для Xcode:
Эмуляция устройства
Эмулятор Android позволяет моделировать различные условия сети во время запуска приложений (включая веб-браузеры и гибридные веб-приложения) на Android:
На iPhone можно использовать Network Link Conditioner для имитации нарушенных условий сети (см. выше).
Тестируйте из разных мест и сетей
Производительность подключения зависит от местоположения сервера, а также типа сети.
WebPagetest — это онлайн-сервис, который позволяет запускать набор тестов производительности вашего сайта с использованием различных сетей и расположений хостов. Например, вы можете опробовать свой сайт с сервера в Индии в сети 2G или по кабелю из города в США.
Выберите местоположение и в дополнительных настройках выберите тип подключения. Вы даже можете автоматизировать тестирование с помощью скриптов (например, для входа на сайт) или с помощью их RESTful API . Это поможет вам включить тестирование подключения в процессы сборки или ведение журнала производительности.
Fiddler поддерживает глобальное проксирование через GeoEdge , а его пользовательские правила можно использовать для имитации скорости модема:
Тестирование в поврежденной сети
Программные и аппаратные прокси позволяют эмулировать проблемные условия мобильной сети, такие как регулирование пропускной способности, задержка пакетов и случайная потеря пакетов. Общий прокси-сервер или поврежденная сеть могут позволить команде разработчиков включить тестирование сети в реальных условиях в свой рабочий процесс.
Расширенный контроль трафика Facebook (ATC) — это набор приложений под лицензией BSD, которые можно использовать для формирования трафика и эмуляции нарушенных сетевых условий:
Facebook даже ввел вторники 2G , чтобы помочь понять, как люди, использующие 2G, используют их продукт. По вторникам сотрудники получают всплывающее окно с возможностью имитировать соединение 2G.
Прокси-сервер Charles HTTP/HTTPS можно использовать для регулировки пропускной способности и задержки . Charles — коммерческое программное обеспечение, но доступна бесплатная пробная версия.
Дополнительную информацию о Чарльзе можно получить на сайте codewithchris.com .
Борьба с ненадежным соединением и «ложью»
Что такое ложь-фантастика?
Термин «ложь-фи» появился как минимум в 2008 году (когда телефоны выглядели вот так ) и относится к возможности подключения, которая не является тем, чем кажется. Ваш браузер ведет себя так, как будто у него есть подключение, хотя по какой-либо причине его нет.
Неправильно интерпретированное подключение может привести к ухудшению работы, поскольку браузер (или JavaScript) упорно пытается получить ресурсы, а не сдается и выбирает разумный запасной вариант. Ложь на самом деле может быть хуже, чем оффлайн; по крайней мере, если устройство определенно отключено от сети, ваш JavaScript может предпринять соответствующие обходные действия.
Лживый Интернет, вероятно, станет более серьезной проблемой, поскольку все больше людей переходят на мобильную связь и отказываются от фиксированного широкополосного доступа. Последние данные переписи населения США показывают отход от фиксированной широкополосной связи . На следующей диаграмме показано использование мобильного интернета дома в 2015 году по сравнению с 2013 годом:
Используйте таймауты для обработки прерывистого подключения
Раньше для проверки прерывистого подключения использовались хакерские методы с использованием XHR , но сервис-воркер предлагает более надежные методы установки тайм-аутов сети. Этого можно добиться с помощью Workbox всего несколькими строками кода:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Подробнее о Workbox можно узнать из выступления Джеффа Посника на саммите разработчиков Chrome Workbox: Flexible PWA Libraries .
Функциональность таймаута также разрабатывается для Fetch API , а Streams API должен помочь, оптимизируя доставку контента и избегая монолитных запросов. Джейк Арчибальд дает более подробную информацию о борьбе с ложью в разделе «Суперзарядная загрузка страницы» .