Прогрессивные веб-приложения (PWA): как превратить сайт в приложение

Progressive Web App (PWA) — это веб-сайт, который работает как нативное мобильное приложение: загружается даже без интернета, устанавливается на главный экран смартфона и отправляет push-уведомления. Технология объединяет скорость разработки веба с удобством использования мобильных приложений.

Почему PWA выгоднее обычного сайта

PWA работает быстрее обычного сайта за счёт кэширования ресурсов и загружается мгновенно даже при плохом соединении.

Главные преимущества:

• Офлайн-режим — пользователь открывает контент без подключения к сети, service worker загружает данные из кэша
• Установка за один тап — не нужно идти в App Store или Google Play, иконка добавляется прямо на домашний экран
• Push-уведомления — возвращают аудиторию на сайт без SMS и email-рассылок
• Экономия ресурсов — одна кодовая база вместо двух (iOS + Android), не требуется модерация в магазинах приложений
• Меньший размер — PWA весит 1-3 МБ против 50-100 МБ нативных приложений

По данным Google, после внедрения PWA конверсия Alibaba выросла на 76%, а время загрузки сократилось на 4 секунды. Twitter запустил Twitter Lite (PWA) и снизил объём передаваемых данных на 70%.

Три обязательных компонента PWA

Чтобы сайт стал прогрессивным веб-приложением, нужны манифест, service worker и HTTPS-протокол — без них браузер не покажет запрос на установку.

Web App Manifest

JSON-файл manifest.json описывает метаданные приложения: название, иконки, цвета интерфейса, ориентацию экрана. Браузер использует эту информацию при установке на главный экран.

Минимальная структура манифеста:

{
  "name": "Название приложения",
  "short_name": "Краткое имя",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Параметр display: standalone убирает адресную строку браузера и делает приложение полноэкранным. Иконки нужны минимум двух размеров: 192×192 px и 512×512 px.

Service Worker

JavaScript-скрипт, который работает в фоне независимо от открытых вкладок. Перехватывает сетевые запросы, кэширует файлы, обеспечивает офлайн-доступ и обрабатывает push-уведомления.

Базовая регистрация service worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW зарегистрирован', reg))
    .catch(err => console.log('Ошибка регистрации', err));
}

В файле sw.js прописываются стратегии кэширования: Cache First (сначала проверяем кэш), Network First (сначала запрос в сеть), Stale While Revalidate (отдаём старые данные, обновляем в фоне).

HTTPS

Service worker работает только по защищённому протоколу. Исключение — localhost для разработки. Бесплатный SSL-сертификат можно получить через Let’s Encrypt или использовать сервисы вроде Cloudflare.

Инструменты и фреймворки для разработки PWA

Создать PWA можно вручную или использовать готовые решения, которые автоматизируют настройку service worker и манифеста.

Workbox — оптимальный выбор для кастомной настройки. Подключается через npm, позволяет гибко управлять кэшем и версиями файлов. Пример прекэширования статики:

import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

Для WordPress есть плагины вроде Super Progressive Web Apps и PWA for WP, которые создают манифест и service worker через графический интерфейс.

Как установить PWA на смартфон

Пользователь устанавливает PWA через баннер в браузере — промпт появляется автоматически, если соблюдены все требования.

Условия показа промпта:

1. Сайт работает по HTTPS
2. Подключён валидный manifest.json
3. Зарегистрирован service worker с обработчиком fetch
4. Пользователь провёл на сайте минимум 30 секунд (критерий Chrome)

В Android Chrome появляется всплывающее окно с кнопкой «Установить». В iOS Safari нужно вручную нажать «Поделиться» → «На экран «Домой»» — автоматического промпта Apple не предусмотрела до iOS 16.4, но базовая функциональность PWA работает.

После установки иконка приложения появляется рядом с нативными. При запуске PWA открывается без адресной строки браузера, в полноэкранном режиме.

Разработчик может контролировать момент показа промпта через JavaScript:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Показываем свою кнопку установки
  document.querySelector('#install-button').style.display = 'block';
});

Кейсы компаний, которые внедрили PWA

Крупные бренды перевели свои сервисы на PWA и получили измеримый рост метрик.

Starbucks — приложение для заказа кофе. Размер PWA 99.84% меньше нативного iOS-приложения. Количество заказов через веб-приложение выросло вдвое, пользователи добавляют товары в корзину с той же частотой, что и в нативном приложении.

Pinterest — время на загрузку сократилось с 23 до 5.6 секунды, вовлечённость выросла на 60%. Реклама стала генерировать на 44% больше дохода. PWA-версия занимает всего 150 КБ против 56 МБ у Android-приложения.

Uber — запустили m.uber.com для пользователей на медленных сетях 2G. Приложение загружается за 3 секунды на слабых устройствах. Ключевой сценарий (заказ поездки) работает офлайн благодаря service worker.

Trivago — рост повторных визитов на 150%, пользователи стали на 97% чаще добавлять отели в избранное. Кликабельность по офферам увеличилась на 33%.

Telegram Web — полнофункциональный мессенджер в браузере с поддержкой шифрования, синхронизации и офлайн-доступа. Работает быстрее десктопной версии на слабых компьютерах.

Эти цифры показывают: PWA не заменяет нативные приложения полностью, но закрывает задачи мобильного веба с минимальными затратами на разработку.

Частые вопросы