Что такое PWA

Progressive Web App — обычный сайт с тремя дополнениями.

  • HTTPS (или localhost при разработке). Service worker работает только в безопасном контексте.
  • Web App Manifest: JSON-файл с именем, иконками, цветами и стартовым адресом.
  • Service Worker: скрипт между страницей и сетью, который перехватывает запросы и может отвечать на них из кеша.

В итоге сайт можно установить на главный экран, он открывается в отдельном окне и продолжает работать без соединения. Учтите, что у service worker нет window и DOM; глобальный объект внутри него — self, а Cache API доступен как caches.

Manifest и установка

Manifest сообщает браузеру, как должно выглядеть установленное приложение. Подключите его на каждой странице:

html
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">
json
{
  "name": "Prowid Notes",
  "short_name": "Notes",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ]
}
ПолеСмысл
name, short_nameПолное имя и короткая подпись под иконкой
start_urlСтраница, которая открывается с иконки; параметр ?source=pwa помогает аналитике
displaystandalone скрывает адресную строку; browser оставляет обычную вкладку
iconsОбычный минимум — 192 и 512 px; maskable подстраивается под круглые и скруглённые формы

💡 Правила установки у браузеров отличаются, поэтому проверяйте в нужных браузерах. Для работы офлайн service worker нужен в любом случае.