Прогрессивные веб-приложения (PWA)

PWA

Что это такое

Прогрессивное веб-приложение — это сайт, который вдобавок ведёт себя как установленное приложение. Он работает без сети или на плохом соединении, запускается с домашнего экрана без браузерной обвязки, умеет получать push-уведомления. Отдельная платформа для всего этого не нужна: речь о наборе возможностей браузера, положенных поверх обычного сайта.

Почему это важно

Для большого класса продуктов PWA — прагматичная середина между сайтом и двумя нативными приложениями. Одна кодовая база достаёт до любого устройства, обновляется без проверки в магазине приложений, и при этом её всё равно может установить тот пользователь, который этого хочет. Часто ценнее половина про офлайн: инструмент выездного инженера, который продолжает работать в подвале, или страница, мгновенно открывающаяся в поезде, — такой продукт заметно лучше страницы с ошибкой браузера. А цена всей этой роскоши — service worker, то есть слой кэширования, а вместе с ним и все проблемы инвалидации.

Что в этом треке

  1. Service worker и офлайн (02-frontend/25-progressive-web-apps-pwa/01-service-workers-and-offline) — прокси между страницей и сетью, а также о том, как кэшировать и при этом не отдавать устаревшее содержимое.
  2. Устанавливаемость и манифест приложения (02-frontend/25-progressive-web-apps-pwa/02-installability-and-the-app-manifest) — метаданные, по которым браузер предлагает установить сайт, и что меняется после этого.

Предварительные требования

Что читать дальше

  • Веб-производительность (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) — макет должен работать при тех размерах, на которых установленное приложение реально используют.