Розробка 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 на вашому проекті. Замовте аудит та оцінку вартості вже сьогодні.