使用 Create React App 添加 Web 应用清单

Web 应用清单默认包含在 Create React 应用中，允许任何人在其设备上安装您的 React 应用。

Houssein Djirdeh

注意 ：如果您不知道 Web 应用清单文件的工作原理，请先参阅添加 Web 应用清单指南。

默认情况下，Create React App (CRA) 包含一个 Web 应用清单。修改此内容 文件可用于更改安装后应用的显示方式 。

为什么搜索渠道报告非常实用？

网络应用清单文件提供了相应功能，让您能够更改已安装的 用户在桌面设备或移动设备上的显示效果。通过修改 属性，那么您可以修改 包括其：

• 名称
• 说明
• 应用图标
• 主题颜色

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 标签页。

总结

1. 如果您正在构建您认为不需要安装到 移除相应 HTML 文件中的清单和 <link> 元素， 指向它。
2. 如果您希望用户在其设备上安装此应用，请修改 （如未使用 CRA，请创建一个） 属性。通过 MDN 文档 介绍了所有必需属性和可选属性。