Манифесты веб-приложений

Манифест веб-приложения , определенный в спецификации манифеста веб-приложения , представляет собой текстовый файл JSON , предоставляющий информацию о веб-приложении.

Чаще всего манифест веб-приложения используется для предоставления информации, необходимой браузеру для установки прогрессивного веб-приложения (PWA) на устройство, например имени и значка приложения.

Манифест веб-приложения содержит один объект JSON, в котором ключи верхнего уровня называются элементами .

Члены

В этом разделе перечислены элементы, которые могут отображаться в манифесте.

Все элементы являются необязательными в спецификации, но некоторые приложения требуют присутствия некоторых членов. Например, PWA должны предоставлять определенные элементы манифеста .

фоновый цвет
категории
описание
отображать
display_override
файловые_обработчики
иконки
идентификатор
launch_handler
имя
ориентация
предпочтительные_связанные_приложения
протокол_обработчики
связанные_приложения
объем
скриншоты
сервисный работник
share_target
короткое имя
ярлыки
start_url
тема_цвет

Пример манифеста JSON

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

Развертывание манифеста

Манифесты веб-приложений развертываются на ваших HTML-страницах с помощью <link>элемента в <head>документе:

HTML

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

Расширение .webmanifest указывается в разделе регистрации типа носителя спецификации (ответ файла манифеста должен возвращать Content-Type: application/manifest+json). Браузеры обычно поддерживают манифесты с другими соответствующими расширениями, такими как .json( Content-Type: application/json).

Если для получения манифеста требуются учетные данные, crossoriginдля атрибута должно быть установлено значение use-credentials, даже если файл манифеста находится в том же источнике, что и текущая страница.

HTML

<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

Заставки

В некоторых браузерах и операционных системах при запуске установленного PWA отображается заставка. Этот экран-заставка создается автоматически, и его внешний вид определяется членами манифеста веб-приложения, а именно:

name
background_color
icons