WebApp 之 manifest.json

1. 简述
   manifest.json 用于提供应用程序相关描述的文件（名称，作者，图标和描述）

2. 如何使用
   在HTML页面的头部，引入一个链接

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

3. 基础案例

{
  "start_url": "/",
  "name": "MyApp",
  "short_name": "MyApp",
  "icons": [
      {
          "src": "./icons/apple-touch-icon-180x180.png",
          "type": "image/png",
          "sizes": "180x180"
      },
      {
          "src": "./icons/apple-touch-icon-152x152.png",
          "type": "image/png",
          "sizes": "152x152"
      }
        // ...其他尺寸192、512
  ],
  "display": "standalone",
  "background_color": "#1b2740",
  "theme_color": "#1b2740"
}

4. 属性介绍
   只介绍部分常用的属性

name

WebApp的名称。

用户保存WebApp到桌面时，将作为App的名称。

short_name

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

"short_name": "I/O 2017"

icons

应用程序图标。

用户保存WebApp到桌面时，根据适配，将作为App的图标

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

启动WebApp时，默认进入的URL。

"start_url": "/home"

theme_color

定义应用程序的默认主题颜色。

修改电量/信号栏 背景颜色(需要浏览器支持)

"start_url": "/home"

background_color

web应用程序预定义的背景颜色。

启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

"background_color": "red"

description

Web应用程序的描述。

"description": "这是一个WebApp"

display

显示方式

"display": "standalone"

作者：Piszz
链接：https://www.jianshu.com/p/203fa80d245a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。