PWA и SPA: минимум для тестировщика

Мы разберем две ключевые технологии — Progressive Web Applications (PWA) и Single Page Applications (SPA). В этой статье мы рассмотрим, что собой представляют эти технологии, почему они становятся все более популярными, как их отличить друг от друга, почему это важно для тестировщиков и как эти знания помогают в тестировании.

Что такое PWA?

Progressive Web Applications (PWA) — это веб-приложения, которые используют современные веб-технологии для обеспечения опыта, сравнимого с нативными мобильными приложениями. PWA — это не конкретная технология или фреймворк, а подход к разработке веб-приложений, позволяющий постепенно внедрять улучшения без кардинальных изменений. Основные характеристики PWA включают:

надежность (Reliable) — приложение загружается и отображается мгновенно, вне зависимости от качества сетевого соединения;
быстрота (Fast) — быстрый обмен данными по сети и отзывчивый пользовательский интерфейс;
привлекательность (Engaging) — удобный и приятный пользовательский опыт, побуждающий к повторному использованию приложения.

Основными технологиями, используемыми в PWA, являются Service Worker, Web App Manifest и HTTPS.

Пример работы приложения PWA

Объясним на примере новостного сайта. Представьте, что у вас есть новостной сайт, где пользователи могут читать последние новости, смотреть видео и получать уведомления о важных событиях.

На первый взгляд, PWA и обычный веб-сайт могут выглядеть одинаково. Но PWA предоставляет пользователям опыт, который более напоминает использование нативного мобильного приложения.

Поведение обычного сайта и PWA

Обычный сайт: при заходе на новостной сайт все элементы (шапка, подвал, меню, новости) загружаются с сервера каждый раз, когда пользователь обновляет страницу или переходит на новую. Пользователь зависит от стабильного интернет-соединения, и если сеть отсутствует, доступ к контенту будет невозможен.
PWA: при первом заходе на сайт пользователь может получить уведомление с предложением установить приложение на домашний экран. Когда пользователь принимает это предложение, иконка сайта появляется на экране устройства, как у нативного приложения. В дальнейшем, при заходе на сайт через эту иконку, контент загружается мгновенно благодаря кэшированию данных с помощью Service Worker. Даже при отсутствии интернет-соединения, пользователь может продолжать читать уже загруженные статьи, поскольку они сохранены на устройстве.

Дополнительные возможности PWA:

Офлайн-режим: пользователь может продолжать просматривать статьи, которые были загружены ранее, даже без подключения к интернету. Например, если пользователь открыл несколько новостей утром, то он сможет прочитать их позже в течение дня, даже если потеряет интернет-соединение.
Push-уведомления: пользователь получает уведомления о новых статьях или важных новостях прямо на экран своего устройства, даже когда приложение не активно. Это побуждает пользователя возвращаться к приложению и оставаться в курсе событий.
Быстрый доступ: установленное PWA работает быстрее, так как основные элементы загружаются из кэша, а не запрашиваются каждый раз с сервера. Это обеспечивает плавный и отзывчивый пользовательский интерфейс.

Таким образом, PWA сочетает в себе удобство и функциональность нативного приложения с гибкостью веб-сайта. Пользователи получают быстрый доступ к контенту, возможность работы в офлайн-режиме и push-уведомления, что значительно улучшает их опыт использования и удерживает их внимание.

Что такое SPA?

Single Page Applications (SPA) — это веб-приложения, которые загружают единственную HTML-страницу и динамически обновляют контент по мере взаимодействия пользователя через JavaScript. Основные характеристики SPA включают:

асинхронные запросы — использование AJAX для загрузки данных без перезагрузки страницы;
быстрый отклик — мгновенное обновление контента на странице;
плавная навигация — переход между различными частями приложения происходит без перезагрузки страницы.

Пример работы приложения SPA

Объясним на примере интернет-магазина. Представьте, что у вас есть онлайн-магазин, где пользователи могут просматривать и покупать товары. В интерфейсе есть категории, список товаров, кнопки для добавления товаров в корзину и различные фильтры.

На первый взгляд, между обычным сайтом и SPA нет заметной разницы. Но чтобы её обнаружить, давайте перейдем от одного товара к другому.

Поведение сайта и SPA

Здесь становится видно, что сайт и одностраничное приложение работают по-разному:

Обычный сайт: при переходе на страницу другого товара обновляется вся страница целиком. Происходит запрос на сервер, который возвращает новую HTML-страницу с детальной информацией о выбранном товаре. Это включает в себя повторное получение шапки сайта, подвала, навигационных элементов и самого контента. Сервер отвечает: "Привет, покажи товар X", и возвращает полный HTML-файл.
Одностраничное приложение (SPA): при переходе на страницу другого товара обновляется только содержимое, связанное с товаром, без перезагрузки всей страницы. Браузер отправляет серверу запрос, получает необходимую информацию (фото, название, описание, цену) и обновляет только нужную часть страницы, оставляя все остальные элементы (шапка, подвал, навигация) неизменными.

Теперь представьте, что пользователь применяет фильтры для поиска товаров. В SPA страница не перезагружается каждый раз при изменении фильтров. Вместо этого браузер отправляет асинхронные запросы на сервер, который возвращает только те данные, которые соответствуют новым критериям фильтрации. Эти данные динамически подгружаются и обновляют список товаров без перезагрузки страницы.

Почему эти технологии используются сейчас в разработке?

Обе технологии предлагают значительные преимущества для пользователей и разработчиков:

улучшенный пользовательский опыт — PWA и SPA обеспечивают быстрый и плавный интерфейс;
мобильная доступность — PWA могут работать как нативные мобильные приложения, а SPA быстро адаптируются под различные устройства;
производительность — обе технологии уменьшают нагрузку на сервер и снижают время загрузки страниц;
современные веб-технологии — использование новейших стандартов делает приложения более функциональными и безопасными.

Как понять, какой тип продукта перед тобой: PWA или SPA?

Определить тип продукта можно по следующим признакам:

PWA — установочное уведомление при заходе на сайт, возможность работы в офлайн-режиме, наличие push-уведомлений, возможность установки на экран устройства.
SPA — единая HTML-страница, динамическое обновление контента без перезагрузки страницы, использование AJAX для асинхронных запросов.

Чек-лист для тестирования PWA

Для тестирования PWA применимы как специфичные кейсы, так и проверки характерные для тестирования обычных веб-приложений. В данном чек-листе представлены проверки, которые точно необходимо учесть при тестировании PWA:

Установка и обновление

Уведомление об установке:

Проверить, появляется ли уведомление об установке PWA при посещении сайта.
Убедиться, что уведомление об установке корректно отображается на различных устройствах и браузерах.

Процесс установки:

Проверить, работает ли установка приложения на домашний экран на разных устройствах (мобильных, планшетах).
Убедиться, что после установки на домашний экран приложение запускается корректно.

Обновление приложения:

Проверить, что обновления приложения происходят автоматически при изменении контента или кода.

Работоспособность офлайн

Кэширование ресурсов:

Убедиться, что ключевые ресурсы (HTML, CSS, JavaScript) кэшируются при первом запуске.
Проверить, что обновленные ресурсы корректно подгружаются и обновляются.

Поведение офлайн:

Проверить, что приложение работает в офлайн-режиме и отображает кэшированный контент.
Убедиться, что приложение корректно сообщает пользователю о проблемах с сетью.

Service Worker:

Проверить, что Service Worker корректно регистрируется и активируется.
Убедиться, что Service Worker обрабатывает запросы в офлайн-режиме.

Производительность

Скорость загрузки:

Проверить, что приложение быстро загружается при первом посещении.
Убедиться, что повторные загрузки происходят быстро благодаря кэшированию.

Оптимизация ресурсов:

Убедиться, что изображения и другие медиафайлы оптимизированы для быстрой загрузки.
Проверить использование современных форматов изображений (например, WebP).

Безопасность

HTTPS:

Убедиться, что приложение работает через HTTPS, обеспечивая безопасное соединение.
Проверить наличие валидного SSL-сертификата.

Безопасность данных:

Проверить, что данные пользователя безопасно хранятся и передаются.
Убедиться, что уязвимости (например, XSS, CSRF) отсутствуют.

Пользовательский опыт

Добавление на домашний экран:

Проверить, что иконка приложения отображается корректно на домашнем экране.
Убедиться, что при запуске с домашнего экрана приложение открывается в полноэкранном режиме без адресной строки браузера.

Push-уведомления:

Пермишены на допуск пушей.
Убедиться, что уведомления доставляются и отображаются корректно.

Работа на различных устройствах:

Проверить, что приложение корректно работает на разных устройствах и экранах.
Убедиться, что адаптивный дизайн и функциональность соответствуют ожиданиям пользователей.

Дополнительные проверки

Работа с различными браузерами:

Проверить, что приложение корректно работает в основных браузерах (Chrome, Firefox, Safari, Edge).
Убедиться, что функции PWA поддерживаются в максимальном количестве браузеров.

Доступность:

Убедиться, что приложение соответствует требованиям доступности (WCAG).
Проверить, что все элементы управления доступны для использования клавиатурой и экранными читателями.

Чек-лист для тестирования SPA

Для тестирования SPA также применимы как специфичные кейсы, так и проверки характерные для тестирования обычных веб-приложений. В данном чек-листе представлены проверки, которые точно необходимо учесть при тестировании SPA:

Навигация и переходы

Переходы между страницами:

Проверить, что переходы между различными частями SPA происходят без перезагрузки страницы.
Убедиться, что URL обновляется соответственно текущему состоянию приложения.

Deeplinks:

Проверить, что диплинки (например, ссылки на конкретный контент) работают корректно и открывают нужный раздел приложения.

Навигационные элементы:

Проверить, что навигационные меню и элементы работают плавно и без задержек.

Загрузка и производительность

Инициализация приложения:

Проверить, что SPA быстро инициализируется при первом открытии страницы.
Убедиться, что все необходимые ресурсы загружаются и отображаются корректно.

Асинхронная загрузка данных:

Проверить, что данные загружаются асинхронно без перезагрузки всей страницы.
Убедиться, что при изменении данных или фильтрации контента страница обновляется динамически.

Производительность:

Оценить время загрузки приложения на различных устройствах и соединениях.
Проверить использование кэширования для оптимизации загрузки ресурсов.

Функциональность

Работа с формами и вводом данных:

Проверить отправку форм и обработку введенных данных без перезагрузки страницы.
Убедиться, что валидация форм происходит на клиентской стороне перед отправкой данных на сервер.

Асинхронные запросы:

Проверить корректность обработки асинхронных запросов (AJAX) к серверу.
Убедиться, что данные загружаются и обновляются без перезагрузки страницы.

Обработка ошибок:

Проверить, что приложение корректно обрабатывает ошибки, возникающие при загрузке данных или выполнении запросов.
Убедиться, что пользователю отображается понятное сообщение об ошибке.

Кросс-браузерная совместимость

Поддержка основных браузеров:

Проверить работоспособность SPA в различных браузерах (Chrome, Firefox, Safari, Edge, Internet Explorer).
Убедиться, что все функциональные возможности работают одинаково хорошо на всех поддерживаемых платформах.

Адаптивный дизайн:

Проверить, что SPA адаптируется к различным экранам и устройствам.
Убедиться, что интерфейс приложения остается удобным и функциональным на мобильных устройствах и планшетах.

Дополнительные кейсы

Тестирование на мобильных устройствах:

Проверить работоспособность SPA на мобильных устройствах (iOS, Android) с различными размерами экранов и разрешениями.

Интеграция с внешними сервисами:

Проверить интеграцию SPA с внешними сервисами (API, сторонними библиотеками).
Убедиться, что данные корректно передаются и обрабатываются в обоих направлениях.

Обсудить статью, узнать больше можно в телеграм канале «Тестировщики нужны».