Сочи · работаем по РФ и СНГ Пн–Пт 10–19 · Сб 11–16 (МСК)
Текст этой страницы без разметки — markdown-версия. Полный список страниц сайта — llms.txt, тексты всех страниц целиком — llms-full.txt.
PWA-приложения · обвязка от 2 недель от 40 000 ₽ Без App Store

PWA: сайт, который становится приложением

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

  • Есть сайт — не переписываем его, обвязка ставится поверх
  • Один код вместо двух приложений и двух публикаций
  • Живёт на вашем домене — из чужого магазина его не удалят
Проверить свой сайт
от 40 000 ₽ 2–3 недели 150+ сайтов 9 лет в digital
300+проектов за 9 лет
150+сайтов, поверх которых это ставится
2недели до обвязки готового сайта
9лет в digital
5 вопросов, чтобы понять, подойдёт ли ваш сайт Перейти к тесту
Разбираемся

Что такое PWA простыми словами

Аббревиатура звучит сложнее, чем устроена. Разберём за минуту — дальше будет понятно, за что вы платите и почему это дешевле приложения.

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

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

Главное следствие: второй кодовой базы не появляется. Нативное приложение — это отдельная программа под iOS и отдельная под Android, которые надо писать, публиковать и обновлять параллельно с сайтом. PWA — тот же сайт: вы правите его один раз, и правка сразу у всех, без ожидания модерации.

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

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

И честная оговорка сразу: PWA — не полная замена нативному приложению. Там, где нужны камера, работа с датчиками или фоновая геолокация, обвязка не поможет. Мы разбираем это отдельным блоком ниже, а не прячем в сноску.

Что это даёт бизнесу

Шесть вещей, которые появляются у сайта после обвязки. Пять из них человек замечает сразу, шестая заметна только вам — в счетах и сроках.

Иконка на домашнем экране

Вас перестают искать в браузере — вас открывают. Между «вспомнил о вас» и «оказался у вас» исчезает поиск, выбор из выдачи и чужие вкладки, где легко потеряться.

Запуск без браузера

Ни адресной строки, ни панели вкладок: приложение открывается во весь экран со своим экраном загрузки. Экрана больше — и это не косметика: на телефоне каждая строка интерфейса отъедает у вас контент.

Работа при плохой связи

Страницы, которые человек уже открывал, показываются без сети. В метро, в лифте, в подвале склада вместо «нет подключения» он видит то, что смотрел вчера, — и может действовать дальше.

Уведомления

Статусы заказов, напоминания, акции — сообщением на телефон, без магазинов приложений и их правил. На iPhone это работает с оговорками, и мы их честно перечисляем ниже.

Один код вместо двух

Не появляется вторая и третья кодовая база под iOS и Android. Правка делается один раз в сайте и сразу оказывается у всех — не нужно выпускать три версии и ждать, пока люди обновятся.

Ничего не публикуется

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

Как сайт превращается в приложение

Четыре шага, которые проходит человек. Нажимайте — разницу между вкладкой и приложением словами передать невозможно, её видно только глазами.

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

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

На Android установка предлагается кнопкой, на iPhone делается вручную через меню «Поделиться». Мы рисуем подсказку сами — иначе половина людей просто не догадается.

Шаг 1 · сайт во вкладке

vash-sayt.ru3 вкладки

Запись на приём

Тот же сайт, что и всегда. Чтобы вернуться завтра, человеку придётся снова его искать.

Нажмите кнопку — дальше начинается то, ради чего делается обвязка.

Шаг 2 · после первого действия

vash-sayt.ru3 вкладки
Поставить на домашний экран? Откроется как приложение, без адресной строки. Займёт меньше мегабайта.

Ничего не скачивается из магазина и не проходит модерацию: браузер просто создаёт ярлык и сохраняет страницы в память телефона.

Шаг 3 · домашний экран

S

Иконка рядом с остальными

Теперь вы находитесь там же, где мессенджеры и банк, — а не в закладках, куда никто не заходит.

Шаг 4 · запуск с иконки

Запись на приём

Адресной строки нет, вкладок нет. Расписание открылось из памяти телефона — до того, как пришёл ответ сервера.

Открылось за0,4 секунды

Скорость на четвёртом экране — не магия: страница уже лежала в памяти телефона, и сеть нужна была только для актуального расписания.

Подойдёт ли ваш сайт

Цена начинается от 40 000 ₽ по обеим дорогам — и когда мы надстраиваем над готовым сайтом, и когда собираем приложение с нуля. Дальше всё зависит от объёма: в первом случае от готовности сайта, во втором от количества экранов и функциональности. Пять вопросов, чтобы понять, какая дорога ваша. Ответы никуда не отправляются: тест считает прямо в браузере.

1 · Есть ли у вас сайт
2 · Как сайт выглядит на телефоне
3 · Есть ли доступ к коду и хостингу
4 · Как быстро открывается на телефоне
5 · Как часто к вам возвращаются клиенты
Ответьте на пять вопросов

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

Отвечено 0 из 5

Тест смотрит на пять признаков, а настоящий разбор — на сам сайт: его структуру, скорость на реальных устройствах и то, что стоит под капотом. Разбор бесплатный, и в нём мы называем точные часы, а не диапазон.

Забрать разбор сайта

Забрать разбор своего сайта

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

Пригодность к обвязке Что чинить первым Часы и деньги

от 40 000 ₽

Ответ в течение рабочего дня. Звонить без спроса не будем

Заявка принята

Посмотрим сайт и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.

От чего зависит цена

Цена стартует от 40 000 ₽ по обеим дорогам, а дальше расходится. Если сайт уже есть — всё решает его готовность к переделке. Если сайта нет — объём: сколько экранов, нужен ли личный кабинет, что должно работать без сети.

  1. Готовность сайта — или его отсутствие

    Главный фактор, и он разный для двух случаев. Если сайт есть: над современным адаптивным сайтом с https и нормальной скоростью обвязка ставится за двадцать часов — это и есть от 40 000 ₽. Над сайтом без мобильной версии ставить её бессмысленно, пока эта версия не сделана: приложение упаковывает сайт, а не чинит его. Если сайта нет: старт тот же, но считается объём — количество экранов, глубина личного кабинета, нужна ли админка. Разброс здесь больше, чем от любого набора технических возможностей.

  2. Что приложение должно уметь без сети

    Показывать уже открытые страницы — это базовый кэш, он входит во вторую смету. Работать полноценно офлайн и досылать сделанное, когда связь вернётся, — совсем другая работа: нужно решать, что делать при конфликте данных, и проверять это на живых обрывах связи. Для сервисов, которыми пользуются в полях, это обязательно; для витрины — избыточно.

  3. Нужны ли уведомления и кому

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

  4. Сколько устройств придётся реально проверить

    Установка и уведомления ведут себя по-разному на Android и на iPhone, а на старых телефонах — ещё иначе. Проверка на своём ноутбуке ничего не доказывает. Чем шире аудитория и чем старее её телефоны, тем больше часов уходит на приёмку — и это те часы, которые обычно забывают заложить.

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

Три сборки

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

Обвязкаот 40 000 ₽2–3 недели

Готовый сайт ставится на домашний экран

  • Иконка на домашнем экране и запуск без адресной строки
  • Экран загрузки с вашим логотипом вместо белой вспышки
  • Подсказка «установить» в нужный момент, а не при первом заходе
  • Работает на Android и iOS — с оговорками по iOS, они на странице
  • Ничего не публикуется в магазинах приложений и не модерируется
  • Сам сайт не переписывается: обвязка ставится поверх
чаще выбираютС офлайном и уведомлениямиот 130 000 ₽3–5 недель

Приложение, которое живёт при плохой связи

  • Открытые страницы доступны без сети, а не белый экран
  • Уведомления на телефон — без магазинов приложений и их правил
  • Мгновенный запуск и переходы: ускоряем то, что тормозит
  • Видно, сколько человек поставили приложение и сколько вернулись
  • Всё из обвязки внутри, а не вместо
  • Проверка на живых телефонах, включая старые Android
Рабочий инструментот 180 000 ₽4–6 недель

Для сотрудников и постоянных клиентов

  • Вход без пароля и своё содержимое у каждого пользователя
  • Заявки и отчёты оформляются офлайн и уходят, когда вернётся сеть
  • Роли: сотрудник видит одно, клиент другое
  • Ставится на телефоны команды без магазинов и без администратора
  • Нагрузочная проверка до запуска, а не после первой смены
  • Две недели наблюдения после релиза, правки по поведению входят

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

Приложение живёт на вашем домене

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

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

Как это записано в договоре

  • Код обвязки — в вашем репозитории, рядом с кодом сайта
  • Приложение раздаётся с вашего домена и вашего хостинга
  • Ключи для уведомлений выпускаются на вас, а не на студию
  • Иконки и экран загрузки передаются исходниками, а не картинками
  • База подписчиков на уведомления — в вашей системе
  • Аккаунт разработчика не нужен вовсе: публикации нет
  • Документация: что где лежит и как выкатывать обновление
  • Обвязку можно снять за час: сайт продолжит работать как обычный

PWA, Mini App или приложение

Четыре способа оказаться в телефоне клиента. Таблица одинаковая на этой странице и на странице Mini Apps: две наши страницы, спорящие друг с другом, хуже одной молчащей.

Что сравниваемPWATelegram Mini AppНативное приложениеМобильная версия сайта
Что это по сути Ваш сайт с иконкой на экране Приложение внутри мессенджера Отдельная программа из магазина Сайт в браузере
Нужен ли Telegram Нет Да Нет Нет
Иконка на экране Да Нет, вход через мессенджер Да Нет
Работа без сети Да, для открытых страниц Нет Да, полноценно Нет
Публикация Нет Нет App Store и Google Play, модерация Нет
Откуда приходят люди Сайт, поиск, реклама Бот, канал, QR Магазин приложений Поиск и реклама
Доступ к камере и датчикам Ограниченный Ограниченный Полный Ограниченный
Стоимость входа от 40 000 ₽ от 50 000 ₽ от 150 000 ₽ Входит в сайт
Когда выбирать Есть работающий сайт и возвращаются клиенты Аудитория в Telegram, сайта может не быть Нужен офлайн, камера, работа в фоне Разовые визиты из поиска

PWA и Mini App не конкурируют — у них разные точки входа. Приложение на домашнем экране ловит тех, кто уже был на вашем сайте; Mini App ловит тех, кто пришёл из Telegram. Часто разумно сделать оба, и тогда общая часть — сервер, база, оплата — пишется один раз.

Про Mini Apps у нас отдельная страница со своим сравнением и конфигуратором. Telegram Mini Apps

Чего PWA не умеет

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

  1. На iPhone установка делается вручную

    На Android браузер сам предлагает поставить приложение кнопкой. На iPhone такой кнопки нет: человек должен открыть меню «Поделиться» и выбрать «На экран „Домой"». Обойти это нельзя — можно только нарисовать понятную подсказку, что мы и делаем. Часть людей всё равно не поставит, и это надо закладывать в ожидания.

  2. Уведомления на iPhone работают иначе

    Они приходят только тем, кто уже поставил приложение на домашний экран, — то есть аудитория уведомлений там заметно уже, чем на Android. Само разрешение тоже надо просить в подходящий момент, а не при первом заходе: отказ запоминается, и переспросить нельзя.

  3. Нет доступа к части возможностей телефона

    Фоновая геолокация, работа с датчиками, обмен данными с другими приложениями, работа при выключенном экране — всё это остаётся за нативной разработкой. Если ваш сценарий требует чего-то из списка, обвязка его не закроет, и мы скажем об этом на разборе, а не после сборки.

  4. Сохранённые данные система может удалить

    Если приложением долго не пользуются, телефон вправе очистить его память ради места. Практическое следствие простое: в офлайн-кэш нельзя класть то, что нельзя потерять. Черновик заявки — можно, единственный экземпляр документа — нет; такие вещи всегда уезжают на сервер.

  5. Правила платформ меняются

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

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

Три возражения, которые нам говорят вслух

Все три справедливые. Отвечаем здесь, а не на созвоне, — чтобы вы могли подумать без нас и без давления.

«Это же просто закладка»

Закладка открывает сайт во вкладке браузера и требует сети. Приложение запускается во весь экран, показывает уже открытые страницы без интернета, может прислать уведомление и имеет свой экран загрузки. Разница видна на четвёртом экране демо выше — там нет адресной строки, и это не косметика: на телефоне это два ряда интерфейса, отобранных у вашего контента.

«На iPhone всё урезано»

Отчасти правда, и мы перечислили это блоком выше, не пряча. Установка там делается вручную, уведомления работают уже. Но иконка на экране, запуск без браузера и работа при плохой связи есть и на iPhone — а это и есть основная польза. Считать надо по своей аудитории: если у вас три четверти Android, ограничения касаются меньшинства.

«Зачем, если есть мобильная версия»

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

От разбора до иконки — 2–3 недели

Так идёт обвязка готового сайта. Если сайт надо готовить, подготовка идёт отдельным этапом до первой недели, и её срок мы называем после разбора. Ваше участие за всю работу — около часа.

  1. Неделя 1 Разбор сайта и проверка пригодности

    Смотрим сайт изнутри: структуру, скорость на реальных телефонах, что и как отдаёт сервер. К концу недели вы знаете точно, попадаете ли вы в базовую смету и что чинить, если нет.

    От вас: доступы и полчаса разговора

  2. Неделя 2 Обвязка, иконки, экран загрузки

    Кладём служебные файлы, рисуем иконки под все размеры, делаем экран запуска с вашим логотипом вместо белой вспышки. Настраиваем, что кэшируется, а что всегда берётся с сервера, — от этого зависит, увидит ли человек вчерашние цены.

    От вас: логотип в векторе, если он есть

  3. Неделя 3 Проверка на живых телефонах

    Ставим приложение на разные устройства: свежий Android, старый Android, iPhone. Проверяем установку, запуск, поведение при обрыве связи и обновление до новой версии. Здесь всплывает то, чего не видно в браузере на ноутбуке.

    От вас: полчаса на приёмку со своего телефона

  4. Запуск Включаем подсказку об установке

    Подсказка появляется после первого полезного действия человека, а не при заходе. Отдельно рисуем инструкцию для iPhone, где кнопки установки нет. С этого момента приложение доступно всем посетителям сайта.

    От вас: ничего

  5. Дальше Смотрим, сколько поставили и вернулись

    Установка — это метрика, а не событие. Считаем, сколько человек поставили приложение, сколько открыли повторно и чем их поведение отличается от обычных посетителей. По этим числам и решается, нужны ли уведомления и офлайн.

    От вас: ничего

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

Проверить свой сайт

Как устроена обвязка

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

Сайт не переписывается. Рядом с ним появляются два служебных файла: описание приложения и фоновый скрипт-посредник. Всё остальное остаётся как было — та же вёрстка, тот же бэкенд, те же адреса страниц. Поэтому обвязка и стоит двадцать часов, а не как новая разработка: мы не трогаем то, что работает.

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

Обновления не залипают. Самая известная беда PWA — старая версия, живущая в телефоне месяцами, потому что посредник продолжает отдавать её из кэша. Мы решаем это так: новая версия скачивается в фоне и применяется при следующем запуске, а если изменения критичные — приложение говорит об этом само и предлагает перезапуститься. Пользователь никогда не остаётся с версией, о которой мы не знаем.

Проверка идёт на устройствах, а не в эмуляторе. Установка, запуск, поведение при обрыве связи и обновление проверяются на живых телефонах, включая старые Android — там ограничения по памяти и скорости настоящие, а не смоделированные.

Публичных кейсов у направления нет

Так и написано, потому что это правда. Тема пришла к нам из внутренних инструментов для сотрудников, а их не показывают: там чужие процессы, чужие данные и обычно NDA.

Под NDAвнутренние инструменты

Откуда взялось это направление

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

Рассказать про эти проекты можно только типом задачи. Цифры экономии, которые тут отлично смотрелись бы, мы называть не вправе — и придумывать не станем.

Всё портфолио
Что можно посмотреть

Работу видно на разборе

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

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

Записаться на разбор

Здесь будет первый кейс

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

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

Написать нам

Четыре типовые задачи

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

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

Обвязка — надстройка, а не начало цепочки

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

  1. 01

    Сайт

    Основание всего. Обвязка ставится поверх него и наследует все его достоинства и все проблемы.

    Разработка сайтов
  2. 02

    PWA-обвязка

    Превращает посетителя в пользователя: иконка на экране, повторные заходы, уведомления.

    Вы здесь
  3. 03

    Реклама

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

    Контекстная реклама
  4. 04

    Поддержка

    Приложение живёт вместе с сайтом: правила платформ меняются, и обвязку иногда надо подвинуть следом.

    Поддержка сайтов

Если сайта ещё нет, а аудитория в TelegramТогда быстрее и дешевле начать не с сайта и обвязки, а с приложения внутри мессенджера: там своя площадка не нужна, и точка входа уже есть.

Telegram Mini Apps

Когда PWA вам не нужен

Четыре ситуации, в которых мы отговариваем. Обвязка — самая лёгкая продажа в нашем списке: дёшево, быстро, звучит современно. Именно поэтому её чаще всего покупают зря.

  1. Если вас устраивает сайт на закрытом конструкторе

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

  2. Если у вас покупают один раз

    Окна, натяжные потолки, свадьба, переезд. Приложение окупается вторым и третьим заходом, а если второго не будет — иконка на экране не понадобится никому. Те же деньги в скорость сайта и в рекламу дадут больше, и на разборе мы предложим именно это.

  3. Если нужен офлайн с камерой, датчиками или работой в фоне

    Это нативная разработка, и никакая обвязка её не заменит. Курьерское приложение с фоновым треком, сканер штрихкодов, работа при выключенном экране — всё это за пределами возможностей PWA. Мы скажем это на разборе и посчитаем нормальное приложение.

  4. Если сайт сам по себе плохо работает на телефоне

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

Есть отдельная страница о том, когда наши услуги не нужныОна написана не для красоты: разбор довольно часто заканчивается словами «вам это пока не нужно, сделайте вот это сами» — и мы показываем как.

Когда вам это не нужно

PWA: что стоит знать до заказа

Что такое PWA и чем оно отличается от сайта

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

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

Второе отличие — работа при плохой связи. Страницы, которые человек уже открывал, показываются из памяти телефона и без интернета. Это важнее, чем кажется: в метро, в лифте, на складе и в поездке сайт просто не откроется, а приложение покажет то, что смотрели вчера.

PWA или нативное приложение

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

PWA не заменяет нативное приложение там, где нужны эти возможности. Зато закрывает самый частый сценарий — «сделайте, чтобы нас можно было открывать с иконки и чтобы работало без сети» — за долю стоимости и без публикации. Практическое правило простое: если ваш сценарий описывается словами «наш сайт, но удобнее и быстрее», нужна обвязка. Если в нём есть камера, датчики или фон, нужно приложение.

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

Сколько стоит превратить сайт в приложение

Обвязка готового сайта начинается от 40 000 ₽ и занимает 2–3 недели. Это двадцать часов работы: служебные файлы, иконки под все размеры, экран запуска, настройка кэширования и проверка на реальных устройствах. Сам сайт при этом не переписывается — именно поэтому обвязка дешевле любой разработки с нуля.

Главная переменная — состояние сайта. Над современным адаптивным сайтом с https обвязка ставится за базовые часы. Если мобильной версии нет, она медленно грузится или нет доступа к коду, сначала идёт подготовка — и её часы считаются отдельно и называются до счёта. Разброс здесь больше, чем от любого набора возможностей, поэтому цена и указана как «от».

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

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

На Android браузер сам предлагает установку кнопкой, и почти все возможности доступны. На iPhone установка делается вручную через меню «Поделиться», кнопки для этого нет, и подсказку приходится рисовать самим — часть аудитории всё равно не поставит приложение. Уведомления на iPhone приходят только тем, кто уже установил приложение на домашний экран.

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

И главное, о чём стоит помнить при чтении любых статей на эту тему: правила платформ меняются, иногда резко и в обе стороны. Поэтому мы не приводим здесь ни версий, ни дат — что доступно сегодня, проверяется в начале конкретного проекта и переносится в смету, а не берётся из статьи годовой давности.

Вопросы про PWA

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

Закладка открывает сайт во вкладке и требует интернета. Приложение запускается во весь экран без адресной строки, показывает уже открытые страницы без сети, умеет присылать уведомления и имеет свой экран загрузки. Проще всего увидеть разницу в демо выше: на четвёртом экране адресной строки нет, и экран становится выше на два ряда интерфейса.

Тогда собираем приложение сразу, отдельный сайт для этого не нужен. Попутно оно остаётся обычным сайтом: открывается по ссылке, индексируется поиском, работает на десктопе — второго продукта не появляется. Старт тот же, от 40 000 ₽, а дальше цена зависит от объёма: сколько экранов, нужен ли личный кабинет, что должно работать без сети.

Да, но с оговорками, и мы их перечислили отдельным блоком. Установка там делается вручную через меню «Поделиться», кнопки для этого нет — подсказку рисуем сами. Уведомления приходят только тем, кто уже поставил приложение на домашний экран. Иконка, запуск без браузера и работа при плохой связи на iPhone есть, и это основная польза.

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

Обвязка готового сайта — от 40 000 ₽, 2–3 недели. Это двадцать часов: служебные файлы, иконки, экран запуска, настройка кэша и проверка на живых устройствах. Дальше цену двигают офлайн-режим с досылкой данных, уведомления и количество устройств, которые надо реально проверить. Сборка с нуля стартует с той же цифры, но считается по объёму экранов и функциональности.

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

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

Да, и обвязка при этом не окажется выброшенными деньгами: сервер, база и логика переиспользуются, переписывается интерфейс. Разумный порядок обычно такой — сначала обвязка, потом смотрим на цифры установок и повторных заходов, и только если упираемся в ограничения платформы, идём в магазины. Мобильные приложения

Пришлите адрес сайта — скажем, во что обойдётся приложение

  • Разбор 30 минут: смотрим сайт и говорим, готов ли он к обвязке
  • Если нужна подготовка — называем часы отдельной строкой, а не прячем в смету
  • Если PWA вам не нужен — скажем на разборе и предложим, что вместо
Николай Старостов, основатель Starostoff
Николай Старостов Основатель. Разбор веду лично, не передаю менеджеру
Куда прислать разбор

Ответ в течение рабочего дня

Заявка принята

Посмотрим сайт и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.