Веб-разработка
PWA и Service Workers
Twitter Lite PWA в 2017 году сократила размер приложения с 23MB до 600KB, увеличила сессии на 65% и снизила bounce rate на 20% - просто через Service Workers и правильное кэширование. Стarbucks внедрил PWA для онлайн-заказов: работает в offline, размер 233KB vs 148MB нативного iOS приложения. PWA - не buzzword, это production технология.
- **Starbucks** использует PWA для предзаказа в странах с медленным интернетом - полная функциональность при плохой сети через Service Worker кэширование меню и cart state
- **Uber** переписал мобильный web как PWA - начальная загрузка 50KB, работает на 2G, Service Worker кэширует маршруты для offline просмотра
- **Pinterest** снизил время загрузки на 40% через Service Worker precaching - 60% увеличение weekly active users в странах с медленным интернетом
Offline-First архитектура
Offline-First - проектирование приложения с расчётом что сеть может отсутствовать. Service Worker - JavaScript worker запущенный браузером в фоне, перехватывает все сетевые запросы приложения. Это центральный механизм PWA: кэширование ресурсов, offline fallback, background sync.
Workbox (Google) - библиотека над Service Worker API: готовые caching стратегии, precaching статических ресурсов, background sync, Workbox CLI для интеграции с Webpack/Vite. Vite PWA Plugin - ноль конфигурации для PWA на Vite: автоматически генерирует service worker с Workbox и manifest.
Service Worker перехватывает запросы. Что происходит при первом посещении сайта?
Caching Стратегии
Workbox предоставляет 5 стратегий кэширования. Cache First: отдать кэш, обновить в фоне (изображения, шрифты). Network First: попробовать сеть, fallback на кэш (API данные). Stale While Revalidate: отдать кэш немедленно + обновить в фоне (HTML страницы). Network Only: без кэша (платёжные запросы). Cache Only: только кэш (offline-first контент).
Precaching vs Runtime Caching: Precaching - кэшировать при установке SW (build artifacts с hash в имени: main.a3b4c5.js). Runtime Caching - кэшировать при первом запросе (API данные, изображения с CDN). Версионирование precache: Workbox автоматически управляет через __WB_MANIFEST из build.
Почему для платёжных API запросов нужна стратегия Network Only?
Push Уведомления
Web Push API позволяет отправлять уведомления пользователю даже когда вкладка закрыта. Архитектура: браузер подписывается на push сервер провайдера (FCM/APNs), получает subscription объект с endpoint, сервер отправляет push через этот endpoint. Service Worker обрабатывает push событие и показывает Notification API уведомление.
VAPID (Voluntary Application Server Identification) - стандарт аутентификации push сервера: сервер генерирует пару ключей (publicKey + privateKey), publicKey отправляется клиенту при подписке, сервер подписывает push запросы privateKey. Это исключает возможность отправлять push от имени другого приложения.
Для чего нужен VAPID при отправке Web Push уведомлений?
Web App Manifest
Web App Manifest - JSON файл описывающий PWA: имя, иконки, цвета, display mode (standalone - без адресной строки, fullscreen, minimal-ui). При наличии manifest + Service Worker браузер предлагает 'Добавить на главный экран'. После установки PWA запускается как нативное приложение.
PWA Installation criteria (Chrome): HTTPS, Service Worker с fetch handler, manifest с именем и иконками 192px и 512px, display: standalone/fullscreen/minimal-ui. Lighthouse проверяет PWA готовность. Vite PWA Plugin генерирует manifest и service worker автоматически из конфигурации - нет необходимости писать вручную.
PWA может заменить нативные iOS/Android приложения для любого продукта
PWA на iOS имеет ограничения: нет push уведомлений на старых iOS (добавлены только в iOS 16.4), нет Background Fetch, нет Bluetooth/NFC доступа, нет App Store дистрибуции. Для медиа, камеры, payments через Apple Pay, игр с высокими требованиями - нативные приложения предпочтительны. PWA идеален для B2B инструментов и content-heavy сайтов
Apple намеренно ограничивает PWA возможности на iOS чтобы защитить App Store экосистему; на Android PWA возможности значительно полнее
Что означает `display: 'standalone'` в Web App Manifest?
Ключевые идеи
- **Service Worker** - JavaScript worker перехватывающий сетевые запросы; Workbox упрощает управление; устанавливается при первом посещении, контролирует со следующего
- **Caching стратегии** - Cache First для статики, Network First для API, Stale While Revalidate для HTML, Network Only для платежей; Workbox ExpirationPlugin для ротации
- **Push + Manifest** - VAPID для аутентификации push сервера; manifest определяет standalone режим без browser chrome; вместе = полноценная PWA установка
Связанные темы
PWA работает поверх базовых web технологий и CDN:
- CDN и Edge Computing — Service Worker кэширует на устройстве; CDN кэширует на серверах; вместе дают максимальную скорость
- Производительность на масштабе — Service Worker precaching устраняет network latency для повторных посещений - ключевой инструмент web performance
Вопросы для размышления
- Как организовать обновление PWA без показа пользователю 'новая версия доступна' при каждом деплое?
- Какие ресурсы стоит precache, а какие оставить для runtime caching?
- Как background sync помогает в приложении для полевых работников с периодическим отсутствием сети?