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

默认情况下，Web 应用清单包含在 Create React App 中，任何人都可以在其设备上安装您的 React 应用。

Houssein Djirdeh

默认情况下，Create React App (CRA) 包含一个 Web 应用清单。通过修改此文件，您可以更改应用安装在用户设备上时的显示方式。

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

通过 Web 应用清单文件，您可以更改已安装应用在用户的桌面设备或移动设备上的外观。通过修改 JSON 文件中的属性，您可以修改应用中的多项详细信息，包括：

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

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 构建的应用的示例，该应用包含经过修改的清单文件：

如需了解此示例中的所有属性是否都能正常运行，请执行以下操作：

• 如需预览网站，请按查看应用，然后按全屏 。
• 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
• 点击 Application（应用）标签页。
• 在 Application（应用）面板中，点击 Manifest（清单）标签页。

总结

1. 如果您认为网站不需要安装到设备上，请在指向该网站的 HTML 文件中移除相应清单和 <link> 元素。
2. 如果您希望用户在其设备上安装应用，请修改清单文件（如果您未使用 CRA，请创建一个清单文件），其中包含您喜欢的任何属性。MDN 文档解释了所有必需属性和可选属性。