От сайта к приложению: полный гид по Progressive Web Apps
Зачем Progressive Web Apps нужны вашему проекту
Разработка нативных приложений — это сплошные хлопоты. Два отдельных кодбейса под iOS и Android. Ожидание одобрения в App Store. Разные пайплайны деплоя. Progressive Web Apps меняют всё с ног на голову.
PWA сочетают плюсы сайта и приложения. Пользователи ставят иконку на домашний экран, запускают в полноэкранном режиме, работают оффлайн. А вы пишете один код. Без строгих правил магазинов. Просто суперcharged-сайт.
Всё это благодаря service workers — лёгким JS-процессам на фоне. Они ловят запросы, кэшируют данные, обеспечивают оффлайн. Просто и элегантно.
Реальные возможности и ограничения PWA
Не торопитесь. PWA работают в scope вашего domain, только по HTTPS, в песочнице. Это не минус, а защита.
Зато открывается доступ к нативным API: геолокация, камера, сенсоры. Обновления приходят мгновенно — выложил код, и готово. Пользователи увидят на следующем визите.
Как собрать PWA: пошаговый план
Чтобы превратить сайт в PWA, нужны пять ключевых элементов. Разберём по порядку.
1. App Manifest: паспорт вашего PWA
Это JSON-файл с инфой для ОС. Указываете название, цвета, scope, стартовую страницу, описание, иконки, ориентацию.
Пример готового манифеста:
{
"name": "Моё крутое приложение",
"short_name": "КрутоПрил",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Описание вашего приложения",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Оставьте orientation на "any". Пользователи на мобилках любят свободу.
2. Подключите манифест в HTML
Вставьте в <head> главной страницы или шаблона:
<link rel="manifest" href="/assets/manifest.json">
Браузер найдёт конфиг.
3. Подготовьте оффлайн-режим
Service workers закешируют страницы по мере просмотра. Если контент не в кэше и нет сети — покажите fallback. Создайте offline.html с объяснением.
Для SPA сделайте symlink на index.html:
ln -s index.html offline.html
Так юзеры вернутся к кэшированному контенту, а не застрянут.
4. Зарегистрируйте service worker
Добавьте скрипт перед </body>:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker готов'))
.catch(err => console.log('Ошибка регистрации Service Worker'));
}
</script>
5. Напишите service worker
Здесь магия оффлайна. Он перехватывает fetch, кэширует, отдаёт из кэша или fallback.
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
На установке кэширует ключевые файлы. Отдаёт из кэша, если можно. Иначе — оффлайн-страницу.
HTTPS — без вариантов
Service workers требуют HTTPS. Это база безопасности. Нет HTTPS? Исправляйте сейчас. В NameOcean мы упрощаем: SSL-сертификаты и hosting с авто-HTTPS.
Деплой и тесты
Выложите манифест, worker и HTML. Проверьте:
- DevTools (F12) → вкладка Application.
- Манифест без ошибок.
- Service worker зарегистрирован.
- Оффлайн-тест: Network → Offline.
- Установка PWA (промпт или меню браузера).
Главная выгода
Пользователи получают опыт нативного app. Вы — один кодбейс, быстрые обновления, полный контроль. Стоит усилий.
Быстрая автоматизация
Лень копаться? Зайдите на PWABuilder.com. Там генерируют многое автоматически. Умный подход.
Итог: PWA — не эксперимент. Это практичный способ дать app-опыт, не отвлекаясь от фич.