Специалист приехал на объект, открыл задание на телефоне, а связь пропала. Сможет ли он прочитать инструкцию и сохранить акт? Установленный значок ещё не отвечает на этот вопрос. PWA полезна тогда, когда за удобным запуском стоит продуманный рабочий сценарий.
В Гуси-Лебеди предлагаем начинать выбор технологии с действий пользователя. Разберём PWA на условном примере кабинета выездного специалиста: от установки до отправки данных и обновления открытой формы. Это пример для объяснения, а не клиентский кейс.
Что такое PWA и когда она нужна
PWA, или Progressive Web App, называют прогрессивным веб-приложением. Оно использует веб-технологии и доступные возможности браузера, чтобы пользователь мог удобнее возвращаться к сервису. В поддерживаемой среде приложение можно установить и запускать отдельно. Конкретные возможности зависят от устройства и реализации.
Представьте кабинет нашего специалиста. Ему регулярно нужны назначенные задания, инструкции и форма акта. Здесь отдельный запуск может быть полезен. Для разового знакомства с рекламным предложением установка может оказаться лишним шагом. Сначала найдите повторяющийся сценарий, затем решайте, нужен ли ему такой формат.
Сравнивайте PWA с обычным мобильным сайтом и нативным приложением по обязательным функциям: доступ к оборудованию, файлам, уведомлениям, работа без сети и распространение. Удобный значок не компенсирует отсутствие критичной возможности. Если она требует отдельной платформенной реализации, рассмотрите разработку приложения для целевых устройств.
PWA не равна SPA. Первое описывает возможности веб-продукта, второе связано с устройством интерфейса и переходов. Подробности разбираем в статье об архитектуре SPA-приложений. Общая веб-кодовая база тоже не означает автоматически меньший бюджет: сложность синхронизации и тестирования учитывают отдельно.
Как устроена установка PWA
Веб-интерфейс отвечает за действия человека, сервер хранит подтверждённые данные, а manifest описывает параметры представления приложения. Для продвижения установки браузером нужны технические условия, включая HTTPS в рабочей среде. Их описывает руководство MDN по установке PWA. Способ установки различается между браузерами и платформами.
Для проекта проверьте название, иконки, стартовый адрес и режим открытия. После запуска специалист должен попадать в понятное место: к заданию или ко входу, если сессия закончилась. Не отправляйте его в случайный раздел только потому, что этот адрес стоял в раннем примере manifest.
Покажите установку в момент, когда она полезна. Например, после успешного первого входа в рабочий кабинет. Если нужная возможность недоступна, сохраните обычный онлайн-сценарий. Не обещайте всем пользователям одинаковую кнопку и одинаковое поведение на iPhone, Android и компьютере.
Установка и офлайн-работа требуют отдельных проверок. Наличие service worker само по себе также не подтверждает сохранность формы или отправку акта. В документации MDN отдельно указано, что service worker не является обязательным условием устанавливаемости, хотя его используют для офлайн-возможностей.
Что работает без интернета и какие данные сохранять
Сначала составьте список доступных без сети действий. Нашему специалисту можно разрешить читать заранее загруженную инструкцию и сохранять черновик акта. Получение нового назначения и подтверждение результата сервером требуют связи. Объясните эти границы в интерфейсе до того, как человек потеряет интернет.
Service worker может обрабатывать запросы и возвращать сохранённые ресурсы. Но кеширование не превращает все данные в актуальные. Руководство MDN по кешированию рассматривает разные стратегии и возможность очистки кеша. Выбирайте правила отдельно для интерфейса, справочников и рабочих записей.
| Данные | Что продумать | Что видит пользователь |
|---|---|---|
| Инструкция | Предварительное сохранение и обновление | Доступная версия и её актуальность |
| Назначенное задание | Последнее полученное состояние | Пометка о работе без сети |
| Черновик акта | Локальная запись и восстановление | Сохранено на устройстве |
| Отправленный акт | Подтверждение приёма сервером | Принято или ожидает передачи |
Не рассчитывайте на данные, которые пользователь ещё не загрузил. Проверьте первое открытие без сети и повторное открытие после подготовки. Если информация недоступна, покажите понятное объяснение вместо пустого экрана. Для локальных записей предусмотрите поведение при очистке хранилища, выходе и смене пользователя.
Как отправлять записи без дублей и потерь
Кнопка «Сохранить» должна означать конкретное состояние. Черновик на телефоне и акт, принятый сервером, нельзя показывать одинаково. Для нашего примера полезны состояния «сохранён на устройстве», «ожидает отправки», «принят» и «требует внимания». Названия выбирайте понятные специалисту.
Сценарий проверки: сервер получил акт, но ответ потерялся. Пользователь нажал повторно. Спроектируйте повтор так, чтобы он относился к той же операции и не создавал второй акт. Это часть согласования API и повторных запросов, а не задача одного экрана.
Другой случай: диспетчер изменил задание, пока специалист работал без связи. Решите заранее, какие изменения можно объединить и когда нужна ручная проверка. Тихая перезапись не должна уничтожать важную работу. Сохраняйте сведения, позволяющие восстановить последовательность действий.
MDN описывает офлайн- и фоновую работу, но наличие таких API не означает бесконечное выполнение в фоне. Проверяйте поддержку целевой среды. Предусмотрите понятное восстановление отправки при возвращении в приложение, если фоновый механизм недоступен.
Как обновлять приложение и учитывать ограничения
Публикация новой версии не должна неожиданно стирать открытый акт. Перед внедрением определите, когда приложение может обновиться, как сохраняется черновик и что делать, если старая форма обращается к изменённому серверу. Проверьте совместимость версии интерфейса, данных и API.
Покажите человеку доступное обновление понятным сообщением. Если требуется перезапуск, объясните судьбу незавершённой работы. Принудительная перезагрузка посреди заполнения может оказаться хуже временной работы на прежней версии. Решение зависит от конкретного изменения и его требований.
Уведомления привязывайте к полезному событию, например новому назначению. Отказ в разрешении не должен блокировать чтение задания. Не делайте push единственным способом узнать о критичной работе: кабинет должен показывать состояние независимо от того, заметил ли человек сообщение.
Для функций камеры, файлов, фоновых действий и установки составьте список устройств и браузеров аудитории. Проверьте нужные действия на них. Не переносите результат одного теста на все платформы. Приоритеты первой версии можно определить через проверку гипотезы продукта.
Как проверить PWA перед запуском
Приёмку стройте вокруг переходов между состояниями. Открыть главную страницу с хорошим интернетом недостаточно. В нашем примере нужно проверить весь путь от задания до принятого акта, включая сбои, повтор и обновление.
| Проверка | Что подтвердить |
|---|---|
| Потеря связи во время заполнения | Введённое восстановлено и статус понятен |
| Ответ сервера не дошёл | Повтор не создаёт дубль |
| Обновление при открытой форме | Работа сохранена или переход объяснён |
| Истекла сессия | Повторный вход не смешивает пользователей |
| Установка недоступна | Онлайн-сценарий остаётся доступным |
| Хранилище очищено | Приложение сообщает об отсутствии локальных данных |
Фиксируйте устройство, браузер, версию приложения и состояние записи на сервере. Проверьте две одновременно открытые вкладки, смену пользователя и недоступный ресурс. Подготовьте порядок восстановления и ответственного за ошибки после запуска.
Для публичных страниц отдельно проверяют адреса, содержание и доступность поисковым роботам. Установка PWA не заменяет эту работу. Закрытый кабинет может вообще не предназначаться для индексирования. Его результат оценивают по выполненным сценариям, а не по наличию значка.
В Гуси-Лебеди рекомендуем согласовать такую матрицу ещё до разработки. Она помогает оценить объём работ и принять продукт по понятным действиям. Хорошая PWA даёт человеку полезный результат и честно показывает, что сохранено локально, а что уже подтверждено сервером.