Как сделать сайт приложением (PWA): пошаговое руководство

Сделать из сайта приложение можно через PWA (Progressive Web App) — это технология, которая превращает сайт в «полу-нативное» приложение. Пользователь может «установить» сайт на главный экран телефона как обычное приложение, работать с ним оффлайн, получать push-уведомления. При этом не нужны магазины приложений (Google Play, App Store) — установка через браузер.

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

• Установка на главный экран — пользователь видит ваш сайт как приложение.
• Работа оффлайн — кэшированные страницы доступны без интернета.
• Push-уведомления — повторное вовлечение пользователей.
• Быстрая загрузка — после первого визита почти моментально.
• Не нужны магазины — установка одним кликом из браузера.
• Один код для веба и мобайла — экономия на разработке.

Что нужно для PWA

1. HTTPS

Без HTTPS PWA работать не будет. Установите SSL-сертификат (Let's Encrypt бесплатно).

2. Manifest.json

Файл с описанием приложения. Лежит в корне сайта.

{
  "name": "Adaptive Lab",
  "short_name": "Adaptive",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#F26522",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

3. Service Worker

JavaScript-файл, который работает в фоне и обрабатывает оффлайн-режим.

// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/']))
  );
});
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(r => r || fetch(event.request))
  );
});

4. Подключение в HTML

<link rel="manifest" href="/manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  }
</script>

Как сделать PWA на разных платформах

WordPress

• Плагин Super Progressive Web Apps — бесплатно, простая настройка.
• PWA for WP — альтернатива.
• Настройка за 30–60 минут.

Tilda

• Нет встроенной поддержки PWA.
• Можно добавить вручную через HTML-блок и Zero-блоки.
• Ограничения: нельзя глубоко контролировать Service Worker.

Shopify, Wix, Squarespace

• Встроенная поддержка в премиум-тарифах.
• Shopify имеет специальные приложения PWA.

Самописный сайт

• Прямая установка manifest + Service Worker.
• Полный контроль.
• Время: 1–3 дня разработки.

Альтернатива — упаковать в нативное приложение

• PWABuilder (pwabuilder.com) — Microsoft-инструмент. Из PWA генерирует пакеты для Google Play, App Store, Microsoft Store.
• Capacitor (от Ionic) — оборачивает веб-сайт в WebView.
• Cordova/PhoneGap — устаревшая, но рабочая альтернатива.
• Минус: магазины (App Store) требуют постоянной поддержки, обновлений, оплаты разработчиком ($99/год Apple).

PWA vs нативное приложение

Параметр	PWA	Нативное
Стоимость разработки	1× (один код)	3–5× (iOS + Android)
Установка	Через браузер, без магазина	Через Google Play / App Store
Функции устройства	Часть (камера, GPS, push)	Все (Bluetooth, NFC, и т.д.)
Скорость работы	Хорошая	Максимальная
SEO	Сохраняется (как у сайта)	Нет
Обновления	Автоматические	Через магазин

Когда нужен PWA

• Контентный сайт с регулярными возвратами (блог, медиа).
• Интернет-магазин — увеличение повторных покупок через push.
• Сервисы с регулярным использованием (заказ еды, такси).
• Нет бюджета на полноценную разработку приложения.

Когда нужно нативное приложение

• Сложная функциональность (игры, AR/VR).
• Доступ к специфическим возможностям устройства (Bluetooth, NFC).
• Платная подписка через App Store / Google Play.
• Нужно присутствие в магазинах для авторитета бренда.

Проверка PWA

• Chrome DevTools → Lighthouse → PWA audit.
• web.dev/measure — комплексный тест.
• В Chrome адресной строке появится иконка «Установить приложение» — значит PWA работает.

Нужна помощь с PWA или мобильной оптимизацией? Закажите технический аудит — оценим и предложим оптимальный путь.