Разработка PWA-приложения на 1С-Битрикс: кэширование, push, офлайн

Разработка PWA-приложения на базе 1С-Битрикс — это способ превратить сайт в прогрессивное веб-приложение с offline-доступом и push-уведомлениями. Стандартный модуль pwa в Битриксе генерирует базовый manifest.json и Service Worker, но не умеет версионировать кеш и не обрабатывает сложные сценарии: каталоги с тысячами товаров, авторизованных пользователей, интеграцию с composite. Мы дорабатываем Service Worker, настраиваем стратегии кеширования и обеспечиваем зелёный Lighthouse. Результат — экономия бюджета на нативной разработке и рост конверсии.

Какие проблемы решает PWA на Битриксе?

Штатный модуль pwa в Битриксе генерирует /manifest.json и регистрирует /sw.js, но не управляет версионированием кеша и не обрабатывает сложные сценарии офлайн-работы каталога. Для интернет-магазина с десятками тысяч товаров стандартный Cache First не подходит — нужны кастомные стратегии: Stale While Revalidate для API, Network First с fallback для HTML. Мы решаем эти задачи, адаптируя Service Worker под конкретный шаблон и бизнес-логику.

Другая проблема — взаимодействие с модулем composite. Композитный HTML кешируется Service Worker, и при обновлении контента (цены, остатки) пользователи видят устаревшие данные. Версионирование кеша через CACHE_VERSION устраняет это, а также правильное исключение динамических URL.

Как мы внедряем PWA на Битрикс?

Аудит текущего сайта

Оцениваем влияние composite, проверяем поддержку iOS, считаем Lighthouse-баллы. Выявляем узкие места: неверные start_url, отсутствие иконки 512×512, несовместимость стратегий кеширования. Подробнее о PWA можно узнать в Wikipedia.

Настройка Service Worker

Кастомную логику пишем в /local/templates/main/sw-custom.js и подключаем через importScripts(). Не модифицируем /sw.js напрямую — он перегенерируется модулем. Используем три стратегии:

• Cache First для статики (/bitrix/js/, /bitrix/css/, /upload/)
• Network First для HTML, исключая URL с sessid и AJAX-запросы к bitrix/services/main/ajax.php
• Stale While Revalidate для API-ответов каталога — отдаём из кеша, параллельно обновляя

Версионирование кеша

В manifest.json добавляем кастомное поле sw_version. При деплое инкрементируем, а Service Worker при активации очищает старые кеши:

const CACHE_VERSION = 'v1.4'; self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_VERSION).map(k => caches.delete(k))) ) ); }); 

Почему версионирование кеша критично для PWA?

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

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

PWA разрабатывается в 3-5 раз быстрее нативного приложения и занимает в 10 раз меньше места. Для каталога, корпоративного сайта, новостного портала достаточно PWA. Для приложения с Bluetooth, NFC нужен нативный клиент.

Этапы и сроки внедрения

Этапы работ:

1. Аудит (2–3 дня) — проверка шаблона, влияния composite, Lighthouse.
2. Настройка модуля и Service Worker (3–5 дней) — manifest.json, стратегии кеширования, offline-страница, push-подписка.
3. Тестирование (2–3 дня) — Android (Chrome, Samsung Internet), iOS (Safari), десктоп; Lighthouse на каждом этапе.
4. Запуск и мониторинг (1–2 дня) — деплой, проверка метрик, алерты на ошибки Service Worker.

Сроки ориентировочно:

Стоимость рассчитывается индивидуально — свяжитесь с нами для консультации и оценки экономии.

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

• Аудит и рекомендации
• Настройка manifest.json и кастомного Service Worker
• Реализация push-уведомлений через модуль pull
• Создание offline-страницы
• Документация и обучение администраторов
• Гарантийная поддержка 30 дней

Типичные ошибки при внедрении PWA

• iOS Safari не поддерживает Background Sync, Badge API, полноценные push без Home Screen.
• Обновление Service Worker — даже с skipWaiting() новая версия применяется только при следующем открытии страницы.
• Размер кеша ограничен: Chrome выделяет до 80% свободного места, Safari — 50MB на origin. Кешировать весь каталог на 10 000 товаров не получится — только критические ресурсы.
• Модуль composite с CDN может генерировать HTML с абсолютными URL CDN-домена — Service Worker не перехватит запросы к другому origin. Проверяем scope в register().

Получите консультацию — мы поможем определить оптимальный маршрут внедрения PWA на вашем проекте. Закажите аудит и оценку стоимости уже сегодня.