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

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

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

Манифест веб-приложения предоставляет информацию о приложении (такую как имя, авторство, иконку и описание) в формате 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.

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Нет Нет Нет Нет Нет
background_color Нет Нет Нет Нет Нет
theme_color Нет Нет Нет Нет Нет
 
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Нет 39.0 ? ? ? 32.0 ? 39.0
background_color Нет 46.0 [1] ? ? ? (Да) ? 46.0 [1]
theme_color Нет 46.0 [1] ? ? ? Нет ? 46.0 [1]

[1] Does not support lang or scope.

Метки документа и участники

 Внесли вклад в эту страницу: curdwithraisins
 Обновлялась последний раз: curdwithraisins,