PWA на Битрикс: приложение поверх коробки, без переезда
Сайт на 1С-Битрикс можно поставить на домашний экран, не меняя платформу и не трогая ядро. Служебные файлы ложатся рядом с сайтом, весь код — в /local/, каталог /bitrix/ остаётся таким же, как у вендора. Поэтому штатные обновления после обвязки продолжают накатываться, а адреса страниц не меняются.
- Ядро не правим: весь код обвязки живёт в
/local/ - Обновления платформы накатываются штатно, как и раньше
- ЧПУ и адреса не меняются — сайт остаётся сайтом и индексируется
Это платформенная страница. Что такое PWA вообще, чего оно не умеет и подойдёт ли ваш сайт — на странице направления: PWA-приложения
Кому сюда, а кому — на соседнюю страницу
Прочитайте правую колонку раньше левой: под словом «Битрикс» у нас в стране живут два разных продукта, и половина писем про «приложение на Битриксе» приходит не по адресу. Пять минут здесь сэкономят и вам, и нам разговор ни о чём.
- У вас сайт на коробке 1С-Битрикс: он лежит на вашем хостинге, у него есть админка и файловая структура
- Есть доступ к файлам сайта — по FTP, SSH или через репозиторий, — а не только вход в админку
- Шаблон адаптивный или вы готовы его починить: приложение упаковывает сайт, а не чинит его
- К вам возвращаются: покупают повторно, записываются, заходят в кабинет. Иначе иконку ставить некому
- У вас Битрикс24 — это корпоративный портал и CRM, а не сайт. Мобильное приложение у него своё, вендорское, и обвязка к нему отношения не имеет. Вам на внедрение Битрикс24
- Сайт собран в конструкторе — любом. Прежде чем обещать обвязку, надо проверить, пускает ли площадка служебные файлы в корень: на закрытых платформах их положить некуда
- Сайт всё равно переделывается целиком в ближайшие месяцы. Тогда обвязку закладывают в новый сайт, а не ставят в тот, который скоро выключат
Путаница здесь не от невнимательности: у вендора два продукта с почти одинаковым названием, и они решают разные задачи. 1С-Битрикс — платформа для сайта, Битрикс24 — портал для сотрудников. Обвязка, о которой эта страница, ставится поверх первого.
Куда ложится обвязка на Битриксе
Блок для того, кто отвечает за сайт. Если такого человека у вас нет, его можно пропустить: на выбор сметы он не влияет. Но именно эти четыре абзаца обычно и решают, разрешит ли ваш разработчик трогать коробку.
В корень сайта кладутся два служебных файла, весь остальной код — в /local/. Первый файл описывает приложение: как называется, какая иконка, каким цветом открывается экран запуска. Второй — фоновый посредник, который решает, что показывать из памяти телефона, а что запрашивать с сервера. Больше ничего в корне не появляется, и ни один файл в /bitrix/ не изменяется: этот каталог остаётся таким же, каким пришёл от вендора.
Подключение идёт через шаблон, а не через правку ядра. Ссылка на описание приложения и регистрация посредника добавляются в шаблон сайта — там же, где подключается всё остальное. Это не техническая придирка и не вкусовщина: именно из этого следует, что после обвязки платформа обновляется штатно. Правка ядра — главная причина, по которой Битрикс-сайты со временем перестают обновлять, и мы её не создаём.
Адреса страниц не меняются. ЧПУ, правила подстановки адресов, карта сайта и разметка остаются как были. Приложение открывает те же страницы по тем же ссылкам, и сайт продолжает быть сайтом: индексируется, открывается на десктопе, принимает переходы из поиска и рекламы. Приложение не становится отдельным продуктом, живущим параллельно, — это тот же сайт, запущенный с иконки.
Ставится на копии, потом на прод, и снимается обратно за час. Сначала обвязка собирается на копии сайта, там же проверяются кэширование и поведение при обрыве связи. На прод уезжает проверенный набор файлов. Если обвязка окажется не нужна — она снимается, посредник отключается, и сайт продолжает работать как обычный. Необратимых изменений в проекте не остаётся.
Если ядро правили до нас, обвязка это не чинит. Такие правки мы находим на разборе, выносим в /local/ отдельной работой и называем её часы до счёта — а не растворяем внутри обвязки. Спрятать их было бы удобнее для продажи и хуже для вас: вы бы не увидели, за что платите и почему после этого коробка снова обновляется.
Что входит в обвязку коробки
Шесть работ, и все шесть привязаны к платформе. Общий состав работ по направлению — что такое обвязка вообще и что получает бизнес — разобран на странице направления, здесь только специфика Битрикса.
Манифест, набор иконок под Android и iPhone, экран запуска с вашим логотипом вместо белой вспышки. Иконки передаём исходниками, а не готовыми картинками: перерисовать их потом сможет любой дизайнер.
/local/, ядро не тронуто
Код обвязки лежит там же, где положено лежать вашим доработкам, и подключается из шаблона. Каталог /bitrix/ остаётся вендорским — это проверяемое условие, а не обещание на словах.
Решаем и записываем, что отдаёт композитный режим платформы, а что берёт из памяти телефона посредник. Без этого человек получает страницу, устаревшую дважды, — разбор этого сюжета отдельным блоком ниже.
На Android браузер предлагает установку кнопкой, на iPhone её надо делать через меню «Поделиться». Подсказку рисуем сами и показываем после первого полезного действия, а не при входе.
Свежий Android, старый Android, iPhone. Установка, запуск, обрыв связи, обновление до новой версии. На старых телефонах ограничения по памяти настоящие, и в эмуляторе они не воспроизводятся.
Что где лежит, как выкатывать обновление, как отключить обвязку целиком. Пишется для человека, который придёт после нас, — в том числе если это будет не он, а другой подрядчик.
Два кеша, которые надо помирить
Единственный сюжет, который на Битриксе выглядит иначе, чем на любой другой платформе. Разобрать его стоит за минуту до начала работ, а не после первой жалобы на неправильную цену.
Композитный режим Битрикса и посредник приложения делают одно и то же разными способами. Композитный отдаёт посетителю заранее собранную страницу с сервера, чтобы она появилась мгновенно, а динамические части подгружает следом. Посредник приложения хранит страницу в памяти телефона и показывает её оттуда, пока идёт запрос к серверу. Каждый из них по отдельности полезен и ускоряет сайт.
Проблема начинается, когда их не развели. Посредник сохраняет в телефоне ту страницу, которую ему отдал композитный режим, — то есть уже не самую свежую. Дальше он показывает её из памяти, и пользователь получает данные, устаревшие дважды: один раз на сервере, второй раз в телефоне. Хуже всего, что заметить это со своего ноутбука невозможно: там всё открывается правильно.
Пример. Карточка товара, цену которой поменяли утром. Композитный режим отдаёт вчерашнюю версию, пока не сбросится кеш; посредник кладёт её в телефон и показывает при следующем открытии, даже когда сеть уже есть. Покупатель видит старую цену и приходит с ней к вам — и формально он прав, он видел её только что.
Решение простое, но принимается до работ, а не после. Оформление, шрифты, иконки и структура страниц отдаются из памяти телефона: они меняются редко. Цены, остатки, расписание и всё, что приходит из обмена, всегда запрашиваются с сервера, а из памяти показываются только при отсутствии сети — и тогда рядом стоит явная пометка. Этот список согласуется письменно и лежит в документации проекта, а не в голове разработчика.
Обвязка, шаблон или переезд
Три пути, между которыми обычно и выбирают, когда сайт на Битриксе перестал устраивать. Их часто путают и подменяют друг другом — в том числе подрядчики, которым выгоден третий.
| Что сравниваем | Обвязка PWA | Переделка шаблона | Переезд на другую CMS |
|---|---|---|---|
| Что меняется | Как сайт открывают: иконка, запуск без браузера, работа при плохой связи | Как сайт выглядит и с какой скоростью грузится | Всё: платформа, шаблон, админка, привычки редакторов |
| Каталог и обмен с 1С | Не трогаются вовсе | Остаются, меняется только вывод | Переносятся и настраиваются заново |
| Адреса и позиции в поиске | Не меняются | Не меняются, если не трогать структуру | Зона риска: нужны редиректы и наблюдение месяцами |
| Лицензия платформы | Та же, новая не нужна | Та же | Перестаёт использоваться — деньги, уже заплаченные вендору |
| Ваше участие | Доступы и полчаса на приёмку | Согласование дизайна и содержания | Проект: контент, обучение, приёмка всего сайта |
| Когда выбирать | Сайт устраивает, но к вам возвращаются через поиск и вкладки | Сайт медленный или неудобен с телефона | Платформа мешает задаче, а не подрядчику |
Обвязка не ускоряет сайт, а упаковывает его. Если сайт медленный или неудобен с телефона, порядок обратный: сначала шаблон, потом иконка. Приложение из неудобного сайта делает неудобное приложение, и претензий становится больше — от иконки на домашнем экране люди ждут большего, чем от вкладки в браузере.
Отдельно про третий столбец: «Битрикс тормозит, давайте переедем» — чаще следствие правок ядра, отключённого кеширования и десятка платных модулей, чем свойство платформы. Это чинится архитектурой, и переезд тут решает не вашу задачу. Если платформа действительно мешает — скажем прямо и посчитаем разработку сайта
Шесть проверок вашей коробки за десять минут
Каждую можно пройти самому: открыть сайт с телефона, заглянуть в файлы, задать один вопрос разработчику. Вердикт считается от непройденного — шесть совпадений не повод хвалить коробку, зато любое несовпадение показывает, что придётся делать до обвязки. Ничего никуда не отправляется.
Вердикт появится, как только отметите первый пункт. Считается он от числа несовпадений: шесть проверок из многих — не полный разбор, зато любое несовпадение называет работу, которая пойдёт до обвязки и отдельной строкой.
Сходится 0 из 6
Разобрать коробкуПочему проверка ручная, а не автоматическая: заглянуть снаружи в чужой Битрикс и узнать, правили ли там ядро, нельзя — это видно только изнутри, по файлам и по ответам сервера. Поэтому шесть пунктов написаны так, чтобы каждый проходился самостоятельно, а не чтобы обменять ваш адрес на «результат проверки».
Разбор коробки до сметы
Чек-лист выше проходится по шести признакам, разбор — по самому сайту. Полчаса, бесплатно, ведёт основатель. Разговаривать можем сразу с вашим разработчиком: так быстрее и точнее.
Что смотрим на разбореКуда именно ляжет обвязка в вашей структуре и чем подключать её в шаблоне. Правили ли ядро и сколько работы вынести в /local/. Что тормозит шаблон на реальном телефоне и нужно ли чинить его до иконки.
Разбор — это разговор, а не документ: письменный отчёт с находками и приоритетом правок называется аудитом, это отдельная платная работа. И честный исход, о котором договариваемся заранее: если на разборе выяснится, что коробке нужна не обвязка, а шаблон или порядок в доработках, мы скажем это прямо и назовём порядок работ.
От чего зависит цена на Битриксе
Своей сметы у этого формата нет: цена берётся из смет направления. Сама платформа стоимость обвязки не повышает — повышает её состояние конкретной коробки. Четыре фактора, по которым это и расходится.
-
Состояние шаблона
Главный фактор, и он не про Битрикс, а про то, как сайт выглядит на телефоне. Над современным адаптивным шаблоном обвязка ставится за базовые часы. Если шаблон рисовался под десктоп и на телефоне требует увеличения пальцами, сначала идёт работа с ним — иначе приложение просто упакует неудобство и сделает его заметнее.
-
Были ли правки ядра и сколько их выносить
Коробка, которой несколько лет и у которой сменилось два подрядчика, почти всегда содержит что-то, внесённое напрямую в
/bitrix/. Само по себе это обвязке не мешает, но мешает тому, ради чего она делается аккуратно: обновлениям. Ревизия и вынос правок в/local/— отдельная работа с отдельными часами, и её объём виден только на разборе. -
Что должно работать без сети
Показывать уже открытые страницы — базовый кэш, он входит в первую сборку. Держать под рукой каталог, разводить его с композитным режимом и досылать сделанное при возврате связи — другая работа: нужно решать, что делать при расхождении данных, и проверять это на живых обрывах связи, а не на выключенном Wi-Fi в офисе.
-
Нужен ли вход и личный кабинет внутри приложения
Если авторизация на сайте уже есть и работает, приложение её наследует — это настройка. Если входа нет, а своё содержимое у каждого показывать надо, появляется отдельная работа: вход, сессии, история и документы. Это тот случай, когда проект уезжает с первой ступени сметы на вторую или третью.
Обвязка коробки в приличном состоянии — это от 40 000 ₽ и 2–3 недели, то есть первая сборка направления. Всё, что двигает цену вверх, — подготовка самой коробки, и она называется отдельной строкой до счёта, а не растворяется внутри обвязки. Состав всех трёх сборок открыт на странице направления: Три сборки PWA
Три возражения, которые говорит ваш разработчик
Не клиент, а именно разработчик — и это правильно: он отвечает за сайт и первым узнает, если после нас что-то перестанет обновляться. Отвечаем здесь, чтобы он мог проверить нас до созвона.
Отчасти справедливо, но причина обычно не в платформе: медленно работают коробки с правленым ядром, отключённым кешированием и десятком платных модулей, половина которых не используется. Обвязка это не лечит и не притворяется, что лечит. Если сайт медленный, порядок такой: сначала скорость и шаблон, потом иконка — и на разборе мы скажем именно это.
Переезд решает задачу подрядчика чаще, чем вашу: он обнуляет чужой код и начинает проект с чистого листа. Платформу стоит менять, когда она мешает самой задаче — например, нужного вам не получается сделать в принципе. Если вопрос только в том, чтобы сайт открывался с иконки и работал при плохой связи, переезжать незачем: это делается поверх той коробки, что есть.
Редакция сама по себе обвязке не мешает: служебные файлы лежат в корне, код — в /local/, и платформа про них ничего знать не обязана. Мешает другое — отсутствие адаптива и защищённого соединения. Оба препятствия чинятся до обвязки, часы называются отдельно, и оба нужны вам в любом случае: это требования не приложения, а сегодняшних браузеров.
Эта страница — часть направления PWA
Здесь разобрана только платформа: куда ложатся файлы, что с обновлениями и как развести два кеша. Всё остальное — что такое PWA, чего оно не умеет, тест пригодности сайта и три сборки с составом и сроками — живёт на странице направления и намеренно не пересказано здесь.
Что идёт рядом
Четыре соседние страницы, и первая из них — для тех, кто пришёл сюда по ошибке, перепутав два продукта вендора. У каждой метка, зачем она здесь.
Если коробка ещё и продвигается в поиске, обвязка этому не мешает: адреса не меняются, страницы остаются прежними. Продвижением сайта на коробке мы тоже занимаемся, и обвязка с ним не конфликтует: SEO-продвижение
Когда обвязка вашей коробке не нужна
Четыре ситуации, в которых мы отговариваем. Обвязка на Битриксе — простая продажа: работа понятная, ядро не трогается, разработчик возражать не станет. Именно поэтому её легко продать тому, кому она ничего не даст.
-
Если сайт всё равно переделывается целиком
Ставить обвязку в сайт, который через три месяца выключат, — потраченные дважды деньги: в новом сайте её придётся делать заново, поверх другого шаблона и другой структуры. Правильный порядок обратный: обвязка закладывается в новый сайт на этапе шаблона, и тогда она обходится дешевле, чем отдельной работой.
-
Если ядро правили, а чинить это вы не готовы
Формально обвязка встанет и на такую коробку: файлы в корне, код в
/local/. Но смысл аккуратной установки в том, что платформа продолжает обновляться, — а на правленом ядре она не обновляется независимо от нас. Получится приложение поверх сайта, который нельзя обновить, и это не то, за что стоит платить. -
Если доступа к файлам нет и получить его неоткуда
Через админку служебные файлы в корень не положить. Бывает, что доступ ушёл вместе с прошлым подрядчиком и восстановить его не получается. Тогда первая задача — вернуть себе контроль над собственным сайтом, и она нужна вам в любом случае: без неё вы не сможете ни обновить его, ни перенести, ни отдать другому исполнителю.
-
Если к вам не возвращаются
Платформа тут ни при чём: приложение живёт повторными заходами. Если у вас покупают один раз — окна, натяжные потолки, переезд, — иконка на домашнем экране не понадобится никому, сколько бы аккуратно она ни была сделана. Те же деньги в скорость сайта и в рекламу дадут больше, и на разборе мы предложим именно это.
Есть отдельная страница о том, когда наши услуги не нужныОна написана не для красоты: разбор довольно часто заканчивается словами «вам это пока не нужно, сделайте вот это сами» — и мы показываем как.
Когда вам это не нужноPWA на 1С-Битрикс: что стоит знать до заказа
Можно ли сделать PWA на сайте 1С-Битрикс
Да, и менять платформу для этого не нужно. Приложение на домашнем экране получается из любого сайта, который отдаётся по защищённому соединению и позволяет положить в корень два служебных файла. Битрикс это позволяет: у него есть штатное место для доработок — каталог /local/, — и весь код обвязки живёт там, рядом с остальными вашими изменениями.
Само приложение при этом остаётся вашим сайтом. Те же адреса страниц, та же админка, тот же каталог и тот же обмен с учётной системой. Меняется только то, как сайт открывают: с иконки, во весь экран, без адресной строки, — и что человек видит, когда связь пропала. Отдельного продукта, который надо содержать параллельно, не появляется.
Единственное, что действительно обязательно, — защищённое соединение и вменяемый вид на телефоне. Первое требуют браузеры: без него приложение не установится вовсе. Второе требует здравый смысл: обвязка упаковывает сайт, а не переделывает его, и неудобный сайт в приложении становится неудобным приложением.
Куда ложится обвязка и что будет с обновлениями ядра
В корень сайта кладутся два файла: описание приложения и фоновый посредник. Остальной код — в /local/, подключение — через шаблон сайта. Каталог /bitrix/ при этом не изменяется ни одним файлом, и именно из этого следует главное: штатные обновления платформы после обвязки накатываются так же, как накатывались до неё.
Обратная ситуация встречается чаще, чем хотелось бы: на коробке, где предыдущие подрядчики правили ядро, платформа не обновляется и без всякого приложения. Обвязка это не лечит. Мы находим такие правки на разборе, выносим их в /local/ отдельной работой и называем её часы до счёта — а не прячем внутрь обвязки, чтобы смета выглядела ровнее.
Обвязку можно снять обратно. Посредник отключается, служебные файлы удаляются, сайт продолжает работать как обычный сайт на Битриксе. Необратимых изменений в проекте не остаётся, и это одна из причин, по которым такая работа стоит недорого: мы не трогаем то, что уже работает.
Композитный кеш и кеш приложения
На Битриксе есть один сюжет, которого нет на других платформах, — два кеша, решающих одну задачу. Композитный режим отдаёт посетителю заранее собранную страницу с сервера. Посредник приложения хранит страницу в памяти телефона. По отдельности оба ускоряют сайт; вместе, если их не развести, они складываются: посредник сохраняет уже не самую свежую страницу и показывает её ещё какое-то время.
Практическое следствие видно на карточке товара: цена поменялась утром, а покупатель вечером видит вчерашнюю — и он не ошибается, он действительно её видел. Поэтому решение о том, что берётся из памяти телефона, а что всегда запрашивается с сервера, принимается до первой строки кода и записывается в документацию проекта.
Правило, которое мы применяем: оформление, шрифты, иконки и структура — из памяти телефона, они меняются редко. Цены, остатки, расписание и всё, что приезжает обменом, — всегда с сервера, а из памяти показываются только при отсутствии сети и с явной пометкой. Обратный порядок — самая частая ошибка в чужих обвязках, и она обходится дороже всего именно магазинам.
Вопросы про обвязку на Битриксе
Шесть вопросов, которые задают владельцы сайтов на коробке и их разработчики. Общие вопросы про PWA — чем оно отличается от закладки, работает ли на iPhone, кому принадлежит приложение — собраны на странице направления: ответы должны жить в одном месте, иначе со временем разойдутся.
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутНет, если делать её правильно, и именно поэтому весь код живёт в /local/, а подключение идёт через шаблон. Каталог /bitrix/ остаётся таким же, каким пришёл от вендора, — а значит, штатные обновления накатываются, как и раньше. Если платформа не обновлялась и до нас, причина в правках ядра, сделанных раньше: мы находим их на разборе и выносим отдельной работой. Как это устроено — разобрано выше
Нет. Приложение на домашнем экране — это возможность браузера, а не функция платформы: ему достаточно двух служебных файлов и защищённого соединения. Покупать что-либо дополнительно у вендора не нужно, ваша текущая лицензия остаётся той же и продолжает использоваться так же, как раньше.
Нет. ЧПУ, правила подстановки адресов, карта сайта и разметка остаются как были — обвязка их не касается. Сайт продолжает открываться по тем же ссылкам, индексироваться и принимать переходы из поиска и рекламы. Приложение не становится вторым, параллельным продуктом: это тот же сайт, только запущенный с иконки.
Поставить готовый модуль обычно можно, и иконка после него появится. Вопрос в том, что будет дальше: настройки кэширования по умолчанию не знают ничего о вашем каталоге и вашем обмене, поэтому в память телефона легко попадает то, чему там не место, — цена и остаток. Мы это решение не продаём и не отговариваем от него: если модуль уже стоит, приходите на разбор, посмотрим, что он кэширует, и скажем, нужно ли что-то менять.
Нет, это разные продукты вендора. Битрикс24 — корпоративный портал и CRM для ваших сотрудников, у него есть собственное мобильное приложение от разработчика платформы. 1С-Битрикс — платформа, на которой сделан ваш сайт для клиентов, и обвязка ставится поверх неё. Если ваша задача про воронку, права и отчёты — вам на внедрение Битрикс24, и мы этим тоже занимаемся.
Своей цены у этого формата нет, она берётся из смет направления: обвязка коробки в приличном состоянии — от 40 000 ₽ и 2–3 недели. Платформа стоимость не повышает, повышает её состояние конкретной коробки: шаблон без адаптива, правки ядра, отсутствие доступа к файлам. Всё это считается отдельной строкой и называется до счёта — четыре фактора разобраны выше
Пришлите адрес сайта — скажем, куда ляжет обвязка и во что обойдётся
- Разбор 30 минут: смотрим структуру и говорим, готова ли коробка
- Если ядро правили — называем объём ревизии отдельной строкой, до счёта
- Говорить можем сразу с вашим разработчиком: так быстрее и точнее
Заявка принята
Посмотрим сайт и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут