Как сделать PWA-приложение из своего сайта с личными кабинетами за 1 день

Разработка нативного мобильного приложения для iOS и Android стоит от 1 до 3 миллионов рублей и занимает 4-6 месяцев. Обновления нужно публиковать в сторах, поддерживать две кодовые базы, нанимать отдельных разработчиков. А что если я скажу, что ваш сайт с личными кабинетами может стать приложением за один день и практически бесплатно?

Речь о PWA — Progressive Web App. Это технология, которая позволяет установить сайт на телефон как обычное приложение: с иконкой на рабочем столе, полноэкранным режимом, офлайн-доступом и push-уведомлениями. И это не магия — в платформе Falcon Space PWA настраивается буквально за несколько шагов.

Что даёт PWA вашему бизнесу и клиентам

Вот реальные выгоды, которые мы наблюдаем в проектах:

Повышение лояльности клиентов — они могут открыть ваш сервис в один клик с экрана телефона, как любой другой апп.
Рост возвратов — PWA-приложение остаётся на телефоне пользователя, даже если он не заходил неделю. Напоминание о себе работает постоянно.
Экономия бюджета — вы не платите за разработку нативного приложения. Один сайт работает и на десктопе, и на телефоне, и как PWA.
Ускорение загрузки — PWA кеширует ресурсы, и при повторных визитах страницы открываются мгновенно. Это улучшает конверсию.
Автообновление — не нужно выпускать версии в App Store. Обновили сайт — обновилось и PWA.

В некоторых нишах PWA даёт даже больше, чем нативное приложение. Например, для сервисов доставки, заказа услуг, личных кабинетов с лёгким функционалом. Исключение — игры, сложная анимация, доступ к специфическому железу телефона (но CRM и маркетплейсу это не нужно).

Как мы сделали PWA для сервиса загородных услуг

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

Мы сделали PWA на базе Falcon Space. Вот что клиент получил:

При заходе на сайт с телефона пользователю показывается баннер «Установить приложение».
После нажатия — иконка появляется на экране, и приложение запускается в полноэкранном режиме (без адресной строки браузера).
Работает офлайн: если нет интернета, пользователь видит кэшированную версию главной страницы (но для заказа интернет нужен).
Push-уведомления: когда исполнитель подтвердил заказ или изменил статус, приходит уведомление на телефон клиента (как в настоящем приложении).

Затраты на внедрение PWA: 0 рублей на разработку, только время на настройку (1 день). При этом клиент сэкономил порядка 1,5 млн рублей, которые потребовались бы на нативное приложение под iOS и Android. И получил даже больше: обновления не надо согласовывать с Apple, а пользователи не проходят двухфакторную аутентификацию в сторах.

Пошаговая инструкция по включению PWA на Falcon Space

Вам не нужно быть программистом. На платформе всё уже сделано. Вот что вы делаете:

Шаг 1. Подготовьте иконки

Вам понадобятся иконки разных размеров (обычно 72x72, 96x96, 128x128, 192x192, 512x512 пикселей). Их можно сгенерировать в любом онлайн-генераторе PWA-иконок за 5 минут. Загрузите эти иконки в папку на вашем сервере (например, /images/icons/).

Шаг 2. Заполните настройки PWA в административной панели Falcon Space

Зайдите в раздел «Настройки» → «PWA». Там нужно указать:

Название приложения (будет отображаться под иконкой).
Короткое имя (для экранов, где мало места).
Цвет темы (например, #ffffff).
Пути к иконкам (относительные).
Стартовый URL (обычно главная страница).

Это всё заполняется как обычная форма — никакого кода.

Шаг 3. Сгенерируйте манифест и сервис-воркер

После сохранения настроек платформа автоматически создаст:

manifest.json — файл, который говорит браузеру, что сайт можно установить.
service-worker.js — скрипт, который управляет кешированием и офлайн-режимом.

Вам останется только добавить ссылку на манифест в <head> вашего сайта (это делается в глобальных настройках платформы, одна строка). Подробно расписано в документации по PWA.

Шаг 4. Проверьте работу

Откройте ваш сайт на телефоне под управлением Chrome (Android) или Safari (iOS). Через несколько секунд появится баннер «Добавить на экран «Домой»». Нажмите — иконка появится. Всё, приложение готово.

На iOS (iPhone) PWA работает начиная с версии 11.3, но баннер не появляется автоматически. Вам нужно научить пользователей нажимать «Поделиться» → «На экран «Домой»». Это один клик, и клиенты быстро привыкают.

Push-уведомления — как настроить и не сойти с ума

Отдельно про уведомления. В нативных приложениях это целая история с Firebase Cloud Messaging и сертификатами. В PWA Falcon Space мы сделали проще:

Пользователь дает разрешение на уведомления при первом заходе.
Вы вызываете внешнее действие из SQL-процедуры, например, при смене статуса заказа.
Платформа отправляет push-уведомление через сервис OneSignal или аналогичный (нужно зарегистрироваться, бесплатный тариф на 10 000 устройств).

Стоимость: 0 рублей за интеграцию, только ваше время. Уведомления приходят даже когда браузер закрыт — как в настоящем приложении.

Пример SQL-процедуры для отправки push при смене статуса заказа:

CREATE PROCEDURE [app].[order_status_changed]
    @order_id int, @new_status nvarchar(50)
AS
BEGIN
    DECLARE @user_id int;
    SELECT @user_id = user_id FROM orders WHERE order_id = @order_id;
    
    SELECT 'send_push' AS action,
           @user_id AS user_id,
           'Статус заказа изменён' AS title,
           'Заказ ' + CAST(@order_id AS nvarchar) + ' теперь ' + @new_status AS body;
END

Система сама свяжется с OneSignal и отправит уведомление. Не нужно писать сложные бэкенд-запросы.

Когда PWA — не панацея

Я за честность, поэтому скажу, где PWA может не подойти:

Если вам нужны сложные графические эффекты, 3D или игры — нативное приложение лучше.
Если ваша целевая аудитория — пользователи старых iPhone (iOS ниже 11.3) — поддержка PWA там ограничена.
Если вам обязательно присутствие в App Store и Google Play для маркетинга (хотя PWA тоже можно засунуть в сторы через обёртки).
Если вам нужен полный офлайн-режим со сложной синхронизацией данных (хотя и это возможно, но требует больше усилий).

Но для 90% бизнес-приложений — CRM, личные кабинеты, маркетплейсы, сервисы заказа услуг — PWA более чем достаточно. И это подтверждают наши клиенты: сервис психологов, школа единоборств, прачечная, доставка из Китая. Все они используют PWA и не жалеют.

Что выбрать: PWA или нативное приложение

Сравним по ключевым параметрам:

Стоимость: PWA — 0 руб (если сайт уже на Falcon Space), нативное — от 1 млн руб.
Срок: PWA — 1 день, нативное — 3-6 месяцев.
Обновления: PWA — моментально, нативное — через App Store (1-2 дня).
Установка: PWA — через браузер, нативное — через магазин.
Push-уведомления: есть и там, и там.
Офлайн-режим: есть и там, и там (но у нативного чуть шире возможности).
Доступ к железу (камера, GPS, акселерометр): и PWA может многое, но нативное даёт больше.

Мой совет: начинайте с PWA. Если через год увидите, что не хватает возможностей, и бюджет позволяет — сделаете нативное приложение, но в 90% случаев PWA останется.

Включите PWA на вашем сайте с личными кабинетами уже сегодня. Инструкция есть в документации, а если нужна помощь — напишите нам. Мы поможем с настройкой в рамках часа техподдержки (бесплатно для клиентов, которые купили лицензию).

P.S. Демо-стенд Falcon Space уже с поддержкой PWA — можете попробовать на своём телефоне, перейдя на demo.web-automation.ru. Нажмите «Добавить на экран «Домой»» и убедитесь сами, как просто.

Страница-источник на сайте falconspace.ru