WebApp 之 manifest.json

1. 简述

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

2. 如何使用

在HTML页面的头部，引入一个链接

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

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

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

  "theme_color": "aliceblue"
  

• background_color

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

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

  "background_color": "red"
  

• description

  Web应用程序的描述。

  "description": "这是一个WebApp"
  

• display

  显示方式

  "display": "standalone"
  

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

5. 其他资料

• WebApp Mainifest规范
• Mainifest MDN文档
• 浏览器兼容性查询
• WebApp进阶之PWA