站点.webmanifest文件的主要用途是什么？

Question

我正在使用HTML模板，看到一个名为site.webmanifest的文件。我在互联网上搜索了相关信息，但仍不理解其用途。

它是否是开发网页时必需的文件？它是何时和为什么被使用？我如何知道何时需要使用它？

- JusitoFelix

---

https://developer.mozilla.org/zh-CN/docs/Web/Manifest 可以回答你所有的问题。 - CBroe

另外，假设您指的是这个链接：https://github.com/h5bp/html5-boilerplate/blob/ffd36de013ff00e2623c6ea35675b1c4763a4524/src/doc/html.md#web-app-manifest - 基本的解释就在那里。 - CBroe

这允许在移动设备上保存的网站或Web应用程序的UI上获得更大的控制权。我可以给您举个例子，并回答您提出的所有问题吗？ @CBroe - JusitoFelix

Answer 1

请参考此处的文档。

它不是一个必要的文件。当您设计可以离线运行的Web应用程序时，需要使用它或应该使用它。例如：WhatsApp Web、Todoist Web应用程序、Amazon Web应用程序等。

Web应用清单是渐进式Web应用程序（PWA）技术集合的一部分，这些网站可以在没有应用商店的情况下安装到设备的主屏幕上。与具有简单主屏幕链接或书签的常规Web应用程序不同，PWA可以提前下载并可以离线工作，并且可以使用常规Web API。

Web应用清单以JSON文本文件的形式提供有关Web应用程序的信息，这对于Web应用可以像本机应用程序一样被下载和呈现给用户（例如安装在设备的主屏幕上，为用户提供更快的访问和更丰富的体验）是必需的。PWA清单包括其名称、作者、图标、版本、描述以及所有必要资源的列表（以及其他内容）。

- Mayank Kumar Chaudhari

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有一篇关于网站图标和Web应用清单的优秀文章，如果您想深入了解，请参考 这里。

那么，

在开发网页时，它是强制性文件吗？

不是的，没有它您的Web应用程序也可以正常工作。但是为了提高用户体验，强烈建议使用它。

何时以及为什么要使用它？

它可以让您的Web应用程序成为PWA并改善用户体验。

如何知道何时必须使用它？

如果您的应用程序只针对某些人群，并且您100％确定他们不需要（也不想）使用PWA功能，则可能不需要关心它。例如，如果您正在构建企业B2B管理仪表板或门户网站，则大多数情况下不需要PWA。但是，如果您正在构建任何互联网用户都可以使用的应用程序（例如Trello，Notion，GitHub），则应该关注它。

- pkirilin