Web 应用清单

Web 应用清单规范中定义的 web 应用清单是一个提供 web 应用信息的 JSON 文本文件。

Web 应用清单最常见的用途是提供浏览器在设备上安装渐进式 web 应用(PWA)所需的信息,如应用程序的名称和图标。

web 应用清单包含一个 JSON 对象,其中的顶级键称为成员

成员

本节列出了可能出现在清单中的成员。

在规范中,所有成员都是可选的,但有些应用要求某些成员必须存在。例如,PWA 必须提供某些清单成员

    备注: 部分成员,如 dirlangiarc_rating_idnote_taking 未经实现。

    示例清单

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

    部署清单

    web 应用清单可通过文档 <head> 中的 <link> 元素部署到 HTML 页面中:

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

    规范的媒体类型注册表部分指定了 .webmanifest 扩展名(清单文件的响应需返回 Content-Type: application/manifest+json)。浏览器通常支持带有其他适当扩展名的清单,如 .jsonContent-Type: application/json)。

    如果清单需要凭据才能获取,则必须将 crossorigin 属性设置为 use-credentials,即使清单文件与当前页面同源。

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

    启动画面

    在某些浏览器和操作系统中,已安装的 PWA 启动时会显示启动画面。该启动画面是自动生成的,其外观由 web 应用清单中的成员定义,具体如下:

    浏览器兼容性

    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.

    参见