Как тестировать PWA?

Про тестирование PWA есть много разрозненных мнений, подходов и обособленных принципов, иногда противоречащих друг другу. Мы в Red Collar решили испытать на себе несколько вариаций подхода к тестированию таких приложений.

О том, какие самые полезные правила и закономерности мы вывели для себя, расскажу я, лид QA в Red Collar, Мария Максимова.

TL;DR: в конце статьи будет чек-лист, который резюмирует всю информацию о PWA.

Что такое Progressive Web App (PWA)?

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

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

Отдельно стоит выделить, что PWA имеет преимущества перед app:

1. PWA индексируются поисковыми системами, что улучшает их видимость в интернете, чего не могут делать приложения.

2. Они доступны через URL, что повышает их доступность для пользователей.

3. PWA кроссплатформенны.

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

5. Не забываем и про один из самых важных аспектов вопроса 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 использует технологии кэширования и Service Worker, что позволяет приложению работать без подключения к интернету.

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

• Установка черз push-уведомления. Сайт может отдать пользователю прямую ссылку для быстрой установки.

• Сами push-уведомления. PWA поддерживает push-уведомления, что позволяет отправлять пользователям обновления и уведомления даже при закрытом приложении. Если пользователи отключат уведомления в браузере, через который работает PWA, то push-уведомления не будут доставляться им. В этом случае пользователи не будут получать обновления и уведомления от PWA. Это поведение аналогично тому, как работают уведомления в нативных приложениях: если пользователь отключает уведомления для приложения, то он не будет получать никаких уведомлений от этого приложения.

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

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

• Обновляемость. PWA обновляется автоматически, без необходимости вмешательства пользователя. Обновления происходят в фоновом режиме, обеспечивая всегда актуальную версию приложения. В офлайн-режиме PWA не сможет получить новые ресурсы или обновления с сервера, так как для этого требуется интернет-соединение. Всё само обновится, когда соединение будет восстановлено.

• Когда PWA в оффлайн-режиме, оно не может обновиться, так как нет доступа к серверу для загрузки новых ресурсов. Однако Service Worker будет продолжать обслуживать приложение с использованием кэшированных данных. Как только соединение будет восстановлено, Service Worker сможет проверить наличие обновлений, загрузить и кэшировать новые ресурсы, обеспечивая актуальность приложения. (Service Worker — это скрипт, который работает в фоновом режиме и управляет кэшированием ресурсов, обеспечивая работу приложения в оффлайн-режиме.)

Что необходимо понимать при тестировании PWA?

1. Это не ПВА-клей.

2. PWA работает на браузере.

3. Есть браузеры, которые могут не поддерживать PWA (их список постоянно меняется, ищите актуальные данные).

4. PWA всем пытается походить на приложение, пользователь будет ожидать от него поведения приложения!

 Что проверяем:

Как проверять 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);   }); } 

self.addEventListener('activate', event => {   console.log('Service Worker activating...'); }); 

Чек-лист для проверки PWA без проверок функционала вашего проекта