Реализация PWA (Progressive Web App) для сайта

Разработка Progressive Web App (PWA)

Сайт теряет до 40% трафика, если пользователь уходит из-за медленной загрузки? Или каждый второй посетитель не возвращается после первого визита? Мы помогаем внедрить PWA под ключ — это решение, которое сочетает скорость веба и возможности нативных приложений. PWA устанавливается на домашний экран, работает офлайн и может отправлять push-уведомления. За 2–4 дня вы получаете приложение, которое грузится в 2 раза быстрее на медленных соединениях. По данным Google, PWA увеличивают конверсию на 36% и снижают отказы на 15%. Средняя стоимость привлечения клиента (CAC) при этом существенно снижается, что экономит бюджет на рекламу.

Как PWA решает проблему офлайн-доступа?

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

Web App Manifest — основа устанавливаемости

Для появления кнопки «Добавить на главный экран» требуется корректный манифест. Мы настраиваем все поля: name, short_name, icons в 8 размерах (включая maskable), screenshots для Android, shortcuts для быстрых действий. Пример манифеста:

{ "name": "ТехноМагазин — купить электронику", "short_name": "ТехноМагазин", "description": "Смартфоны, ноутбуки, аксессуары с доставкой", "start_url": "/?source=pwa", "scope": "/", "display": "standalone", "orientation": "portrait-primary", "theme_color": "#1a73e8", "background_color": "#ffffff", "lang": "ru", "dir": "ltr", "icons": [ { "src": "/icons/icon-72.png", "sizes": "72x72", "type": "image/png" }, { "src": "/icons/icon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "/icons/icon-128.png", "sizes": "128x128", "type": "image/png" }, { "src": "/icons/icon-144.png", "sizes": "144x144", "type": "image/png" }, { "src": "/icons/icon-152.png", "sizes": "152x152", "type": "image/png" }, { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-384.png", "sizes": "384x384", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "screenshots": [ { "src": "/screenshots/mobile-catalog.webp", "sizes": "390x844", "type": "image/webp", "form_factor": "narrow", "label": "Каталог товаров" } ], "shortcuts": [ { "name": "Корзина", "url": "/cart", "icons": [{ "src": "/icons/cart-96.png", "sizes": "96x96" }] }, { "name": "Избранное", "url": "/wishlist", "icons": [{ "src": "/icons/heart-96.png", "sizes": "96x96" }] } ], "share_target": { "action": "/share", "method": "POST", "enctype": "multipart/form-data", "params": { "title": "title", "text": "text", "url": "url" } } } 

<link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#1a73e8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="ТехноМагазин"> <link rel="apple-touch-icon" href="/icons/icon-192.png"> 

Дополнительно: рекомендуем прочитать документацию Web App Manifest для глубокого понимания.

Почему Service Worker — основа PWA?

Service Worker — это прокси между браузером и сетью. Он перехватывает запросы и решает, отдавать ли кэш, слать запрос или показывать офлайн-страницу. Без него PWA не существует. Мы реализуем стратегию «Cache First для статики, Network First для HTML, Stale While Revalidate для медиа». Пример базового Service Worker:

// sw.js — базовая стратегия для PWA const CACHE_VERSION = 'v3'; const APP_SHELL = [ '/', '/manifest.json', '/offline.html', '/css/app.css', '/js/app.js', '/fonts/inter-regular.woff2', '/icons/icon-192.png', ]; // Установка: кешируем App Shell self.addEventListener('install', event => { event.waitUntil( caches.open(`shell-${CACHE_VERSION}`) .then(cache => cache.addAll(APP_SHELL)) .then(() => self.skipWaiting()) ); }); // Активация: удаляем старые кеши self.addEventListener('activate', event => { event.waitUntil( caches.keys() .then(keys => Promise.all( keys.filter(k => !k.endsWith(CACHE_VERSION)) .map(k => caches.delete(k)) )) .then(() => self.clients.claim()) ); }); // Fetch: разные стратегии для разных ресурсов self.addEventListener('fetch', event => { const { request } = event; const url = new URL(request.url); // App Shell — cache first if (APP_SHELL.includes(url.pathname)) { event.respondWith( caches.match(request).then(r => r || fetch(request)) ); return; } // HTML-страницы — network first, fallback offline if (request.headers.get('Accept')?.includes('text/html')) { event.respondWith( fetch(request) .then(response => { const clone = response.clone(); caches.open(`pages-${CACHE_VERSION}`) .then(cache => cache.put(request, clone)); return response; }) .catch(() => caches.match(request) .then(cached => cached || caches.match('/offline.html')) ) ); return; } // Изображения — stale while revalidate if (request.destination === 'image') { event.respondWith( caches.open(`images-${CACHE_VERSION}`).then(async cache => { const cached = await cache.match(request); const fetchPromise = fetch(request).then(response => { cache.put(request, response.clone()); return response; }); return cached ?? fetchPromise; }) ); } }); 

Подробнее о Service Worker читайте в справочнике MDN.

Как добавить кнопку установки на сайт?

Чтобы пользователь мог установить PWA, нужно обработать событие beforeinstallprompt. Мы реализуем React-хук useInstallPrompt:

// useInstallPrompt.ts export function useInstallPrompt() { const [installPrompt, setInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null); const [isInstalled, setIsInstalled] = useState(false); useEffect(() => { const handler = (e: BeforeInstallPromptEvent) => { e.preventDefault(); setInstallPrompt(e); }; window.addEventListener('beforeinstallprompt', handler as EventListener); window.addEventListener('appinstalled', () => setIsInstalled(true)); // Проверить — уже установлено? if (window.matchMedia('(display-mode: standalone)').matches) { setIsInstalled(true); } return () => window.removeEventListener('beforeinstallprompt', handler as EventListener); }, []); const install = async () => { if (!installPrompt) return; const result = await installPrompt.prompt(); if (result.outcome === 'accepted') { setIsInstalled(true); setInstallPrompt(null); } }; return { canInstall: !!installPrompt && !isInstalled, install, isInstalled }; } // Использование в компоненте function InstallBanner() { const { canInstall, install } = useInstallPrompt(); if (!canInstall) return null; return ( <div className="install-banner"> <p>Установите приложение для быстрого доступа</p> <button onClick={install}>Установить</button> </div> ); } 

Пример offline-страницы

<!-- /offline.html --> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Нет соединения — ТехноМагазин</title> <style> body { font-family: system-ui; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .offline { text-align: center; } </style> </head> <body> <div class="offline"> <svg><!-- иконка wifi off --></svg> <h1>Нет соединения</h1> <p>Проверьте подключение к интернету и обновите страницу</p> <button onclick="location.reload()">Попробовать снова</button> </div> </body> </html> 

Почему PWA не устанавливается: типичные ошибки

Даже при корректном манифесте и Service Worker установка может не сработать. Частая причина — отсутствие HTTPS или неправильные иконки. На iOS требуется явно указать apple-mobile-web-app-capable и добавить иконки нужных размеров. Ещё одна проблема: браузер отклоняет установку, если сайт не соответствует критериям качества (Lighthouse PWA audit). Мы проверяем все эти моменты: тестируем на Chrome, Safari, Firefox, Android и iOS. Если push-уведомления не работают, скорее всего, не настроен VAPID-ключ или сертификат. Все эти нюансы мы отрабатываем на этапе тестирования.

Что входит в работу

• Web App Manifest — полная конфигурация с иконками, сплэшами, шорткатами.
• Service Worker — регистрация, стратегии кэширования, обновление версий.
• Offline-страница — адаптивная, с кнопкой перезагрузки.
• Install Prompt — кнопка установки на десктоп и мобильные.
• Push-уведомления — опционально, интеграция с Firebase или сторонним сервисом.
• Аудит Lighthouse — гарантируем зелёные проверки PWA раздела.
• Документация — описание архитектуры кэширования и инструкция по обновлению.

Сроки разработки

Итоговый срок: от 2 до 4 дней без push, до 6 дней с ними. Стоимость рассчитывается индивидуально — пишите, оценим ваш проект.

Как мы работаем

1. Аналитика — изучаем структуру сайта, определяем App Shell.
2. Проектирование — выбираем стратегии кэширования под ваш контент.
3. Реализация — пишем Service Worker, настраиваем манифест, интегрируем хуки.
4. Тестирование — проверяем на Chrome, Safari, Firefox, Android и iOS.
5. Деплой — загружаем на продакшен, мониторим через Lighthouse.

Наша команда имеет 5+ лет опыта в PWA. За это время реализовали проекты для интернет-магазинов, медиа и SaaS. Гарантируем поддержку актуальных стандартов и совместимость с последними версиями браузеров. Свяжитесь с нами, чтобы получить консультацию — расскажем, как PWA улучшит ваш бизнес. Закажите внедрение PWA уже сегодня.