WebApp 之 manifest.json
2019-11-28 本文已影响0人
Piszz
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
定义应用程序的默认主题颜色。
修改电量/信号栏 背景颜色(需要浏览器支持)
"theme_color": "aliceblue"
-
background_color
web应用程序预定义的背景颜色。
启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
"background_color": "red"
-
description
Web应用程序的描述。
"description": "这是一个WebApp"
-
display
显示方式
"display": "standalone"fullscreen全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏 standalonestandalone让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。 minimal-uiminimal-ui该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。 样式因浏览器而异。 browserbrowser该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。 这是默认的设置。
