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

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

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

手机主屏幕上的一个渐进式 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 标签页。

开发者工具的“Manifest”标签会显示应用清单文件中的属性。

总结

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