WebApp 之 manifest.json

简述
manifest.json 用于提供应用程序相关描述的文件（名称，作者，图标和描述）
如何使用
在HTML页面的头部，引入一个链接

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

基础案例

{"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"
}

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

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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

WebApp 之 manifest.json相关推荐

2020年之HBuilderX manifest.json配置最全详解
转自 duanshuilu.com 以下是HBuilderX manifest.json配置说明大全,涉及的较全面,如果不方便查看: 可以直接 Ctrl+ F 在页面查找相应字段配置. 概述 man ...
html5 manifest 安卓,移动APP配置文件 manifest.json 讲解（附视频）
Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称.图标.应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置5+ ...
ios html mainfest,Manifest.json文档说明 manifest配置
概述\n Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称.图标.应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配 ...
manifest.json 解析--手机web app开发笔记（三-1）
在HBuilderX生成的文档中,还有一个"manifest.json",只要是创建"移动App"应用,都会在工程下生成这个文件,一看扩展名就知道他是一个jso ...
UI5(三)Component.js. manifest.json应用程序描配置
其实SAPUI5,是可以把这些东西配置封装到Component.js文件中的,每当我们访问资源时,我们现在都将相对于组件(而不是相对于组件)进行操作.这种架构上的变化使我们的应用程序可以在比静态应用程 ...
SAPUI5学习第四天-----（07）应用程序描述符，manifest.json！
Descriptor for Applications 官网代码 manifest.json 所有特定于应用程序的配置设置现在将进一步放在名为manifest.json的单独描述符文件中.这清楚地将应 ...
SAP UI5 如何通过 manifest.json 文件定义第三方库依赖关系
Jerry 之前的文章如何在 SAP UI5 应用中集成第三方库 :一个在移动设备上查看 Web 应用打印调试信息的小技巧介绍了一种 SAP UI5 定义并使用第三方库的技巧. 之后,我的技术交流 ...
SAP Fiori Elements 应用的 manifest.json 文件运行时如何被解析的
在 HTML 页面里,有一个 script 标签,locate-reuse-libs.js, 这个 JavaScript 文件触发 manifest.json 的加载与解析: 在加载的 manifes ...
SAP Fiori Elements 应用 manifest.json 文件里 resources.json 的含义
在使用 Visual Studio Code Fiori Tools 生成的 SAP Fiori Elements 应用里,在工程描述文件 manifest.json 里,有这样一个字段: &quo ...

WebApp 之 manifest.json

WebApp 之 manifest.json相关推荐

最新文章

热门文章