Web 应用清单默认包含在 Create React 应用中,允许任何人在其设备上安装您的 React 应用。
默认情况下,Create React App (CRA) 包含一个 Web 应用清单。修改此内容 文件可用于更改安装后应用的显示方式 。
![手机主屏幕上的一个渐进式 Web 应用图标](https://web.developers.google.cn/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=0000&hl=hr)
为什么搜索渠道报告非常实用?
网络应用清单文件提供了相应功能,让您能够更改已安装的 用户在桌面设备或移动设备上的显示效果。通过修改 属性,那么您可以修改 包括其:
- 名称
- 说明
- 应用图标
- 主题颜色
MDN 文档 涵盖可以详细更改的所有属性。
修改默认清单
在 CRA 中,当创建新应用时,系统会自动包含默认的清单文件 /public/manifest.json
:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
这样,任何人都可以在自己的设备上安装该应用程序,
应用的默认详细信息HTML 文件 public/index.html
包含用于加载清单的 <link>
元素。
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
以下是使用 CRA 构建的应用示例,该应用的清单经过修改 文件:
如需了解在此示例中所有属性是否正常运行:
- 如需预览网站,请按查看应用。然后按
全屏
。
- 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
- 点击 Application 标签页。
- 在 Application 面板中,点击 Manifest 标签页。
总结
- 如果您正在构建您认为不需要安装到
移除相应 HTML 文件中的清单和
<link>
元素, 指向它。 - 如果您希望用户在其设备上安装此应用,请修改 (如您未使用 CRA,请创建一个) 属性。通过 MDN 文档 介绍了所有必需属性和可选属性。