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

Пример 1 — Манифест с одной иконкой и без короткого имени

Сайт устанавливается, но лончер показывает обрезанное имя и иконку без краёв; скажите, какие поля за это отвечают, и опишите приложение как следует.

{
  "name": "Field Notes for Surveying Teams",
  "start_url": "/app",
  "display": "standalone",
  "icons": [{ "src": "/icons/logo.png" }]
}

Решение

{
  "name": "Field Notes for Surveying Teams",
  "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" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Полное имя — то, что лончер обрезает, поэтому short_name и есть поле, которое решает, узнаётся ли установленное приложение с первого взгляда. Единственную иконку лончеру приходится масштабировать и обрезать под свою форму; из-за этого логотип во всю площадь теряет края. А несколько объявленных размеров и один maskable-вариант помещают содержимое внутрь безопасной зоны; манифест, которому не хватает любого требуемого браузером поля, игнорируется целиком, и приглашение установить не появляется. Поэтому минимальный набор — имя, короткое имя, start URL, режим отображения и иконка с объявленным размером — стоит держать как чек-лист, а не как необязательную деталь.

Пример 2 — Установленное приложение без пути назад

Приложение открывается в собственном окне с глубокого экрана, и внутри нет ни адресной строки, ни кнопки «назад»; скажите, что убрал режим отображения, и верните навигацию, которую раньше давал браузер.

{ "name": "Field Notes", "short_name": "Notes", "start_url": "/app/settings/sync", "display": "standalone" }

Решение

{ "name": "Field Notes", "short_name": "Notes", "start_url": "/app", "display": "standalone" }

<nav aria-label="Основная навигация">
  <a href="/app">Главная</a>
  <a href="/app/settings">Настройки</a>
</nav>
<!-- внешние ссылки открываются в браузере, а не подменяют приложение -->
<a href="/help" target="_blank" rel="noopener">Справка</a>

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