Web 应用程序清单在一个 JSON 文本文件中提供有关应用程序的信息(如名称,作者,图标和描述)。manifest 的目的是将 Web 应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。
Web 应用程序清单是被称为渐进式 Web 应用程序 (PWA)的 Web 技术集合的一部分,它们是可以安装到设备的主屏幕的网络应用程序,而不需要用户通过应用商店,伴随着其他功能,比如离线可用和接收推送通知。
在 minifest 文件中定义那些需要缓存的文件,支持 manifest 的浏览器,会将按照manifest 文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面
特点
- 离线浏览: 用户可以在离线状态下浏览网站内容
- 更快的速度: 因为数据被存储在本地,所以速度会更快
- 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源
使用
<link rel="manifest" href="/manifest.json">
属性
background_color
为 web 应用程序预定义的背景颜色
description
提供有关 Web 应用程序的一般描述
dir
指定名称、短名称和描述成员的主文本方向
display
定义开发人员对 Web 应用程序的首选显示模式
| 显示模式 | 描述 | 后备显示模式 |
|---|---|---|
fullscreen | 全屏显示,所有可用的显示区域都被使用,并且不显示状态栏chrome。 | standalone |
standalone | 让这个应用看起来像一个独立的应用程序,包括具有不同的窗口,在应用程序启动器中拥有自己的图标等。这个模式中,用户代理将移除用于控制导航的 UI 元素,但是可以包括其他 UI 元素,例如状态栏。 | minimal-ui |
minimal-ui | 该应用程序将看起来像一个独立的应用程序,但会有浏览器地址栏。样式因浏览器而异。 | browser |
browser | 该应用程序在传统的浏览器标签或新窗口中打开,具体实现取决于浏览器和平台。这是默认的设置。 | (None) |
icons
指定可在各种环境中用作应用程序图标的图像对象数组
| 字段 | 描述 |
|---|---|
sizes | 包含空格分隔的图像尺寸的字符串。 |
src | 图像文件的路径。如果src是一个相对 URL,则基本 URL 将是 manifest 的 URL。 |
type | 提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。 |
lang
指定name和short_name成员中的值的主要语言
name
为应用程序提供一个人类可读的名称
orientation
定义所有 Web 应用程序顶级的默认方向
- any
- natural
- landscape
- landscape-primary
- landscape-secondary
- portrait
- portrait-primary
- portrait-secondary
prefer_related_applications
指定一个布尔值,提示用户代理向用户指示指定的相关应用程序可用,并建议通过 Web 应用程序。
related_applications
指定一个“应用程序对象”数组,代表可由底层平台安装或可访问的本机应用程序 - 例如可通过 Google Play Store 获取的原生 Android 应用程序。
| Member | Description |
|---|---|
platform | 可以找到应用程序的平台。 |
url | 可以找到应用程序的 URL。 |
id | 用于表示指定平台上的应用程序的 ID。 |
scope
定义此 Web 应用程序的应用程序上下文的导航范围
short_name
为应用程序提供简短易读的名称
start_url
指定用户从设备启动应用程序时加载的 URL
theme_color
定义应用程序的默认主题颜色
更新
-
更新 manifest 文件
版本号,时间戳、md5
-
清除浏览器缓存
注意事项
- 浏览器对缓存数据的容量限制可能不太一样
- 如果 manifest 文件,或者内部列举的某一个文件不能正常下载,整个更新过程都将失败,浏览器继续全部使用老的缓存
- 引用 manifest 的 html 必须与 manifest 文件同源,在同一个域下
- 当一个资源被缓存后,该浏览器直接请求这个绝对路径也会访问缓存中的资源
- 站点中的其他页面即使没有设置 manifest 属性,请求的资源如果在缓存中也从缓存中访问
- 当 manifest 文件发生改变时,资源请求本身也会触发更新