Web App Manifest

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

Манифесты веб-приложений являются частью набора веб-технологий, называемых прогрессивными веб-приложениями (PWA, progressive web apps), представляющими собой веб-сайты, которые можно установить на домашний экран устройства без магазина приложений. В отличие от обычных веб-приложений с простыми ссылками на домашний экран или закладками, PWA можно загружать заранее и работать в автономном режиме, а также использовать обычные Web API.

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

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

{
  "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"
  }]
}

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

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

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

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

Заставки

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

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

Спецификация Статус Комментарий
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 Полная поддержка Да

Легенда

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