Web App Manifest

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

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

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

Содержимое манифеста

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

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

    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-страницу, с помощью тега ссылки в заголовке вашего документа:

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

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

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

    Заставки

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

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

    Specification
    Web Application Manifest
    # shortcuts-member
    Web Share Target API
    # share_target-member
    Window Controls Overlay
    # addition-of-new-window-controls-overlay-display-mode
    Manifest Incubations
    # note_taking-member
    Web Application Manifest
    # short_name-member
    Web Application Manifest
    # dfn-fullscreen
    Web Application Manifest
    # dfn-standalone
    Manifest Incubations
    # url-member
    Web Application Manifest
    # scope-member
    Manifest Incubations
    # new_note_url-member
    Manifest Incubations
    # display_override-member
    Web Application Manifest
    # theme_color-member
    Web Application Manifest
    # dfn-minimal-ui
    Web Application Manifest
    # name-member
    Web App Manifest - Application Information
    # description-member
    Web Application Manifest
    # start_url-member
    Web Application Manifest
    # id-member
    Manifest Incubations
    # protocol_handlers-member
    Web App Launch Handler API
    # client_mode-member
    Manifest Incubations
    # file_handlers-member
    Web Application Manifest
    # related_applications-member
    Web Application Manifest
    # background_color-member
    Web Application Manifest
    # display-member
    Web Application Manifest
    # icons-member
    Manifest Incubations
    # protocol-member
    Web Application Manifest
    # dfn-browser
    Web Application Manifest
    # orientation-member
    Web Application Manifest
    # prefer_related_applications-member
    Web App Launch Handler API
    # launch_handler-member
    Manifest Incubations
    # dfn-tabbed

    Совместимость с браузерами

    Report problems with this compatibility data on GitHub
    desktopmobile
    Chrome
    Edge
    Firefox
    Opera
    Safari
    Chrome Android
    Firefox for Android
    Opera Android
    Safari on iOS
    Samsung Internet
    WebView Android
    WebView on iOS
    background_color
    description
    display
    display.browser
    display.fullscreen
    display.minimal-ui
    display.standalone
    display_override
    Experimental
    tabbed display mode
    Experimental
    window-controls-overlay display mode
    Experimental
    file_handlers
    Experimental
    icons
    id
    launch_handler
    Experimental
    launch_handler.client_mode
    Experimental
    name
    note_taking
    Experimental
    note_taking.new_note_url
    Experimental
    orientation
    prefer_related_applications
    Experimental
    protocol_handlers
    Experimental
    protocol_handlers.protocol
    Experimental
    protocol_handlers.url
    Experimental
    related_applications
    Experimental
    scope
    serviceworker
    ExperimentalNon-standard
    serviceworker.scope
    ExperimentalNon-standard
    serviceworker.src
    ExperimentalNon-standard
    serviceworker.use_cache
    ExperimentalNon-standard
    share_target
    Experimental
    short_name
    shortcuts
    start_url
    theme_color

    Legend

    Tip: you can click/tap on a cell for more information.

    Full support
    Full support
    Partial support
    Partial support
    No support
    No support
    Experimental. Expect behavior to change in the future.
    Non-standard. Check cross-browser support before using.
    See implementation notes.
    Has more compatibility info.