Как превратить Astro-сайт в PWA (Progressive Web App)

Хотите, чтобы ваш блог или магазин на Astro открывались без интернета и устанавливались на экраны смартфонов как настоящие приложения? Для этого нужно превратить сайт в Progressive Web App (PWA).

Концепция PWA появилась в Google в 2015 году как ответ на вопрос: «Можно ли сделать веб-приложение таким же быстрым и надежным, как нативное?». В 2026 году ответ — безусловное «да». PWA поддерживаются всеми современными браузерами, включая iOS Safari (начиная с версии 16.4). И благодаря тому, что Astro под капотом использует сборщик Vite, добавление PWA в проект занимает несколько минут.

Что такое PWA и зачем это нужно?

PWA — это обычный веб-сайт, обогащенный тремя ключевыми технологиями:

1. Web App Manifest — JSON-файл, описывающий «личность» приложения: название, иконки, цвет фона. Именно он позволяет браузеру предложить пользователю «Добавить на домашний экран».
2. Service Worker — фоновый JavaScript-скрипт, который браузер запускает отдельно от основного потока. Он перехватывает сетевые запросы и умеет отдавать закешированные ресурсы, когда сеть недоступна.
3. HTTPS — обязательное условие. Service Worker’ы работают только на защищенных соединениях (исключение: localhost для разработки).

Почему PWA важен именно для Astro-проектов? Статический сайт на Astro уже обладает идеальными метриками загрузки (PageSpeed 95-100). PWA добавляет следующий уровень — Reliability (надежность): пользователь в метро без интернета все равно увидит ваш сайт, а не страницу ошибки Chrome «Динозавр не может прыгнуть».

Шаг 1: Установка интеграции Vite PWA

Важно для Astro 6+: Поскольку в Astro 6 используется Vite 7, оригинальный плагин @vite-pwa/astro имеет проблемы с совместимостью. Поэтому сообщество рекомендует использовать поддерживаемый форк:

npm install @kreisler/vite-pwa-astro

Эта интеграция берет на себя самую сложную часть: автоматическую генерацию Service Worker’а через библиотеку Workbox (разработана Google), создание манифеста и инъекцию регистрационных скриптов в HTML.

Шаг 2: Конфигурация (astro.config.mjs)

Зарегистрируйте плагин и передайте ему настройки манифеста:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import AstroPWA from '@kreisler/vite-pwa-astro';

export default defineConfig({
  integrations: [
    AstroPWA({
      // 'autoUpdate' — Service Worker обновляется в фоне без перезагрузки
      registerType: 'autoUpdate',

      // Web App Manifest — паспорт вашего приложения
      manifest: {
        name: 'Astro Блог — Веб-разработка',
        short_name: 'AstroBlog',
        description: 'Лучшие статьи про современную веб-разработку',
        theme_color: '#7c3aed', // Фиолетовый цвет заголовка браузера
        background_color: '#0f0f23', // Цвет сплэш-скрина при запуске
        display: 'standalone', // Без адресной строки браузера
        start_url: '/',
        icons: [
          {
            src: '/icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png',
            purpose: 'any maskable',
          },
          {
            src: '/icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
        screenshots: [
          {
            src: '/screenshots/desktop.png',
            sizes: '1280x800',
            type: 'image/png',
            form_factor: 'wide',
          },
        ],
      },

      // Workbox — движок кэширования
      workbox: {
        // Кэшировать все HTML, CSS, JS, шрифты и изображения
        globPatterns: ['**/*.{html,js,css,woff2,png,webp,avif,svg}'],
        // Стратегия Cache First: сначала кэш, потом сеть
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
            handler: 'CacheFirst',
            options: {
              cacheName: 'google-fonts-cache',
              expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 },
            },
          },
        ],
      },
    }),
  ],
});

Шаг 3: Регистрация Service Worker в Layout

Подключите скрипт инициализации в базовый макет (src/layouts/BaseLayout.astro):

---
// src/layouts/BaseLayout.astro
import { pwaInfo } from 'virtual:pwa-info';
---

<html lang="ru">
  <head>
    <!-- ... другие теги ... -->
    <meta name="theme-color" content="#7c3aed" />
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
    {pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
  </head>
  <body>
    <slot />
    <script src="/src/pwa-register.ts"></script>
  </body>
</html>

Создайте файл src/pwa-register.ts:

// src/pwa-register.ts
import { registerSW } from 'virtual:pwa-register';

const updateSW = registerSW({
  // Вызывается, когда доступна новая версия
  onNeedRefresh() {
    const update = confirm('Доступна новая версия сайта. Обновить?');
    if (update) updateSW(true);
  },
  // Вызывается, когда контент полностью закеширован для офлайна
  onOfflineReady() {
    console.log('Сайт готов к работе офлайн!');
  },
});

Шаг 4: Офлайн-страница

Создайте специальную страницу src/pages/offline.astro для случаев, когда пользователь без интернета запрашивает страницу, которой нет в кэше:

---
// src/pages/offline.astro
---

<html lang="ru">
  <head><title>Нет подключения</title></head>
  <body>
    <h1>Вы офлайн</h1>
    <p>Проверьте подключение к интернету и попробуйте снова.</p>
    <a href="/">На главную (из кэша)</a>
  </body>
</html>

В конфигурации Workbox укажите её как страницу для офлайна:

workbox: {
  navigateFallback: '/offline',
}

Шаг 5: Тестирование

Service Worker’ы работают только на https или localhost. Для тестирования выполните:

npm run build && npm run preview

Откройте Chrome DevTools → вкладка Application → Service Workers. Если всё настроено правильно, вы увидите зарегистрированный воркер со статусом activated and running.

Для имитации офлайна установите чекбокс Offline на той же вкладке и обновите страницу. Сайт должен загрузиться из кэша.

На Android-устройствах появится баннер «Добавить на домашний экран». На iOS нужно вручную нажать «Поделиться → На экран “Домой”».

Push-уведомления (Дополнительно)

В 2026 году Astro-PWA может отправлять нативные push-уведомления (с согласия пользователя). Это особенно полезно для блогов, новостных порталов или e-commerce (уведомление о доставке заказа).

Технология работает через Push API + Notification API и требует серверного компонента для отправки сообщений. Популярный стек: Web Push библиотека на Node.js + Vapid Keys (бесплатные ключи шифрования).

Итог

PWA — идеальный способ повысить Retention Rate (возврат аудитории). Пользователь, установивший ваш блог на телефон, с гораздо большей вероятностью вернется читать новые статьи. А поскольку Astro генерирует легчайший статический HTML, ваше PWA будет запускаться за считанные миллисекунды — быстрее большинства нативных приложений из App Store.