Разработка PWA-приложений на заказ

Подробно

Создание PWA-приложения подходит бизнесу, которому нужно мобильное приложение без публикации в сторах и без двух отдельных кодовых баз. PWA (прогрессивное веб-приложение) - это сайт, который пользователь устанавливает на главный экран телефона. Он открывается без адресной строки, работает при плохой связи и присылает уведомления.

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

Что умеет PWA-приложение

Технически PWA держится на трех частях. Файл манифеста описывает название, иконку и цвета приложения, чтобы телефон мог установить его как программу. Сервис-воркер (скрипт, который работает в фоне отдельно от страницы) кэширует данные и отвечает за офлайн-режим и уведомления. HTTPS обязателен, без защищенного соединения браузер не даст установить приложение.

На этой основе PWA умеет:

• открываться с иконки на экране без адресной строки браузера;
• показывать каталог, историю заказов и профиль без сети, а данные отправлять, когда связь вернется;
• присылать push-уведомления о статусе заказа, записи или акции;
• работать с камерой и геолокацией;
• обновляться у всех пользователей сразу, без модерации и без просьб скачать новую версию.

Когда PWA выгоднее нативного приложения

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

Еще один сценарий - проверка спроса. Прежде чем вкладываться в два нативных приложения, компания запускает PWA на тех же API, смотрит, сколько людей устанавливают его и возвращаются, и только потом решает, нужен ли натив. Серверная часть при этом не пропадает: мобильное приложение потом подключается к ней же.

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

Ограничения PWA на iOS и Android

У формата есть пределы, и о них говорим до старта. На iPhone PWA устанавливается только через меню браузера: пользователь нажимает Поделиться и выбирает На экран Домой, кнопки установки на сайте нет. Push-уведомления на iOS работают с версии 16.4 и только у приложений, добавленных на экран. Bluetooth и NFC в браузере на iPhone недоступны, фоновая работа ограничена.

На Android возможностей больше: браузер сам предлагает установить приложение, уведомления работают стабильно, часть браузеров дает доступ к Bluetooth. PWA можно упаковать через Trusted Web Activity и выпустить в магазин приложений Android. С App Store сложнее: приложения, которые просто показывают сайт, модерация обычно отклоняет.

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

Как мы создаем PWA

1. Анализ. Разбираем сценарии пользователей и проверяем, хватит ли возможностей браузера на iOS и Android для ваших функций.
2. Дизайн. Проектируем интерфейс как у мобильного приложения: нижняя навигация, крупные зоны нажатия, экраны под одну задачу.
3. Разработка. Пишем фронтенд, настраиваем манифест и сервис-воркер, продумываем, какие данные кэшировать и как синхронизировать их после появления сети.
4. Уведомления и оплата. Подключаем push-уведомления, платежи и авторизацию.
5. Тестирование. Проверяем установку, офлайн-режим и уведомления на iPhone и Android-смартфонах в разных браузерах.
6. Запуск и поддержка. Выкладываем на ваш домен, подключаем аналитику, следим за ошибками.

Если у вас уже есть сайт, часто не нужно делать все с нуля. Разбираем варианты в статье как из сайта сделать приложение: иногда достаточно доработать мобильную версию и добавить манифест с сервис-воркером.

Сколько стоит создание PWA

PWA на рынке стоит от 500 тыс. до 1,5 млн руб. Нижняя граница ближе к доработке готового сайта с простым каталогом, верхняя - к новому продукту с личным кабинетом, оплатой, офлайн-режимом и интеграцией с CRM. Для сравнения, простое MVP нативного приложения стоит 1,5-3 млн руб.

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