Что такое прогрессивное веб-приложение

Урок объясняет, что такое PWA и почему обычный сайт можно превратить в устанавливаемое приложение.

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

Зачем это нужно

Раньше выбор был жёстким: либо ты делаешь сайт (доступен по ссылке, но «не настоящее приложение»), либо нативное приложение (есть на домашнем экране, работает офлайн, шлёт уведомления, но требует магазина приложений, отдельной разработки под iOS и Android и установки). PWA стирает эту границу. Это по-прежнему сайт — один код, одна ссылка, индексируется поисковиком — но с возможностями нативного приложения.

Слово «прогрессивное» здесь ключевое. Идея в прогрессивном улучшении: приложение работает у всех как обычный сайт, а там, где браузер поддерживает дополнительные API, включаются бонусы — офлайн, установка, push. Старый браузер просто не получит этих бонусов, но сайт не сломается.

Три кита PWA

Технически PWA держится на трёх вещах:

HTTPS — защищённое соединение. Без него ключевые API недоступны (об этом отдельный урок).
Веб-манифест (manifest.json) — JSON-файл с именем приложения, иконками и настройками отображения. Он делает приложение устанавливаемым.
Service Worker — фоновый скрипт, который перехватывает сетевые запросы и умеет отдавать ответы из кеша. Он даёт офлайн-режим и фоновые возможности.

Всё остальное — push-уведомления, фоновая синхронизация, доступ к хранилищам — это надстройки поверх этих трёх основ.

Как это выглядит для пользователя

Пользователь заходит на сайт. Через какое-то время браузер замечает, что сайт соответствует критериям PWA, и предлагает «Установить приложение». После установки на домашнем экране появляется иконка — как у обычного приложения. При запуске оно открывается без адресной строки браузера, в своём окне. Если интернет пропал — приложение всё равно открывается и показывает закешированный контент.

Обычный сайт         PWA
---------------      ---------------------------
открыть в браузере   иконка на домашнем экране
нужен интернет       работает офлайн
нет уведомлений      push-уведомления
адресная строка      отдельное окно (standalone)

Как работает под капотом

Магия PWA — это Service Worker, отдельный JavaScript-поток, который браузер запускает в фоне и связывает с вашим сайтом. Он живёт между приложением и сетью: каждый запрос (за HTML, картинкой, API) проходит через него. Service Worker может ответить «вот из кеша», «схожу в сеть», «сеть недоступна — вот офлайн-страница». Именно поэтому PWA продолжает работать без интернета — отвечает Service Worker, а не сервер.

Манифест же — это просто метаданные. Когда браузер видит подключённый manifest.json и зарегистрированный Service Worker по HTTPS, он считает сайт «устанавливаемым» и показывает соответствующую кнопку.

Частые ошибки

Считать, что PWA — это новый фреймворк. Нет, это набор браузерных возможностей. Вы можете сделать PWA на React, Vue, Angular или вообще на чистом HTML.
Думать, что нужен магазин приложений. PWA устанавливается прямо из браузера, без App Store или Google Play (хотя при желании PWA можно и опубликовать в магазинах).
Ожидать офлайн «из коробки». Офлайн не появляется сам — его нужно явно реализовать в Service Worker через кеширование.

Итоги

PWA — это сайт с возможностями нативного приложения, без отдельной разработки под платформы.
Три основы: HTTPS, веб-манифест, Service Worker.
«Прогрессивное» = работает у всех, а бонусы включаются там, где браузер их поддерживает.
Офлайн обеспечивает Service Worker, устанавливаемость — манифест.