Коротко: PWA работает без интернета за счет Service Worker — фонового скрипта в браузере — и кэша, куда заранее сохраняются файлы и данные. Когда сеть пропадает, браузер берет все нужное из кэша и продолжает обслуживать запросы локально, а синхронизацию с сервером откладывает до появления связи.
Как это устроено по шагам:
- Установка и подготовка: при первом визите сайт регистрирует Service Worker. Он скачивает и кладет в Cache Storage «статические» файлы: HTML-шаблон, CSS, JS, иконки, шрифты, офлайн-страницу, часто используемые изображения.
- Перехват запросов: Service Worker перехватывает сетевые запросы страницы. В зависимости от стратегии он может:
- отдавать ресурс из кэша сразу;
- пытаться сходить в сеть и, если не получилось, вернуть кэш;
- сначала вернуть кэш, а сетью обновить версию в фоне.
- Данные приложения: динамический контент хранится в IndexedDB — это локальная база в браузере. К примеру, список товаров, последние статьи, черновики форм. UI рендерится из IndexedDB, а при сети делаются запросы для обновления.
- Фоновые задачи:
- Background Sync: если пользователь отправил форму офлайн, Service Worker сохраняет ее локально и автоматически досылает на сервер, когда сеть появится.
- Periodic Sync и push-уведомления: при наличии разрешений можно периодически обновлять кэш или получать сообщения с сервера и обновлять локальные данные.
- Офлайн-роутинг: для маршрутных приложений Service Worker возвращает один и тот же shell (основной HTML/JS), а уже внутри приложение подгружает/рисует нужные экраны из локальных данных.
- Манифест и «установка»: web app manifest описывает иконки, цвет темы, имя. Благодаря ему сайт можно «установить» на устройство как приложение. Это не нативная установка — это ярлык + offline‑ресурсы, уже лежащие в кэше.
- Обновления: новая версия Service Worker скачивается в фоне как «второй экземпляр», прогревает новый кэш, затем активируется и аккуратно меняет старый кэш на новый, чтобы пользователи не видели поломок.
Типовые стратегии кэширования:
- App Shell (stale-while-revalidate): оболочка приложения мгновенно из кэша, данные освежаются в фоне.
- Cache First: иконки, шрифты, неизменяемые библиотеки — почти всегда из кэша.
- Network First: новостные ленты, профили — сначала сеть, при фейле кэш.
- Background queue: изменения пользователя копятся локально и отправляются позже.
Что важно учесть:
- Прямо «все что угодно» офлайн не заработает: нужно спроектировать, какие экраны и данные кэшируются и как они деградируют без сети.
- Ограничения браузеров: объем Cache Storage/IndexedDB ограничен и различается на устройствах.
- Конфликты данных: при отложенной отправке нужны правила мерджа и обработки дублей.
- Безопасность: Service Worker работает только по HTTPS.
Если хотите, опишу конкретную архитектуру под ваш сайт: какие ресурсы класть в Cache Storage, структуру IndexedDB, стратегии для каждого маршрута и схему фоновой синхронизации.
Напишите мне в телеграм @webprodev
