Web App Manifest

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序,而不需要用户通过应用商店,伴随着其他功能, 比如离线可用和接收推送通知。

Web应用程序清单部署在您的HTML页面中,使用在你的文件的头部的一个链接标记:

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

manifest 范例 

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

为web应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前,当加载manifest,浏览器可以用来绘制web应用程序的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

"background_color": "red"

注意:background_color只是在web应用程序加载时提高用户体验,而当web应用程序的样式表可用时,不能替代作为背景颜色使用。

description

提供有关Web应用程序的一般描述。

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

dir

指定名称、短名称和描述成员的主文本方向。与lang一起配置,可以帮助正确显示右到左文本。

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

可选值:

  • ltr (由左到右)
  • rtl (由右到左)
  • auto (由浏览器自动判断。

注意:当省略时,默认为auto

display

定义开发人员对Web应用程序的首选显示模式。

"display": "standalone"

有效值:

显示模式 描述 后备显示模式
fullscreen 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome standalone
standalone 让这个应用看起来像一个独立的应用程序,包括具有不同的窗口,在应用程序启动器中拥有自己的图标等。这个模式中,用户代理将移除用于控制导航的UI元素,但是可以包括其他UI元素,例如状态栏。 minimal-ui
minimal-ui 该应用程序将看起来像一个独立的应用程序,但会有浏览器地址栏。 样式因浏览器而异。 browser
browser 该应用程序在传统的浏览器标签或新窗口中打开,具体实现取决于浏览器和平台。 这是默认的设置。 (None)

Note: 您可以使用显示模式媒体功能,根据显示模式选择性地将CSS应用到您的应用程序。 这可用于在从URL启动网站和从桌面图标启动网站之间提供一致的用户体验。

icons

指定可在各种环境中用作应用程序图标的图像对象数组。 例如,它们可以用来在其他应用程序列表中表示Web应用程序,或者将Web应用程序与OS的任务切换器和/或系统偏好集成在一起。

"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将是manifest的URL。
type 提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。

lang

指定nameshort_name成员中的值的主要语言。 该值是包含单个语言标记的字符串。

"lang": "en-US"

name

为应用程序提供一个人类可读的名称,例如在其他应用程序的列表中或作为图标的标签显示给用户。

"name": "Google I/O 2017" 

orientation

定义所有Web应用程序顶级的默认方向 browsing contexts.

​​"orientation": "portrait-primary"

方向可以是以下值之一:

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

指定一个布尔值,提示用户代理向用户指示指定的相关应用程序(请参见下文)可用,并建议通过Web应用程序。 只有当相关的本地应用程序确实提供了某些Web应用程序无法做到的事情时,才应该使用它。

"prefer_related_applications": false

Note: 如果省略,默认设置为 false.

指定一个“应用程序对象”数组,代表可由底层平台安装或可访问的本机应用程序 - 例如可通过Google Play Store获取的原生Android应用程序。 这样的应用程序旨在替代提供类似或等同功能的Web应用程序 - 就像Web应用程序的本机应用程序版本一样。

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

应用程序对象可能包含以下值:

Member Description
platform 可以找到应用程序的平台。
url 可以找到应用程序的URL。
id 用于表示指定平台上的应用程序的ID。

scope

定义此Web应用程序的应用程序上下文的导航范围。 这基本上限制了manifest可以查看的网页。 如果用户在范围之外浏览应用程序,则返回到正常的网页。

如果scope是相对URL,则基本URL将是manifest的URL。

"scope": "/myapp/"

short_name

为应用程序提供简短易读的名称。 这是为了在没有足够空间显示Web应用程序的全名时使用。

"short_name": "I/O 2017"

start_url

指定用户从设备启动应用程序时加载的URL。 如果以相对URL的形式给出,则基本URL将是manifest的URL。

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

theme_color

定义应用程序的默认主题颜色。 这有时会影响操作系统显示应用程序的方式(例如,在Android的任务切换器上,主题颜色包围应用程序)。

"theme_color": "aliceblue"

初始屏幕

在Chrome 47及更高版本中,从主屏幕启动的Web应用程序将显示启动画面。 这个启动画面是使用Web应用程序清单中的属性自动生成的,具体来说就是:namebackground_color以及icons 中距设备最近128dpi的图标。

Mime类型

Manifests 应使用 application/manifest+json MIME 类型. 但是, 你不必非得这样做.

规范

Specification Status Comment
Web App Manifest Working Draft Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 39.0 ? ? 32.0 ? 39.0
background_color 未实现 46.0[1] ? ? (Yes) ? 46.0 [1]
theme_color 未实现 46.0[1] ? ? 未实现 ? 46.0 [1]
icons, name, short_name, and theme_color used for Add to home screen feature. ? (Yes) 53.0 (53)[2] ? 未实现 ? (Yes)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 未实现 未实现 未实现 未实现 未实现

[1] Does not support lang or scope.

[2] The icons, name, short_name, and theme_color fields of the Web App Manifest (if present) can now be as the source of the homescreen/apps window icons, apps window title, homescreen icon title, and apps window color (respectively) for "Add to home screen" (Firefox Mobile only; see bug 1234558).