Про тестирование PWA есть много разрозненных мнений, подходов и обособленных принципов, иногда противоречащих друг другу. Мы в Red Collar решили испытать на себе несколько вариаций подхода к тестированию таких приложений.
О том, какие самые полезные правила и закономерности мы вывели для себя, расскажу я, лид QA в Red Collar, Мария Максимова.
TL;DR: в конце статьи будет чек-лист, который резюмирует всю информацию о PWA.
Что такое Progressive Web App (PWA)?
Progressive Web App (PWA) — это тип веб-приложения, который использует современные веб-технологии для обеспечения пользовательского опыта, аналогичного нативным мобильным приложениям.
PWA совмещает лучшие черты веб-сайтов и мобильных приложений, предлагая пользователям удобство, быстроту и возможность работы в офлайн-режиме.
Отдельно стоит выделить, что PWA имеет преимущества перед app:
PWA индексируются поисковыми системами, что улучшает их видимость в интернете, чего не могут делать приложения.
Они доступны через URL, что повышает их доступность для пользователей.
PWA кроссплатформенны.
PWA просты в установке, могут автоматически обновляться без подключения сторов, имеют достаточно небольшой размер и, зачастую, имеют меньшие требования к устройству и его производительности.
Не забываем и про один из самых важных аспектов вопроса PWA — стоимость разработки. Клиент часто выбирает для себя разработку PWA вместо полноценного приложения именно потому, что его разработка и поддержка стоят дешевле, чем app.
Я хочу рассмотреть PWA с точки зрения QA, потому что они максимально похожи на обычные приложения, преследуют цель воссоздать экспириенс пользователя, но без установки самого приложения.
Пример:
Duolingo Заходим через мобилку на сайт Duolingo - Learn a language for free @duolingo
Сделаю акцент на том, что PWA не качается через сторы, а ставится непосредственно с сайта. На скрине стор, приложение не установлено. НЕ PWA ->
Специфика PWA
PWA работает на любом устройстве и в любом браузере, который поддерживает стандарты. Это означает, что PWA можно использовать на различных платформах и устройствах, обеспечивая единый пользовательский опыт. Но важно понимать, что не все браузеры поддерживают PWA, например Mozilla отказалась от поддержки PWA в Firefox 85. Проверяйте актуальность данных!
PWA автоматически адаптируется под разные размеры экранов и типы устройств. Оно обеспечивает удобное использование как на мобильных устройствах, так и на десктопах.
Длинное неинтересное перечисление того, какими средствами достигается адаптивность в PWA.
Адаптивность Progressive Web Apps (PWA) достигается с помощью следующих средств и технологий:
1. Адаптивный дизайн (Responsive Design)
CSS Media Queries: Использование медиа-запросов позволяет CSS автоматически изменять стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация (портретная или ландшафтная) и разрешение.
Гибкие сетки (Flexible Grids): Использование гибких сеток с единицами измерения, такими как проценты,
emиrem, позволяет элементам адаптироваться к различным размерам экранов.Гибкие изображения (Flexible Images): Изображения и другие медиа могут масштабироваться с помощью CSS свойств, таких как
max-width: 100%, чтобы избежать выхода за границы контейнера
2. Viewport Meta Tag
Использование мета-тега viewport позволяет контролировать видимую область и масштаб страницы на мобильных устройствах.
3. Поля и интервалы (Spacing)
Использование гибких и относительных единиц для полей (padding) и интервалов (margin) помогает обеспечить пропорциональное размещение элементов на разных экранах.
4. Фреймворки и библиотеки
Bootstrap: Один из самых популярных фреймворков для создания адаптивного дизайна с предопределенными классами для сеток, кнопок и других компонентов.
Foundation: Альтернативный фреймворк, предоставляющий мощные инструменты для адаптивного дизайна.
5. Flexbox и CSS Grid
Flexbox: Позволяет создавать гибкие макеты, которые легко адаптируются к изменениям размера экрана.
CSS Grid: Предоставляет возможность создавать сложные и адаптивные макеты, используя сеточные контейнеры.
6. JavaScript и библиотеки
JavaScript: Использование JavaScript для динамического изменения DOM и CSS на основе размеров экрана и других характеристик устройства.
Либы для адаптивного дизайна: Библиотеки, такие как
react-responsive, позволяют применять адаптивные стили в компонентах React.
Работа в офлайн-режиме. PWA использует технологии кэширования и Service Worker, что позволяет приложению работать без подключения к интернету.
Установка как приложение. PWA можно установить на мобилку, появится иконка на рабочем столе, через которую может быть осуществлен запуск.
Установка черз push-уведомления. Сайт может отдать пользователю прямую ссылку для быстрой установки.
Сами push-уведомления. PWA поддерживает push-уведомления, что позволяет отправлять пользователям обновления и уведомления даже при закрытом приложении. Если пользователи отключат уведомления в браузере, через который работает PWA, то push-уведомления не будут доставляться им. В этом случае пользователи не будут получать обновления и уведомления от PWA. Это поведение аналогично тому, как работают уведомления в нативных приложениях: если пользователь отключает уведомления для приложения, то он не будет получать никаких уведомлений от этого приложения.
PWA загружается быстрее и обеспечивает более плавный пользовательский опыт по сравнению с традиционными веб-сайтами. Технологии кэширования и оптимизация кода помогают добиться высокой производительности.
HTTPS. PWA требует обслуживания через HTTPS, что обеспечивает безопасность передачи данных и защищает пользователей от атак.
Обновляемость. PWA обновляется автоматически, без необходимости вмешательства пользователя. Обновления происходят в фоновом режиме, обеспечивая всегда актуальную версию приложения. В офлайн-режиме PWA не сможет получить новые ресурсы или обновления с сервера, так как для этого требуется интернет-соединение. Всё само обновится, когда соединение будет восстановлено.
Когда PWA в оффлайн-режиме, оно не может обновиться, так как нет доступа к серверу для загрузки новых ресурсов. Однако Service Worker будет продолжать обслуживать приложение с использованием кэшированных данных. Как только соединение будет восстановлено, Service Worker сможет проверить наличие обновлений, загрузить и кэшировать новые ресурсы, обеспечивая актуальность приложения. (Service Worker — это скрипт, который работает в фоновом режиме и управляет кэшированием ресурсов, обеспечивая работу приложения в оффлайн-режиме.)
Что необходимо понимать при тестировании PWA?
Это не ПВА-клей.
PWA работает на браузере.
Есть браузеры, которые могут не поддерживать PWA (их список постоянно меняется, ищите актуальные данные).
PWA всем пытается походить на приложение, пользователь будет ожидать от него поведения приложения!
Что проверяем:
Работа в офлайн-режиме | Проверить, что приложение функционирует корректно без подключения к интернету после первоначальной загрузки. Все функции, подразумевающие работу офлайн, должны работать. |
Синхронизация данных | Проверить, что приложение функционирует корректно без подключения к интернету после первоначальной загрузки. |
Push-уведомления | Проверить отправку и получение push-уведомлений |
Совместимость | Убедиться, что PWA работает корректно в различных браузерах (Chrome, Firefox, Safari, Edge и т.д.). |
Производительность | Оценить производительность PWA в разных браузерах и на различных устройствах. |
Кросс-платформенное тестирование | Убедиться, что PWA работает на различных операционных системах, экранах различных размеров |
Тестирование установки | Проверить, что PWA можно установить на домашний экран мобильного устройства и рабочего стола |
Поведение установленного приложения | Убедиться, что установленное приложение ведет себя так же, как и нативное приложение (например, полноэкранный режим, отсутствие адресной строки). |
Время загрузки | Проверить, что PWA загружается быстро даже при медленном интернет-соединении. |
Легкость загрузки | Убедиться, что размер PWA минимален для обеспечения быстрой загрузки. |
Плавность работы | Тестировать плавность работы приложения, особенно при переходах между страницами и использовании оффлайн-режима. |
HTTPS | Убедиться, что PWA обслуживается через HTTPS для обеспечения безопасности данных |
Service Worker | Service Worker отвечает за кэширование ресурсов, управление оффлайн-доступом, push-уведомления и фоновую синхронизацию (подробная инструкция в конце таблицы). Зачем его тестировать? Для того, чтоб проверить, что этот компонент корректно использован. К самому Servicw Worker'у и его функционалу у нас вопросов нет. |
Обработка данных | Все данные принимаются, передаются, записываются, воспроизводятся корректно |
Кэширование данных | Данные (например, пользовательские настройки) кэшируются и доступны в офлайн-режиме. |
Синхронизация данных | Убедитесь, что данные корректно синхронизируются с сервером при восстановлении интернет-соединения. |
Камера, геолокация, пр. функции моб устройств | Если PWA использует функции устройства, такие как камера или геолокация, убедитесь, что они работают корректно. |
Фоновая работа | PWA должен корректно работать в фоновом режиме и возобновляет работу при необходимости, в том числе в режиме энергосбережения. |
Платежки | Если PWA имеет функции оплаты, то необходимо проверить все возможные способы оплаты, доступные в регионах ЦА |
Как проверять Service Worker
Для тех, кто совсем никому не доверяет и любит сложные задачки или пишет юнит-тесты
Инструменты для тестирования Service Worker:
1. DevTools в браузере - "Application" -> "Service Workers".
2. Lighthouse
3. Workbox: Библиотека для упрощения работы с Service Worker, включая тестирование и отладку.
1. Регистрация и активация
Проверка регистрации. Убедитесь, что Service Worker успешно регистрируется.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(function(error) {
console.error('Service Worker registration failed:', error);
});
}
Проверка активации. Убедитесь, что Service Worker сменяет состояние на активного
self.addEventListener('activate', event => {
console.log('Service Worker activating...');
});
2. Кэширование ресурсов
Инициализация кэша. Проверьте, что ресурсы успешно кэшируются при установке.
Проверка кэшированных файлов.Убедитесь, что ресурсы доступны из кэша.
3. Оффлайн-доступ
Проверка оффлайн-режима. Отключите интернет-соединение и убедитесь, что приложение работает корректно.
Проверка страницы оффлайн-доступа.Убедитесь, что отображается оффлайн-страница, если ресурс не доступен.
4. Обновления и новая версия
Обновление Service Worker. Измените
service-worker.jsи проверьте, что новая версия Service Worker устанавливается и активируется.Управление старыми версиями. Убедитесь, что старая версия Service Worker удаляется корректно.
5. Push-уведомления
Запрос разрешения: Проверьте, что пользователь получает запрос на разрешение на отправку уведомлений.
Получение уведомлений: Убедитесь, что уведомления приходят и отображаются корректно.
6. Фоновая синхронизация
Регистрация задачи синхронизации: Проверьте, что фоновая задача синхронизации успешно регистрируется.
Выполнение синхронизации: Убедитесь, что задача выполняется корректно при восстановлении соединения.
Чек-лист для проверки PWA без проверок функционала вашего проекта
PWA регистрирует Service Worker при загрузке страницы |
Успешная установку PWA на домашний экран устройства |
Значок PWA отображается корректно на домашнем экране |
Правильное отображение имени PWA на домашнем экране |
PWA работает в офлайн-режиме с кэшированными ресурсами |
Кэшируются все необходимые ресурсы (HTML, CSS, JS, изображения). |
Отображение офлайн-страницы, если ресурс не доступен. |
Ресурсы кэшируются при первой установке Service Worker |
При обновлении ресурсов старая версия заменяется новой |
Новая версия Service Worker активируется без конфликтов |
При обновлении контента пользователи получают актуальные данные. |
Проверить запрос разрешения на отправку push-уведомлений |
Push-уведомления приходят корректно. |
Отображение и содержание push-уведомлений |
Push-уведомления обрабатываются при нажатии на них |
Отображение PWA на различных экранах и устройствах |
PWA корректно масштабируется и отображается после смены ориентации экрана |
Убедиться, что PWA обслуживается через HTTPS |
Проверить корректность обработки и хранения пользовательских данных |
Данные кэшируются и доступны в офлайн-режиме |
Данные корректно синхронизируются с сервером при восстановлении интернет-соединения |
Фоновая синхронизация выполняется при восстановлении соединения |
Проверить работу PWA в различных браузерах (Chrome, Firefox, Safari, Edge) |
Проверить доступ к функциям устройства (камера, геолокация и тд). |
Убедиться, что PWA корректно работает с функциями устройства (входящие звонки, смс и тд) |
Проверить возобновление работы PWA при переходе из фона. |
Проверить длительный спящий режим в свернутом состоянии и восстановление из него |
Новая версия PWA устанавливается и активируется без потери данных. |
Корректная работа в режиме энергосбережения |
Восстановление работы из режима сна в режиме энергосбережения |
