manifest 的目的是将Web应用程序安装到设备的主屏幕,为用户提供更快的访问和更丰富的体验。 —— MDN
short_name
其实是该应用的一个简称。一般来说,当没有足够空间展示应用的name
时,系统就会使用short_name
。可以看到本文的例子中,图书搜索这个应用在桌面上展示的名称就是short_name
书查。start_url
为/
,访问根目录。display
控制了应用的显示模式,它有四个值可以选择:fullscreen
、standalone
、minimal-ui
和browser
。fullscreen
:全屏显示,会尽可能将所有的显示区域都占满;standalone
:独立应用模式,这种模式下打开的应用有自己的启动图标,并且不会有浏览器的地址栏。因此看起来更像一个Native App;minimal-ui
:与standalone
相比,该模式会多出地址栏;browser
:一般来说,会和正常使用浏览器打开样式一致。fullscreen
模式下会默认隐藏。portrait-primary
。具体的值包括:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
。icons
用来指定应用的桌面图标。icons本身是一个数组,每个元素包含三个属性:background_color
是在应用的样式资源为加载完毕前的默认背景,因此会展示在开屏界面。background_color
加上我们刚才定义的icons
就组成了Web App打开时的“开屏图”。<meta name="theme-color" content="#5eace0"/>
apple-touch-icon
:桌面图标,通过在head中添加<link rel="apple-touch-icon" href="your_icon.png">
即可。其中还可以添加sizes属性,来指示系统使用在各类平台(iphone、ipad…)中使用最合适的图标apple-mobile-web-app-title
:应用的标题。注意,这里需要使用meta标签<meta name="apple-mobile-web-app-title" content="AppTitle">
apple-mobile-web-app-capable
:类似于manifest中的display的功能,通过设置为yes可以进入standalone模式,同样也是meta标签<meta name="apple-mobile-web-app-capable" content="yes">
apple-mobile-web-app-status-bar-style
:这会改变iOS移动设备的状态栏的样式,并且只有在standalone模式中才会有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">
,不过在iPhoneX上black会导致状态栏不显示任何东西。application-name
:指明了app的名称msapplication-TileColor
:指明了“tile”的背景颜色msapplication-xxxlogo
:不同大小的“tile”所使用的图标,包括这几种:msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo