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

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Манифест веб-приложения предоставляет информацию о приложении (такую как имя, авторство, иконку и описание) в формате JSON-файла. Цель манифеста — установить веб-приложение на домашний экран устройства, предоставляя пользователю более быстрый доступ и больше возможностей.

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

Манифест может содержать следующие элементы:

Манифест веб-приложения внедряется в вашу HTML-страницу, с помощью тега ссылки в заголовке вашего документа:

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

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

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply 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": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Параметры

background_color

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

"background_color": "red"

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

description

Обеспечивает общее описание того, что делает приложение.

"description": "The app that helps you find the best food in town!"

dir

Определяет основное направление текста для свойств name, short_name и description. Вместе с lang, позволяет корректно отобразить языки, читающиеся справа налево.

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

Может быть одним из следующих значений:

  • ltr (слева направо)
  • rtl (справа налево)
  • auto (позволяет браузеру использовать двунаправленный алгоритм Unicode, чтобы сделать наилучшее предположение о направлении текста).

Заметка: Когда значение не указано, по умолчанию устанавливается auto.

display

Определяет предпочтительный для разработчика режим отображения приложения.

"display": "standalone"

Валидные значения следующие:

Режим отображения Описание Резервный режим отображения
fullscreen Используется все доступное пространство экрана и агент пользователя chrome не отображается. standalone
standalone Приложение будет выглядеть и ощущаться, как отдельное приложение. Это может включать наличие другого окна у приложения, собственной иконки в меню запуска и т.д. В этом режиме агент пользователя будет исключать элементы пользовательского интерфейса (ПИ) для контроля за навигацией, но может включать другие элементы ПИ, такие как статус-бар. minimal-ui
minimal-ui Приложение будет выглядеть и ощущаться, как отдельное приложение, но будет иметь минимальный набор элементов ПИ для контроля над навигацией. Элементы будут варьироваться в зависимости от браузера. browser
browser Приложение открывается в обычной вкладке браузера или новом окне, в зависимости от браузера и платформы. По умолчанию.  (None)

Заметка: Вы можете выборочно добавить CSS к вашему приложению, основываясь на режиме отображения, используя display-mode медиа-функцию. Это может быть использовано для предоставления более гладкого переходя для пользователя от загрузк сайта с URL и иконки на рабочем столе.

icons

Определяет массив объектов изображений, которые могут использованы как иконки приложения в различных контекстах. К примеру, они могут быть использованы для представления приложения среди списка других приложений или для интеграции его с переключателем задач ОС и/или настроек системы.

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

Объекты изображений могут содержать следующие значения:

Параметр Описание
sizes Строка, содержащая разделенные пробелами размеры изображения. 
src Путь к файлу изображения. Если src является относительным URL, основым URL будет URL манифеста.
type Служит для определения медиа-типа изображения.Цель свойства позволить агенту пользователя быстро проигнорировать изображения медиа-типа, который он не поддерживет.

lang

Определяет основной язык параметров name и short_name. Является строкой, содержащей единственный языковой тег.

"lang": "en-US"

name

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

"name": "Google I/O 2015" 

orientation

Определяет ориентацию по умолчанию для всех верхних уровней контекстов браузера приложения.

​​"orientation": "portrait-primary"

Может иметь одно из следующих значений:

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

Определяет значение типа boolean, которое указывает пользовательскому агенту сообщать пользователю о наличии родственного приложения (смотри ниже), и рекомендовать его вместо веб-приложения. Должно быть использовано только в том случае, если родственное приложение на самом деле может выполнить что-то, на что не способно веб-приложение.

"prefer_related_applications": false

Заметка: Если не указано, по умолчанию false.

Определяет массив "объектов приложений", представляющих нативные приложения, которые могут быть установлены или доступны определенной платформе — например, нативное Android-приложение доступно через Google Play Store. Такие приложени предназначены быть альтернативой для веб-приложений, которые предоставляют подобный или эквивалентный функционал — как нативная версия веб-приложения.

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

Объекты приложения могут содержать следующие значения:

Свойство Описание
platform Платформа, на которой может быть найдено приложение.
url URL, по которому может быть найдено приложение.
id ID, используемое для представления приложения на определенной платформе.

scope

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

Если область относительный URL, базовым URL будет URL манифеста.

"scope": "/myapp/"

short_name

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

"short_name": "I/O 2015"

start_url

Определяет URL, который загружается, когда пользователь запустил приложение с устройства. Если относительный URL, базовый URL будет URL манифеста.

"start_url": "./?utm_source=web_app_manifest"

theme_color

Определяет цвет темы по умолчанию для приложения. Иногда влияет на то, как приложение отображается ОС (например, в переключателе задач Android цвет темы окружает приложение).  

"theme_color": "aliceblue"

Заставки

В Chrome 47 и более поздних версиях заставки отображаются при загрузке веб-приложения с домашнего экрана. Эти заставки автоматически генерируются с использованием свойств, указанных в манфесте приложения, например: name, background_color и иконки в массиве icons, которые ближе к 128dpi для устройства.

MIME-тип

Манифест должен использовать application/manifest+json MIME-тип. Однако, это не обязательно.

Спецификации

Спецификация Статус Комментарий
Web App Manifest Рабочий черновик Initial definition.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background_color
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка 46
Замечания
Полная поддержка 46
Замечания
Замечания Does not support lang or scope.
Chrome Android Полная поддержка 46
Замечания
Полная поддержка 46
Замечания
Замечания Does not support lang or scope.
Firefox Android ? Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android Полная поддержка 5.0
Замечания
Полная поддержка 5.0
Замечания
Замечания Does not support lang or scope.
categories
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
description
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
dir
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
display
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 47Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
iarc_rating_id
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
icons
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания By default, used for as the source for "Add to home screen" (see bug 1234558).
Отключено From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
lang
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
name
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания By default, used for as the source for "Add to home screen" (see bug 1234558).
Отключено From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
orientation
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
prefer_related_applications
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
related_applications
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scope
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
screenshots
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
serviceworker
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
short_name
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания By default, used for as the source for "Add to home screen" (see bug 1234558).
Отключено From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да
start_url
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
theme_color
Экспериментальная
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 53
Замечания Отключено
Полная поддержка 53
Замечания Отключено
Замечания By default, used for as the source for "Add to home screen" (see bug 1234558).
Отключено From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.