MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

翻译正在进行中。

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

用于描述应用

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

有效值:

Display Mode Description Fallback Display Mode
fullscreen All of the available display area is used and no user agent chrome is shown. standalone
standalone The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. minimal-ui
minimal-ui The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. browser
browser The application opens in a conventional browser tab or new window, depending on the browser and platform. This is the default.  (None)

Note: You can selectively apply CSS to your app based on the display mode, using the display-mode media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon.

icons

Specifies an array of image objects that can serve as application icons in various contexts. For example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an OS's task switcher and/or system preferences.

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

Image objects may contain the following values:

Member Description
sizes A string containing space-separated image dimensions. 
src The path to the image file. If src is a relative URL, the base URL will be the URL of the manifest.
type A hint as to the media type of the image.The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.

lang

Specifies the primary language for the values in the name and short_name members. This value is a string containing a single language tag.

"lang": "en-US"

name

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

"name": "Google I/O 2017" 

orientation

Defines the default orientation for all the web application's top level browsing contexts.

​​"orientation": "portrait-primary"

Orientation may be one of the following values:

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

Specifies a boolean value that hints for the user agent to indicate to the user that the specified related applications (see below) are available, and recommended over the web application. This should only be used if the related native apps really do offer something that the web application can't do.

"prefer_related_applications": false

Note: If omitted, the value defaults to false.

Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.

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

Application objects may contain the following values:

Member Description
platform The platform on which the application can be found.
url The URL at which the application can be found.
id The ID used to represent the application on the specified platform.

scope

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied. If the user navigates the application outside the scope, it returns to being a normal web page.

If the scope is a relative URL, the base URL will be the URL of the manifest.

"scope": "/myapp/"

short_name

Provides a short human-readable name for the application. This is intended for use where there is insufficient space to display the full name of the web application.

"short_name": "I/O 2017"

start_url

Specifies the URL that loads when a user launches the application from a device. If given as a relative URL, the base URL will be the URL of the manifest.

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

theme_color

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS (e.g., on Android's task switcher, the theme color surrounds the application).  

"theme_color": "aliceblue"

初始屏幕

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: name, background_color, and the icon in the icons array that is closest to 128dpi for the device.

Mime类型

Manifests should be served using the application/manifest+json MIME type. However, it is optional to do so.  

规范

Specification Status Comment
Web App Manifest Working Draft Initial definition.

浏览器兼容性

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).

文档标签和贡献者

 此页面的贡献者: _da, xgqfrms-GitHub
 最后编辑者: _da,