Хабаровская интернет-студия KhvWeb
Главная / Услуги / PWA-приложение
01 — PWA-приложение

Приложение для клиентов — без App Store, модерации и миллионов рублей

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

от 120 000 ₽
от 3 недель
Работает офлайн
Push-уведомления
Обсудить приложение Посмотреть кейсы

Работаем удалённо. Пришлите задачу — за сутки скажем, нужен PWA или хватит адаптивного сайта.

Веб-студия KhvWeb
Квалификация

Кому подходит PWA, а кому — нет

Честно говорим и о том, когда приложение вам не нужно: иногда достаточно адаптивного сайта, и мы скажем об этом сразу.

Сервисы доставки и заказов

Клиент заказывает регулярно: история, повтор заказа в один клик, статус доставки, push о готовности.

Запись на услуги

Салоны, клиники, автосервисы, фитнес. Клиент записывается и получает напоминание накануне — без звонков администратора.

Сотрудники в поле

Курьеры, мастера, торговые представители. Приложение работает без интернета: данные сохраняются и уходят в систему позже.

Каталоги с частыми визитами

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

Программы лояльности

Карта клиента, бонусы, персональные акции через push — дешевле SMS и работает лучше рассылок.

Компании без бюджета на нативное

Хочется приложение, но 2 000 000 ₽ и полгода — не вариант. PWA даёт 80% пользы за гораздо меньшую стоимость.

Когда не стоит

  • Простой лендинг или визитка — приложение здесь не нужно
  • Нужен Bluetooth, NFC или фоновая геолокация — только нативное приложение
  • Нет API и данных для приложения — сначала сайт и система, потом приложение
  • Бюджет до 120 000 ₽ — начните с адаптивного сайта, приложение добавите позже
  • Аудитория почти не пользуется смартфонами — проверьте статистику своего сайта

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

Боли и решения

Знакомые ситуации?

Мы собрали это из разговоров с клиентами. Если узнали себя — ниже написано, что мы с этим делаем.

«Сайт тормозит на телефоне, клиенты уходят к конкурентам»

Как решаем: переносим интерфейс на Vue/Nuxt: переходы без перезагрузки, мгновенный отклик, кэш на устройстве. На слабом интернете разница видна сразу — сайт, который думал 4 секунды, открывается за 0,5.

Отдельно проверяем на реальных устройствах и на медленном соединении — не только в эмуляторе на быстром компьютере.

«Хотим приложение, но 900 000 ₽ и полгода разработки — не готовы»

Как решаем: делаем PWA: одна кодовая база вместо двух, никакой модерации, запуск за 6–10 недель и в 2–4 раза дешевле нативного приложения.

Если через год понадобится нативное — API и логика уже готовы, обёртку можно сделать поверх того же бэкенда без переписывания системы.

«Клиенты не возвращаются: заказали один раз и забыли про нас»

Как решаем: push-уведомления и иконка на рабочем столе. Приложение напоминает о себе без затрат на рекламу — это самый дешёвый канал повторных продаж.

Настраиваем сегментацию: не спамим всем подряд, а отправляем тем, кому это уместно — по истории заказов и поведению.

«Сотрудники в поле работают с бумагой и звонят в офис: интернета нет»

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

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

«Заплатили за мобильное приложение, а его никто не скачал»

Как решаем: PWA не требует похода в магазин приложений: установка — 2–3 клика по ссылке, которую вы даёте в SMS, письме, чеке или QR-коде.

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

Результат

Что вы получите

Не «сайт готов», а конкретный набор артефактов, которые останутся у вас после сдачи проекта.

Устанавливаемое приложение

Работает с телефона, живёт на рабочем столе, открывается на полный экран.

Доступы и код

Репозиторий, домен, хостинг, админка — всё оформлено на вас.

Настроенные push

Канал возврата клиентов: сегменты, сценарии, статистика по открытиям.

Аналитика

Видно установки, активность, заказы и то, какими экранами пользуются.

Инструкция по установке

Готовая страница и текст для SMS, письма или QR-кода — чтобы клиенты ставили приложение.

30 дней гарантии

Бесплатно исправляем ошибки после запуска и отвечаем на вопросы команды.

Гарантии

Что вы получаете помимо приложения

Договор и фиксированная смета

Объём, сроки и цена закреплены. Без «доплатите за неучтённое».

30 дней гарантии

Исправляем ошибки после запуска бесплатно — включая поведение на конкретных устройствах.

Всё принадлежит вам

Код, домен, хостинг, доступы, push-подписки — оформлены на вас.

Выход из проекта

Приложение работает без нас. Не строим решений, из которых нельзя уйти.

Простыми словами

Что такое PWA и почему это не «ещё один сайт»

PWA (Progressive Web App) — технология, которая превращает сайт в приложение. Пользователь открывает ссылку на телефоне, нажимает «Установить» — и на рабочем столе появляется иконка. Дальше это ведёт себя как обычное приложение: открывается на весь экран без адресной строки, работает без интернета, присылает уведомления.

Устанавливается с сайта

Без App Store и Google Play. Никакой модерации, отказов и комиссии с платежей — вы просто даёте ссылку.

Работает офлайн

Service worker кэширует интерфейс и данные: приложение открывается в метро, на даче и в роуминге.

Присылает push

Напоминание о брошенной корзине, статус заказа, акция. Возвращает клиента без SMS и звонков.

Обновляется мгновенно

Никаких «ждите проверки две недели» и «обновите приложение из стора». Изменили — все получили сразу.

Работает быстро

Интерфейс на Vue/Nuxt отвечает мгновенно: переходы без перезагрузки страниц — это обычный SPA внутри приложения.

Одна база вместо двух

Не нужно писать отдельно под iOS и Android. Одно приложение работает на обоих — экономия в 2–4 раза.

Возможности

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

Не «почти как приложение», а конкретный список того, что получает ваш клиент. Всё перечисленное мы реализовывали в проектах.

Иконка и полный экран

Приложение живёт на рабочем столе и открывается без адресной строки — визуально не отличается от нативного.

Офлайн-режим

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

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

Статус заказа, напоминание, персональная акция. Работают даже когда приложение закрыто.

Камера и файлы

Сфотографировать чек, приложить документ, загрузить аватар — прямо из приложения.

Геолокация

Определить адрес доставки, показать ближайшую точку, построить маршрут курьеру.

Вход по биометрии

Face ID и отпечаток вместо пароля — привычный для телефона сценарий входа.

Оплата внутри

Оплата заказа без перехода на сайт, с сохранённой картой. Комиссия стора — 0%.

Системный «Поделиться»

Клиент отправляет товар или статью в мессенджер одним нажатием — бесплатный канал трафика.

Состав работ

Что входит в разработку PWA

Полный список без «и ещё кое-что по мелочи». Всё, что ниже, входит в стоимость и фиксируется в договоре.

  • Проектирование сценариев — разбираем, какие задачи клиент решает в телефоне, а какие остаются на сайте
  • Дизайн интерфейса — экраны под мобильный формат: навигация, жесты, состояния загрузки и ошибок
  • Frontend на Vue 3 / Nuxt — мгновенные переходы без перезагрузки, скелетоны, плавные анимации
  • API на Laravel — расширяем существующий бэкенд или пишем под приложение — одна база данных
  • Service worker — кэширование интерфейса и данных, стратегия обновления, работа офлайн
  • Манифест и иконки — название, цвета, иконки всех размеров, splash-экран, режим отображения
  • Баннер установки — подсказка для Android и отдельная инструкция для iPhone — где её нет автоматически
  • Push-уведомления — подписка, сегментация, отправка, отписка, обработка нажатий
  • Авторизация и роли — вход по номеру, биометрия, разграничение доступа клиент / сотрудник
  • Оплата внутри приложения — подключение эквайринга, сохранённые карты, чеки 54-ФЗ
  • Интеграции — CRM, 1С, склад, службы доставки — по вашим системам
  • Аналитика — Метрика с целями, отслеживание установок, push и покупок внутри приложения
  • Тестирование — реальные устройства: Android разных версий, iPhone, планшеты, слабый интернет
  • Публикация и обучение — выкладываем на домен, показываем команде, как работать с приложением и пушами
Чего в смете нет: домен и хостинг (оформляются на вас — обычно до 1 000 ₽/год и от 500 ₽/мес), сервис push-уведомлений (бесплатных лимитов хватает почти всем), фотосъёмка и покупка лицензионных изображений. Публикация в App Store и Google Play не входит: PWA их не требует.
Под капотом

Из чего состоит PWA

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

01

Интерфейс

Vue 3 или Nuxt. Мгновенные переходы без перезагрузки — это тот самый SPA-подход внутри приложения.

Vue · Nuxt
02

API

Бэкенд отдаёт данные: каталог, заказы, профиль.

Laravel
03

База данных

PostgreSQL или MySQL плюс Redis для кэша. Одна база на сайт, приложение и админку.

PostgreSQL · Redis
04

Service worker

Слой между приложением и сетью: кэширует интерфейс, отдаёт данные офлайн, ставит действия в очередь.

Офлайн
05

Манифест и push

Манифест делает приложение устанавливаемым, push-сервис доставляет уведомления на устройство.

Установка · Push
Процесс

6 этапов: от сценариев до установки на телефон

Начинаем не с дизайна, а с вопроса «что клиент будет делать в приложении». Иначе получается красивая оболочка без сценариев.

01

Разбор сценариев

Смотрим статистику сайта: что делают с телефона, где бросают. Определяем, что уходит в приложение.

3–5 дней Список экранов и функций
02

Прототип

Схема экранов и переходов. Согласуем логику до отрисовки — на этом этапе правки бесплатны.

5–7 дней Кликабельный прототип
03

Дизайн

Мобильные экраны: навигация, жесты, состояния загрузки, ошибок и пустых списков.

7–10 дней Макеты всех экранов
04

Разработка

Интерфейс на Vue/Nuxt, API на Laravel, service worker, манифест, push, авторизация.

3–6 недель Работающее приложение
05

Тестирование

Реальные устройства: Android разных версий, iPhone, планшеты, слабый интернет и офлайн.

5–7 дней Отчёт по устройствам
06

Запуск и обучение

Публикация, настройка аналитики и push, обучение команды, инструкция по установке для клиентов.

2–3 дня Приложение у клиентов
Сравнение

PWA, нативное приложение или обычный сайт

Все три варианта рабочие — вопрос в задаче и бюджете. Ниже честные цифры, включая те, где PWA проигрывает.

КритерийPWAНативное приложениеАдаптивный сайт
Стоимость разработкиот 120 000 ₽от 900 000 ₽входит в стоимость сайта
Срок3 недели – 2 месяца4–6 месяцев—
Публикация в сторахне нужнаApp Store и Google Playне нужна
Модерация и отказынетесть, до 2 недель на проверкунет
Комиссия с платежей0%15–30% через сторы0%
Обновлениямгновенночерез сторе, часть пользователей не обновляетсямгновенно
Работа офлайнда, в пределах кэшада, полностьюнет
Push-уведомленияAndroid — да; iOS — с 16.4 и после установкида, на обеих платформахнет
Доступ к железукамера, гео, микрофон, файлы. Без Bluetooth, NFC и фоновой геолокацииполныйкамера, гео
Иконка на рабочем столедаданет
Найти в поиске сторанетданет
Установок с одного пользователя2–3 клика со ссылкипоиск, скачивание, ожиданиене требуется

Если нужен Bluetooth, NFC, сложная работа с камерой, AR или фоновая геолокация — PWA не подойдёт, нужно нативное приложение. Мы скажем об этом до подписания договора, а не в середине проекта.

Честно

Чего PWA не умеет — и когда нужен другой вариант

Мы не продаём PWA всем подряд. Вот ограничения, о которых нужно знать до старта.

Ограничения технологии

  • Push на iPhone — только с iOS 16.4 и только если приложение добавлено на экран «Домой». Просто открыть сайт в Safari недостаточно.
  • Офлайн-кэш на iOS ограничен (порядка 50 МБ) — в приложение не поместится каталог на 20 000 товаров с фото.
  • Нет доступа к Bluetooth, NFC и фоновой геолокации — это ограничение самих браузеров, обойти его нельзя.
  • Приложения нет в App Store и Google Play — часть аудитории ищет именно там и вас не найдёт.
  • Сложную графику и игры в 60 fps делать не стоит — для этого нужен нативный код.

Когда мы отговорим от PWA

  • Нужен Bluetooth или NFC: терминалы оплаты, замки, трекеры, медицинские датчики.
  • Нужна фоновая геолокация: трекинг курьеров, мониторинг автопарка.
  • Нужен AR, тяжёлая графика, игры или обработка видео на устройстве.
  • Нужно присутствие в сторе как канал привлечения — тогда PWA дополняют нативным приложением, а не заменяют его.
  • Нет API и данных: приложение без бэкенда превращается в красивую заглушку.

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

Кейс

Как мы делали сервис для Pacific Mental Health Centre

Онлайн-записьМультиязычностьБлог

Задача: Дать пациентам возможность записаться самостоятельно и снизить поток однотипных звонков на ресепшен.

  • Онлайн-запись на приём
  • Каталог специалистов и направлений
  • База знаний и блог для пациентов
  • Двуязычная версия сайта
−45%
звонков на ресепшен
+180%
заявок через сайт
3 клика
до записи на приём
Все кейсы
Pacific Mental Health Centre
Технологии

На чём делаем

Один стек на сайт, приложение и админку — поэтому данные не расходятся, а команда не делится на «сайтовых» и «мобильных».

Разработка

PHP 8 · LaravelVue 3NuxtTypeScriptTailwindLaravel Voyager

Интеграции

1СamoCRMБитрикс24RetailCRMМойСкладЮKassaCloudPaymentsСБП

Аналитика

Яндекс МетрикаGoogle Analytics 4Яндекс ДиректCalltouchRoistat

ИИ и данные

YandexGPTDeepSeekOpenAILangChainQdrantPostgreSQL
Цены

Сколько стоит PWA-приложение

Три варианта: от лёгкой надстройки к существующему сайту до полноценного приложения с кабинетами. Точную смету называем после разбора сценариев.

PWA-надстройка к сайту

от 120 000 ₽ разово
3–4 недели
  • Манифест и иконки всех размеров
  • Service worker и офлайн-кэш
  • Баннер установки и инструкция для iPhone
  • Push-уведомления
  • Установка на телефон с сайта
  • Аналитика установок
  • 30 дней гарантии
Обсудить надстройку
Выбирают чаще всего

PWA-приложение под ключ

от 250 000 ₽ разово
6–10 недель
  • Собственный интерфейс на Vue/Nuxt
  • API на Laravel — своя логика под приложение
  • Авторизация и биометрия
  • Оплата внутри приложения
  • Интеграции с CRM и 1С
  • Push со сценариями
  • Тестирование на реальных устройствах
  • 30 дней гарантии
Обсудить приложение

PWA + личные кабинеты

от 450 000 ₽ разово
2–4 месяца
  • Всё из пакета «под ключ»
  • Роли и права: клиент, сотрудник, партнёр
  • Офлайн-режим с очередью действий
  • История заказов и документов
  • Программа лояльности и бонусы
  • Админ-панель и push-рассылки
  • Дашборд по показателям
  • Приоритетная поддержка на запуске
Обсудить кабинеты
Если нужен и сайт, и приложение — считаем одним проектом: сайт на Laravel, приложение как второй клиент к тому же API. Это дешевле, чем два отдельных проекта, и исключает расхождение данных между сайтом и приложением.

Обсудим PWA-приложение?

Расскажите, что клиент или сотрудник должен делать в приложении. За сутки вернёмся с оценкой: подойдёт PWA или нужен другой формат. Если хватит адаптивного сайта — скажем прямо.

(4212) 24-24-29 Написать в Telegram

Ответим в рабочее время, обычно в течение часа. Без спама.

Со стороны клиента

Что нужно от вас

Мы не перекладываем работу на клиента. Но без нескольких вещей проект не сдвинется — вот полный список.

01

Разбор сценариев

Созвон на 40 минут: что клиент должен делать в приложении и что мешает ему сейчас.

Нет времени — пришлём список вопросов, ответите письменно
02

Доступ к статистике

Если сайт уже есть — посмотрим Метрику: сколько мобильного трафика и что на телефоне делают.

Аналитики нет — соберём сценарии из интервью с вашей командой
03

Данные и API

Если есть учётная система — нужен доступ к API, чтобы приложение работало с реальными данными.

API нет — спроектируем его в рамках проекта
04

Обратная связь

Посмотреть прототип и дизайн, сказать «да» или «переделать здесь». Два круга правок включены.

Согласуем по короткому чек-листу за 20 минут
Сколько это займёт: 2–3 часа вашего времени за весь проект. Всё остальное — наша работа.
Отзывы

Что говорят наши клиенты

Анастасия Р.
Анастасия Р.
Владелец проекта, РашЙога

Я бы поставила 5 с минусом, и этот минус ТОЛЬКО за то, что не всегда по времени с промокодами все было четко. Не знаю, есть ли в подобной работе более высокая оценка 😀 Хочу подчеркнуть, что Сергей практически всегда на связи, проблемы, которые от нас не особо зависят, решаются оперативно. Сайт с участием Сергея был разработан, видоизменялся, улучшался и дополняется до сих пор и сейчас в полной мере отражает моё видение онлайн студии йоги. Абсолютно все идеи от меня и пользователей были реализованы, а также от Сергея всегда предлагаются улучшения. Технические вопросы пользователи сайта обычно решают напрямую с Сергеем, и он всегда очень открыт и вежлив.

Наталья Р.
Наталья Р.
Начальник отдела рекламы, Хабаровская краевая филармония

За долгие годы работы в Хабаровской филармонии было много разных задач. Сергей всегда отзывался и приходил на помощь в их реализации! Каждый сезон у нас на сайте что-то меняется и всегда в лучшую сторону!

П
Представитель клиники
Pacific Mental Health Centre

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

Бесплатно

Не уверены, нужен ли вам PWA?

Опишите задачу — за сутки скажем честно: хватит адаптивного сайта, подойдёт PWA или нужен другой формат. Это бесплатно и без обязательств.

(4212) 24-24-29
FAQ

Частые вопросы

Не нашли ответ? Напишите в Telegram @khvweb — ответим в рабочее время, обычно в течение часа.

Нужно ли публиковать приложение в App Store и Google Play?
Нет, и в этом главное преимущество PWA. Приложение устанавливается прямо с вашего сайта: на Android браузер сам предложит «Установить приложение», на iPhone пользователь нажимает «Поделиться» → «На экран Домой». Никакой модерации, никаких отказов из-за «недостаточной уникальности», никакой комиссии 15–30% с платежей и никакого ожидания проверки по две недели. Обновления тоже приходят мгновенно: вы поменяли код — у всех пользователей новая версия при следующем открытии.
Будет ли приложение работать без интернета?
Да, в пределах заложенной логики. Мы настраиваем service worker, который кэширует интерфейс и те данные, которые вы укажете: каталог, прайс, статью, историю заказов, черновик формы. Метро, подвал, дача, роуминг — приложение открывается и показывает контент. Отправить заявку или оплатить без сети не получится: такие действия мы ставим в очередь и отправляем автоматически, когда связь появится. Важно понимать: офлайн — это не «полная копия системы в телефоне», а заранее выбранный набор данных.
Чем PWA отличается от нативного приложения?
Нативное приложение пишут отдельно под iOS и Android — это две разные кодовые базы, два релиза, две модерации. PWA — одна кодовая база, которая работает в любом браузере и устанавливается на телефон. Стоит в 2–5-10 раз дешевле и делается за 6–10 недель. Ограничения у PWA есть: нет глубокого доступа к железу (Bluetooth, NFC, сложная фоновая работа, AR) и нет присутствия в магазинах приложений. Если вам нужно именно это — нужно нативное приложение, и мы об этом скажем прямо.
Как именно клиент установит приложение?
Три пути. Первый: заходит на сайт с телефона — браузер показывает баннер «Установить приложение». Второй: вы присылаете ссылку в SMS, письме или мессенджере — клиент открывает и устанавливает. Третий: QR-код на визитке, в чеке, на упаковке или в точке продаж. После установки на рабочем столе появляется иконка, приложение открывается на весь экран без адресной строки — визуально не отличается от обычного приложения.
Работают ли push-уведомления на iPhone?
Да, но с оговоркой, которую важно знать заранее. На Android push работают сразу и полноценно. На iPhone — только с iOS 16.4 (вышла в 2023 году) и только если пользователь добавил приложение на экран «Домой». Если он просто открыл сайт в Safari и закрыл — push не придёт. На практике это значит: iOS-аудиторию нужно мотивировать установить приложение (скидка, бонус, удобство), тогда push доходят. Мы всегда говорим об этом до старта, а не после, и закладываем в интерфейс подсказку по установке.
Нужен ли отдельный бэкенд?
Если у вас уже есть сайт на Laravel — почти всегда нет: мы расширяем существующий API и переиспользуем бизнес-логику. PWA — это второй клиент к той же системе, а не отдельный продукт со своей базой. Если сайта нет, сначала делаем API и админку, потом приложение. Дублировать данные и заводить вторую базу мы не будем — это гарантированный источник расхождений.
Можно начать с сайта и потом дорастить до PWA?
Да, и это самый разумный путь по деньгам. Сначала адаптивный сайт, который решает основную задачу, а когда появится понимание, какие сценарии нужны в телефоне, — добавляем PWA-слой. Ничего переписывать не придётся: интерфейс на Vue/Nuxt, API на Laravel, база та же.

Обсудим вашу задачу

Оставьте контакты — вернёмся с расчётом, планом работ и сроками.

Оставить заявку Написать в Telegram

Ответим в рабочее время, обычно в течение часа. Без спама.

Обсудить проект