Реалізація 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": "uk",
  "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="uk">
<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 вже сьогодні.