创建manifest.webmanifest文件
清单文件可以具有任何名称，但通常是manifest.webmanifest从根目录（您网站的顶级目录）来命名 和提供的。
{
"short_name": "Weather",
"name": "Weather: Do I need an umbrella?",
"description": "Weather forecast information",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "How's weather today?",
"short_name": "Today",
"description": "View weather information for today",
"url": "/today?source=pwa",
"icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
},
{
"name": "How's weather tomorrow?",
"short_name": "Tomorrow",
"description": "View weather information for tomorrow",
"url": "/tomorrow?source=pwa",
"icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
}
]
}
short_name或name
您必须至少提供short_name或name属性。如果同时提供了两者，short_name则在用户的主屏幕，启动器或其他空间可能受限的地方使用。name在安装应用程序时使用。
icons
对于Chrome，您必须至少提供192×192像素的图标和512×512像素的图标
要使用 可屏蔽图标（有时在Android上称为自适应图标），您还需要添加”purpose”: “any maskable”到 icon属性
start_url
并告诉在那里，当它启动你的应用程序应该启动浏览器
display
- fullscreen 在没有任何浏览器UI的情况下打开Web应用程序，并占用了整个可用显示区域
- standalone 打开Web应用程序，使其看起来和感觉都像一个独立的本机应用程序
- minimal-ui 此模式类似于standalone，但是为用户提供了用于控制导航
- browser
scope
注意： 如果用户单击应用程序中位于之外 scope的链接，则该链接将在现有PWA窗口中打开并呈现。如果要在浏览器选项卡中打开链接，则必须添加target=”_blank” 到 a 标签中。在Android设备上，与的链接target="_blank"将在Chrome自定义标签中打开
将网络应用清单添加到您的页面
标签添加到Progressive Web App的所有页面
<link rel="manifest" href="/manifest.webmanifest">