Прогрессивные веб-приложения (PWA)
PWA
Что это такое
Прогрессивное веб-приложение — это сайт, который вдобавок ведёт себя как установленное приложение. Он работает без сети или на плохом соединении, запускается с домашнего экрана без браузерной обвязки, умеет получать push-уведомления. Отдельная платформа для всего этого не нужна: речь о наборе возможностей браузера, положенных поверх обычного сайта.
Почему это важно
Для большого класса продуктов PWA — прагматичная середина между сайтом и двумя нативными приложениями. Одна кодовая база достаёт до любого устройства, обновляется без проверки в магазине приложений, и при этом её всё равно может установить тот пользователь, который этого хочет. Часто ценнее половина про офлайн: инструмент выездного инженера, который продолжает работать в подвале, или страница, мгновенно открывающаяся в поезде, — такой продукт заметно лучше страницы с ошибкой браузера. А цена всей этой роскоши — service worker, то есть слой кэширования, а вместе с ним и все проблемы инвалидации.
Что в этом треке
- Service worker и офлайн (02-frontend/25-progressive-web-apps-pwa/01-service-workers-and-offline) — прокси между страницей и сетью, а также о том, как кэшировать и при этом не отдавать устаревшее содержимое.
- Устанавливаемость и манифест приложения (02-frontend/25-progressive-web-apps-pwa/02-installability-and-the-app-manifest) — метаданные, по которым браузер предлагает установить сайт, и что меняется после этого.
Предварительные требования
- JavaScript (02-frontend/06-javascript)
Что читать дальше
- Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — установленное приложение судят по тем же метрикам, а холодный старт — самый тяжёлый случай.
- Веб-безопасность (OWASP Top 10) (07-security/01-web-security-owasp-top-10) — service worker — скрипт с необычными полномочиями, и он заслуживает той же проверки, что и любой другой.
- Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — макет должен работать при тех размерах, на которых установленное приложение реально используют.