Устанавливаемость и манифест приложения

Что это такое

Манифест веб-приложения — это JSON-файл, на который ссылается страница и который описывает приложение: имя, иконки, цвет экрана-заставки, а также то, открываться ли ему в собственном окне, а не во вкладке браузера. Предложить установку браузер готов тогда, когда есть манифест, service worker и защищённое соединение.

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

Установка сайта убирает две вещи, из-за которых веб-приложение кажется временным: браузерную обвязку и необходимость набирать адрес. Тот, кто установил приложение, запускает его как любое другое, находит на домашнем экране и возвращается чаще — это реальный результат для продукта, а не техническая формальность. Манифест ещё и место, где живут детали, которые делают установленное приложение похожим на нативное: набор иконок, который переживёт маскирование любого лончера, цвет темы под стать заставке и start URL, который открывает там, где пользователь ждёт. Ошибки здесь дают установленное приложение, которое выглядит явно незаконченным.

Ключевые идеи

Манифест подключается ссылкой и имеет минимальный набор полей

Сошлитесь на него из head документа, чтобы браузер мог его найти, и объявите хотя бы имя, короткое имя, start URL, режим отображения и иконку. Манифест, которому не хватает обязательного поля, просто игнорируется, и приглашение установить не появляется никогда.

<link rel="manifest" href="/manifest.webmanifest" />

{
  "name": "Field Notes",
  "short_name": "Notes",
  "start_url": "/app",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#0f172a",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

`display` решает, сколько браузера останется

standalone убирает адресную строку и даёт приложению собственное окно. minimal-ui оставляет немного обвязки, browser — обычная вкладка. Выбор меняет, сколько навигации должно построить само приложение, потому что кнопку «назад» после исчезновения обвязки уже не вернуть.

Устанавливаемость требует больше, чем манифест

Устанавливаемость требует защищённого происхождения, зарегистрированного service worker с обработчиком fetch и манифеста, который отвечает минимуму браузера. Правила менялись со временем и слегка различаются между браузерами, поэтому «устанавливаемо» стоит проверять на настоящем устройстве, а не предполагать.

Иконки должны пережить маскирование

Лончеры обрезают иконки под свои формы, а иногда хотят получить иконку, которая заполняет пространство содержимым в безопасной зоне. Дайте несколько размеров и рассмотрите maskable-иконку с объявленным назначением: иконка, обрезанная из логотипа во всю площадь, теряет края.

После установки правила меняются

У приложения нет адресной строки, поэтому навигация должна быть самодостаточной, а внешние ссылки должны открываться в браузере, а не подменять приложение. Состояние офлайна на плохом соединении становится обычным, а не исключением, а цвет темы и заставка теперь часть внешности продукта, а не деталь браузера.

Установку предлагают, а не требуют

Большинство браузеров требует жеста пользователя, прежде чем показать приглашение установить. Перехватите событие и покажите собственное приглашение в момент, который пользователь понимает, — после того как он успешно попользовался приложением; такой подход конвертирует куда лучше, чем просьба при первой загрузке.

Практика

Сделайте сайт устанавливаемым и проверьте на устройстве

Добавьте манифест с полным набором иконок и зарегистрированный service worker, затем установите сайт с телефона и запустите его с домашнего экрана.

Готово, когда: иконка не обрезана заметно, приложение открывается без браузерной обвязки, и start URL — тот экран, который вы задумали.

Обработайте состояние офлайна после установки

Отключите сеть и запустите установленное приложение.

Готово, когда: оно открывается, показывает состояние, осмысленное без соединения, и не выдаёт страницу ошибки браузера.

Частые ошибки

Отсутствие short_name — лончер обрезает полное имя до нечитаемого; исправить: задайте короткое имя, которое помещается.
Одна иконка одного размера — лончер масштабирует её, и результат выходит размытым или плохо обрезанным; исправить: дайте несколько размеров и maskable-вариант.
display: standalone без навигации — у пользователя нет кнопки «назад» и нет выхода; исправить: сделайте навигацию внутри приложения и открывайте внешние ссылки в браузере.
start_url на заставку или глубокий экран — приложение открывается не там, где пользователь ждал; исправить: стартуйте с экрана, осмысленного как домашний.
Приглашение установить при первом визите — просьбу отклоняют, и возможность потрачена; исправить: предлагайте установку после того, как у пользователя появилась причина её хотеть.

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

Service worker и офлайн (02-frontend/25-progressive-web-apps-pwa/01-service-workers-and-offline) — установка требует service worker, а поведение в офлайне и делает установленное приложение пригодным.
Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — установленное приложение работает при всех размерах от телефона до планшета.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — холодный старт с домашнего экрана — наименее снисходительная загрузка у PWA.