PWA — прогрессивные веб-приложения

Что такое PWA

Прогрессивное веб-приложение — это обычный сайт, которому добавили три вещи:

1. HTTPS — без него ничего из остального не работает.
2. Манифест — файл с названием, иконками и параметрами отображения. Он позволяет установить сайт на домашний экран и запускать без адресной строки.
3. Service Worker — скрипт-посредник между страницей и сетью. Он кеширует ресурсы, обеспечивает работу при плохой связи и делает возможными push-уведомления.

Ключевое слово — «прогрессивное»: сайт остаётся обычным сайтом. Пользователь из поиска получает нормальную страницу, а тот, кто установил приложение, — ускоренную повторную загрузку.

Манифест

{
  "name": "Каталог инструментов",
  "short_name": "Каталог",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#0e1116",
  "theme_color": "#0e1116",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/mask.png", "sizes": "512x512", "type": "image/png",
      "purpose": "maskable" }
  ]
}

Подключается одной строкой в <head>:

<link rel="manifest" href="/manifest.webmanifest">

Service Worker: осторожная стратегия

// sw.js — сеть в приоритете, кеш как запасной вариант
const CACHE = 'v3';

self.addEventListener('fetch', event => {
  const req = event.request;

  // HTML всегда пробуем взять из сети: контент должен быть свежим
  if (req.mode === 'navigate') {
    event.respondWith(
      fetch(req).catch(() => caches.match('/offline.html'))
    );
    return;
  }

  // статику отдаём из кеша, обновляя в фоне
  event.respondWith(
    caches.match(req).then(hit => hit || fetch(req).then(res => {
      const copy = res.clone();
      caches.open(CACHE).then(c => c.put(req, copy));
      return res;
    }))
  );
});

Что PWA даёт и чего не даёт

PWA и индексация

• Googlebot не выполняет Service Worker. Робот всегда ходит в сеть напрямую — значит, сервер обязан отдавать полноценный HTML сам по себе.
• Каждый экран — отдельный URL. Если приложение — SPA, используйте History API и серверный рендеринг или пререндер, иначе индексировать будет нечего.
• Офлайн-страница закрывается от индексации. /offline.html должен отдавать noindex, иначе рискует попасть в выдачу.
• start_url с меткой источника. Параметр вида ?source=pwa удобен для аналитики, но закройте его от индексации через canonical.
• Скорость первой загрузки важнее. Из поиска приходят новые пользователи, у которых кеша нет. За неё отвечают Core Web Vitals, а не Service Worker.

Когда PWA оправдан

Итог

PWA — инструмент удержания и удобства, а не продвижения. Он окупается там, где к вам возвращаются, и почти бесполезен там, где посетитель приходит из поиска однократно. Внедряя, следите за одним: сервер должен отдавать полный HTML сам, без участия Service Worker.