manifest
使用步骤
1 新建一个 manifest.json 文件
2 在 index.html 引入 manifest.json 文件
3 在 manifest.json 文件中提供常见的配置
4 需要在 https 协议或者 http://localhost 下访问项目
<link rel="manifest" href="manifest.json">
配置地址:
https://developer.mozilla.org/zh-CN/docs/Web/Manifest
name: 应用的名称,启动画面的文字
short_name: 短名称
start_url: 启动页加载的URL,可以是绝对路径和相对路径 => 'index.html'
icons: 应用图标 144*144
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "images/touch/homescreen72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "images/touch/homescreen96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "images/touch/homescreen144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/touch/homescreen168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}],
background_color: 应用的背景色
theme_color: 主题颜色
display: 指定显示模式
fullscreen 全屏显示 没有导航头部
standalone 让这个应用看起来更像是一个独立的应用程序, 推荐配置这个
minimal-ui 浏览器会显示地址栏
-------------------
{
"name":"豆瓣APP-PWA",
"short_name": "豆瓣APP",
"start_url":"/index.html",
"icons":[
{
"src": "images/1.png",
"sizes": "144x144",
"type": "image/png"
}
],
"background_color":"skyblue",
"theme_color":"yellow",
"dislplay": "standalone"
}