site.webmanifest 文件主要用途是什么？

Question

我正在使用 HTML 样板，我看到一个名为

site.webmanifest

的文件。网上查了资料，不明白有什么用。

是网页开发中的强制文件吗？何时以及为何使用它？我怎么知道什么时候必须使用它？

Answer 1

请参阅文档此处。

这不是必需的文件。您需要使用它，或者在设计可以离线运行的 Web 应用程序时应该使用它。例如whatsapp web、todoist webapp、amazon webapp 等。

Web 应用程序清单是称为 Web 技术集合的一部分 渐进式网络应用程序 (PWA)，是可以安装的网站 到没有应用程序商店的设备的主屏幕。与常规网络应用程序不同 通过简单的主屏幕链接或书签，PWA 可以在 先进，可以离线工作，以及使用常规的 Web API。

Web 应用程序清单提供了有关 Web 应用程序的信息 JSON 文本文件，下载和运行 Web 应用程序所必需的 与本机应用程序类似地呈现给用户（例如，安装在 设备的主屏幕，为用户提供更快的访问和 经验更丰富）。 PWA 清单包括其名称、作者、图标、 所有必要资源的版本、描述和列表（其中 其他事情）。

Answer 2

我是这么理解的

site.webmanifest

基本上是一个 JSON 文件，Android 设备（Apple 使用

apple-touch-icon

）使用它来查找一些参数（图标、主题颜色、应用程序的长短名称）以显示您的应用程序正确地在您的移动或平板设备上。此 JSON 文件的格式应与 PWA 兼容。

例如，您想将一些网站添加到设备的主屏幕并将其用作常规（预安装的本机）应用程序。如果网站没有 webmanifest 文件，您的设备将无法确定网站图标，因此必须显示丑陋的默认图标。这对用户体验不好。

site.webmanifest

的简化示例如下所示：

{
  "name": "<your app name>",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Andrey Sitnik 有一篇关于 favicon 和 webmanifest 的精彩文章，如果您想深入了解的话。

那么，

是网页开发中的强制文件吗？

不，如果没有它，您的网络应用程序也可以正常工作。但强烈建议使用它来改善每个设备上的用户体验。

何时以及为何使用它？

它可以让您的网络应用程序用作 PWA 并改善用户体验。

我怎么知道什么时候必须使用它？

如果您的应用程序由某些类别的人使用，并且您 100% 确定他们不需要（也不想）使用 PWA 功能，那么您可能不应该关心它。例如，如果您正在构建企业 B2B 管理仪表板或门户，您很可能不需要 PWA。但如果您正在构建一个可供互联网上任何人使用的应用程序（例如 Trello、Notion、GitHub），您应该关心它。