Хотите, чтобы ваш блог или магазин на Astro открывались без интернета и устанавливались на экраны смартфонов как настоящие приложения? Для этого нужно превратить сайт в Progressive Web App (PWA).
Концепция PWA появилась в Google в 2015 году как ответ на вопрос: «Можно ли сделать веб-приложение таким же быстрым и надежным, как нативное?». В 2026 году ответ — безусловное «да». PWA поддерживаются всеми современными браузерами, включая iOS Safari (начиная с версии 16.4). И благодаря тому, что Astro под капотом использует сборщик Vite, добавление PWA в проект занимает несколько минут.
Что такое PWA и зачем это нужно?
PWA — это обычный веб-сайт, обогащенный тремя ключевыми технологиями:
- Web App Manifest — JSON-файл, описывающий «личность» приложения: название, иконки, цвет фона. Именно он позволяет браузеру предложить пользователю «Добавить на домашний экран».
- Service Worker — фоновый JavaScript-скрипт, который браузер запускает отдельно от основного потока. Он перехватывает сетевые запросы и умеет отдавать закешированные ресурсы, когда сеть недоступна.
- HTTPS — обязательное условие. Service Worker’ы работают только на защищенных соединениях (исключение:
localhostдля разработки).
Почему PWA важен именно для Astro-проектов? Статический сайт на Astro уже обладает идеальными метриками загрузки (PageSpeed 95-100). PWA добавляет следующий уровень — Reliability (надежность): пользователь в метро без интернета все равно увидит ваш сайт, а не страницу ошибки Chrome «Динозавр не может прыгнуть».
Шаг 1: Установка интеграции Vite PWA
Добавьте официальный пакет из экосистемы сообщества:
npm install @vite-pwa/astroЭта интеграция берет на себя самую сложную часть: автоматическую генерацию Service Worker’а через библиотеку Workbox (разработана Google), создание манифеста и инъекцию регистрационных скриптов в HTML.
Шаг 2: Конфигурация (astro.config.mjs)
Зарегистрируйте плагин и передайте ему настройки манифеста:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import AstroPWA from '@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 },
},
},
],
},
}),
],
});Иконки приложения
Положите иконки 192x192 и 512x512 в папку public/icons/. Используйте формат PNG.
Атрибут maskable позволит Android обрезать иконку по своей форме (круг, квадрат с
закругленными углами).
display: standalone
Параметр standalone скрывает адресную строку браузера при запуске PWA. Пользователь
видит ваше приложение как «нативное» — без хромовского интерфейса.
Стратегии кэша
Cache First — сначала ищет в кэше (быстро). Network First — сначала идет в сеть (актуально). Stale While Revalidate — отдает кэш, обновляет в фоне (баланс).
Шаг 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.
