简介

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

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

部署一个 manifest

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
指定name和short_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
prefer_related_applications

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

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

related_applications

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的本机应用程序 - 例如可通过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应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近128dpi的图标。

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

注：转自 https://developer.mozilla.org/zh-CN/docs/Web/Manifest

Web App Manifest相关推荐

iOS progressive Web App (PWA) 技术
随着 iOS 11.3 的发布,iOS + PWA 的时代终于来了!本文对 iOS 中 PWA 的能力进行了分析,并将其与 iOS 上的 Native App.Android 上的 PWA 进行了深度 ...
Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术——不就是chrome OS吗？...
什么是Progressive Web App? Progressive Web App是一个利用现代浏览器的能力来达到类似APP的用户体验的技术,由Google实现,让浏览器打开的网址像APP一样运行 ...
下一代 Web 应用模型 —— Progressive Web App (PWA)
今年 9 月份的时候,<程序员>杂志社就邀请我写一篇关于 PWA 的文章.后来花式拖稿,拖过了 10 月的 QCon,11 月的 GDG DevFest,终于在 12 月把这篇长文熬了出来 ...
下一代 Web 应用模型 — Progressive Web App
刚开始接触Progressive Web App,作为一名前端感觉这个挺有趣的,就想深入了解一下,下面这篇是转载自黄玄的一篇博客,算是简单了解一下. 今年 9 月份的时候,<程序员>杂志社 ...
下一代 Web 应用模型 —— Progressive Web App
今年 9 月份的时候,<程序员>杂志社就邀请我写一篇关于 PWA 的文章.后来花式拖稿,拖过了 10 月的 QCon,11 月的 GDG DevFest,终于在 12 月把这篇长文熬了出来 ...
PWA （ Progressiv Web App ）初探总结
[ PWA ] 今天开始 Research 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序.这个技术的呢是 Google 公司于2015 ...
PWA(Progressive Web App)入门系列：（一）PWA简介
前言 PWA做为一门Google推出的WEB端的新技术,好处不言而喻,但目前对于相关方面的知识不是很丰富,这里我推出一下这方面的入门教程系列,提供PWA方面学习. 什么是PWA PWA全称Progre ...
PWA（Progressive Web App）初探总结
[ PWA ] 今天开始 Research 一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序.这个技术的呢是 Google ...
PWA (Progressive Web App)
PWA (Progressive Web App) 1.简介是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生的功能,比如:通知推送 Js-to-Nati ...

Web App Manifest

简介