Покупатель заходит в ваш магазин с телефона в метро — связь то есть, то пропадает. Обычный сайт в этот момент показывает белый экран и «нет соединения». А магазин с PWA продолжает работать: страницы, которые покупатель уже открывал, доступны из кэша, каталог листается, вместо ошибки браузера — аккуратная заглушка. Плюс значок магазина уже на его домашнем экране, как у настоящего приложения.
Разберём PWA для интернет-магазина без хайпа: что это на самом деле, что работает офлайн, а что нет, когда PWA выгоднее нативного приложения и как аккуратно внедрить её на 1С-Битрикс, не показав покупателю устаревшие цены из кэша. Технически это надстройка над фронтендом, и делается она в рамках нашей оптимизации 1С.
Коротко
- PWA — это сайт, который устанавливается на телефон, запускается полноэкранно и частично работает офлайн, без App Store.
- Основа PWA — HTTPS, манифест и service worker; последний перехватывает запросы и обеспечивает офлайн.
- Офлайн в магазине — про просмотр кэшированных страниц, а не про покупки без сети: цены и заказ требуют сервера.
- Главный риск на 1С-Битрикс — закэшировать устаревшие цены и наличие; кэш PWA согласуют с кэшем Битрикса.
Что такое PWA и зачем магазину
PWA (Progressive Web App) — это обычный сайт с надстройкой, которая делает его похожим на мобильное приложение. Он остаётся на вашем домене и индексируется как сайт, но при этом умеет то, что раньше было только у приложений.
- Установка на экран. Значок магазина добавляется на рабочий стол телефона в один тап.
- Полноэкранный режим. Запуск без адресной строки браузера — как настоящее приложение.
- Работа при плохой связи. Кэшированные страницы доступны офлайн, вместо ошибки — заглушка.
- Пуш-уведомления. Возможность вернуть покупателя сообщением о скидке или статусе заказа.
Для магазина ценность PWA в двух вещах: скорость повторных заходов за счёт кэша и снижение барьера возврата за счёт значка на экране. Это дешёвый способ приблизить мобильный сайт к удобству приложения без отдельной разработки под iOS и Android.
PWA против нативного приложения
Главный вопрос бизнеса — «нам PWA или полноценное приложение». Ответ зависит от задач, и честное сравнение помогает не переплатить.
| Критерий | PWA | Нативное приложение |
|---|---|---|
| Кодовая база | Одна, поверх сайта | Отдельно под iOS и Android |
| Установка | В один тап, без магазинов | Через App Store / Google Play |
| Обновления | Мгновенно, как сайт | Через магазин, с модерацией |
| Доступ к железу | Ограниченный | Полный |
| Стоимость | Ниже | Выше |
| iOS-возможности | С ограничениями | Полные |
Для магазина, где главное — каталог, корзина и оформление заказа, PWA часто закрывает задачу дешевле и быстрее. Нативное приложение оправдано, когда нужен глубокий доступ к возможностям телефона, сложная офлайн-логика или присутствие в магазинах приложений как канал. Начать разумно с PWA и перейти к нативу, только если он реально понадобится.
Три кита PWA: манифест, worker, HTTPS
Технически PWA стоит на трёх обязательных элементах — без любого из них она не работает.
- HTTPS. Весь сайт по защищённому протоколу — обязательное условие, service worker без него не запустится.
- Web App Manifest. JSON-файл с описанием приложения: имя, иконки, цвета, стартовый URL, режим отображения. Он говорит системе, как показывать установленный магазин.
- Service Worker. Фоновый скрипт, перехватывающий сетевые запросы. Именно он обеспечивает офлайн, кэширование и пуши.
Манифест и иконки — простая часть. Service worker — самая тонкая: от того, как он написан, зависит и офлайн, и риск показать покупателю устаревшие данные. Поэтому его пишут аккуратно и осознанно, с продуманной стратегией кэширования.
Установка на телефон без магазинов
Одна из главных фишек PWA — установка на домашний экран без App Store и Google Play. Покупатель заходит на сайт, и браузер предлагает «Добавить на главный экран» либо это делается вручную из меню браузера.
После установки магазин ведёт себя как приложение: значок на экране, полноэкранный запуск, своя заставка. Это снижает барьер повторного визита — не надо вспоминать адрес и открывать браузер, достаточно тапнуть по значку. Для магазина с высокой долей возвратных покупателей это ощутимое удобство. Важно грамотно предложить установку: не навязчивым баннером на первой секунде, а в подходящий момент — например, после первого заказа или нескольких визитов.
Что реально работает в офлайне
Вокруг офлайна много завышенных ожиданий, поэтому разберём честно. Магазин по своей природе завязан на сервер: актуальная цена, наличие, оформление заказа требуют сети. Поэтому офлайн в PWA-магазине — это не «покупки без интернета», а устойчивость к плохой связи.
- Работает: просмотр уже посещённых страниц и карточек из кэша, листание кэшированного каталога, статика (иконки, стили), аккуратная заглушка вместо ошибки браузера.
- Не работает: актуальные цена и наличие без сети, оформление и оплата заказа, поиск по всему каталогу, любые данные, которых не было в кэше.
Стратегии кэширования
Сердце PWA — стратегия кэширования в service worker. Для магазина разные типы ресурсов требуют разного подхода, и смешивать их нельзя.
- Статика — из кэша. Иконки, шрифты, стили, скрипты редко меняются: отдаём из кэша, обновляем в фоне (cache-first).
- Цены и наличие — из сети. Динамические данные всегда берём с сервера, кэш — только запасной путь (network-first).
- Карточки товара — гибрид. Показываем из кэша мгновенно, параллельно обновляем актуальными данными.
- Корзина и заказ — только сеть. Никогда не кэшируем персональные и транзакционные данные.
Ошибка в стратегии — самая частая беда PWA-магазинов: закэшировать то, что должно быть свежим. Про то, как устроено кэширование на стороне сервера в 1С-Битрикс и как не конфликтовать с ним, полезно почитать материал про D7 ORM в 1С-Битрикс.
Пуш-уведомления и возврат покупателя
Пуш-уведомления — сильная сторона PWA как канала возврата. Они позволяют напомнить о брошенной корзине, сообщить о скидке на отложенный товар или статусе заказа прямо на экран телефона, без email.
Технически пуши принимает тот же service worker. Но здесь важна мера: агрессивные и частые уведомления быстро приводят к отписке и удалению приложения. Пуши работают, когда они по делу — статус заказа, действительно релевантная скидка, возврат дефицитного товара. Учитывайте и то, что на iOS возможности пушей скромнее, поэтому не стройте на них единственный канал коммуникации. Логику триггерных уведомлений удобно связать с автоматизацией на стороне сервера — это часть нашей автоматизации на 1С.
Особенности на iOS
iOS исторически поддерживает PWA скромнее, чем Android, и это надо закладывать в проект заранее, а не обнаруживать после запуска.
- Установка работает. Добавление на домашний экран и полноэкранный запуск доступны.
- Офлайн-просмотр работает. Кэширование и заглушки действуют.
- Пуши ограничены. Появились позже и работают менее гибко, чем на Android.
- Кэш могут очистить. Система освобождает место, очищая кэш редко используемых PWA.
Практический вывод: проектируйте PWA так, чтобы ключевые сценарии не зависели только от пушей и не ломались при очистке кэша. Тестируйте отдельно на iPhone — поведение там заметно отличается от Android.
PWA на 1С-Битрикс: как подружить с кэшем
PWA — это надстройка над фронтендом, поэтому сама платформа почти не мешает. Манифест, иконки и service worker добавляются в шаблон сайта на 1С-Битрикс. Настоящая тонкость — согласовать два уровня кэширования.
У 1С-Битрикс свой кэш: кэш компонентов и композитный сайт, который отдаёт статическую версию страницы мгновенно, а динамику (корзину, персональную цену) догружает отдельно. Поверх этого ложится кэш service worker в браузере. Если их не согласовать, слои начнут конфликтовать — покупатель увидит устаревшую страницу из браузерного кэша поверх свежей серверной.
Правильный подход — чётко разделить, что кэширует композит на сервере, а что service worker в браузере, и никогда не давать браузерному кэшу перекрывать динамические блоки. Про архитектуру композитного сайта и разметку динамики полезно прочитать в статье про хостинг и BitrixVM.
Опасность устаревших цен из кэша
Стоит выделить отдельно, потому что это самый болезненный риск PWA-магазина. Если service worker закэширует карточку товара вместе с ценой и наличием и будет отдавать её из кэша, покупатель увидит старую цену. Он положит товар в корзину по одной цене, а на сервере она окажется другой — конфликт, недовольство и потенциально жалоба.
Именно поэтому service worker для магазина пишут осознанно, а не берут «универсальный шаблон из интернета». Разделение статики и динамики в стратегии кэширования — не деталь, а основа корректной работы PWA-магазина.
Внедрение пошагово
Сборка PWA для магазина на 1С-Битрикс идёт по понятной последовательности. Важное условие — под ней уже должен быть качественный адаптивный сайт.
- Убедитесь в адаптиве. Мобильная версия удобна сама по себе — PWA не спасёт кривую вёрстку.
- Переведите сайт на HTTPS. Полностью, без смешанного контента — обязательное условие.
- Соберите манифест. Имя, иконки под разные размеры, цвета, стартовый URL, режим отображения.
- Напишите service worker. С раздельными стратегиями: статика из кэша, цены и заказ из сети.
- Сделайте офлайн-заглушку. Аккуратная страница вместо ошибки браузера при отсутствии связи.
- Согласуйте с кэшем Битрикса. Разделите ответственность браузерного кэша и композита, защитите динамику.
- Настройте установку и пуши. Ненавязчивое приглашение установить, уведомления по делу.
- Протестируйте на устройствах. Отдельно Android и iPhone, проверьте офлайн и актуальность цен.
Частые ошибки
- Кэшируют цены и наличие. Покупатель видит устаревшую цену из офлайн-кэша — главный риск PWA-магазина.
- PWA поверх кривого адаптива. Оболочка приложения не чинит неудобный мобильный сайт.
- Конфликт с композитом. Браузерный кэш перекрывает динамику Битрикса — показ устаревших страниц.
- Агрессивные пуши. Частые уведомления ведут к отпискам и удалению.
- Навязчивое приглашение установить. Баннер на первой секунде раздражает и снижает конверсию.
- Не тестируют iOS. Ограничения iPhone обнаруживают после запуска, а не до.
- Универсальный service worker. Взяли чужой шаблон без разделения статики и динамики.
Чек-лист внедрения
- Адаптив готов. Мобильная версия удобна до всякой PWA.
- HTTPS везде. Весь сайт по защищённому протоколу, без смешанного контента.
- Манифест собран. Иконки, имя, цвета, режим отображения заданы.
- Стратегии кэша разделены. Статика из кэша, цены и заказ — из сети.
- Офлайн-заглушка есть. Вместо ошибки браузера — понятная страница.
- Кэш согласован с Битрикс. Композит и браузерный кэш не конфликтуют, динамика защищена.
- Цены не устаревают. Актуальные данные никогда не отдаются из офлайн-кэша.
- Проверено на iOS и Android. Установка, офлайн и пуши протестированы на реальных устройствах.
Вывод
PWA — недорогой способ приблизить мобильный магазин на 1С-Битрикс к удобству приложения: установка на экран в один тап, полноэкранный режим, устойчивость к плохой связи и канал возврата через пуши. При этом остаётся одна кодовая база, мгновенные обновления и никакого App Store. Для большинства магазинов это выгоднее нативной разработки.
Ключ к успеху — трезвые ожидания и аккуратный service worker. Офлайн в магазине про непрерывность просмотра, а не про покупки без сети. А главный риск — закэшировать устаревшие цены — снимается чётким разделением статики и динамики и согласованием с кэшем Битрикса. Постройте PWA поверх качественного адаптива, разделите кэш правильно, протестируйте на iPhone и Android — и получите быстрый, удобный магазин-приложение без переплаты за нативную разработку.
