NodeJS site.webmanifest文件的主要用途是什么?

polhcujo  于 2022-12-29  发布在  Node.js
关注(0)|答案(2)|浏览(365)

我正在使用HTML样板文件,看到一个名为site.webmanifest的文件。我在Internet上搜索了信息,但不了解它的用法。
它是网页开发中的强制性文件吗?何时以及为什么使用它?我如何知道何时必须使用它?

46qrfjad

46qrfjad1#

请参阅文档here
它不是一个必需的文件。当你设计一个可以离线运行的web应用程序时,你需要或者应该使用它。例如whatsapp web,todoist webapp,amazon webapp等等。
Web应用清单是一系列称为渐进式Web应用(PWA)的Web技术的一部分,PWA是可以安装到设备主屏幕上而无需应用商店的网站。与带有简单主屏幕链接或书签的常规Web应用不同,PWA可以提前下载,可以离线工作,也可以使用常规Web API。
Web应用程序清单以JSON文本文件的形式提供有关Web应用程序的信息,这是下载Web应用程序并将其呈现给用户(类似于本机应用程序)所必需的(例如,安装在设备的主屏幕上,为用户提供更快的访问和更丰富的体验)。PWA清单包括其名称、作者、图标(s)、版本、描述和所有必要资源的列表(以及其他内容)。

uxhixvfz

uxhixvfz2#

"这就是我的理解"
site.webmanifest基本上是一个JSON文件,它被Android设备(苹果使用apple-touch-icon)用来查找一些参数(favicon、主题颜色、应用的长名和短名),以便在移动或平板设备上正确显示应用。此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的很棒的article,如果你想深入的话。
所以,
它是网页开发中的强制性文件吗?
不需要,你的Web应用在没有它的情况下也能正常工作。但强烈建议使用它来改善每台设备上的用户体验。
何时以及为何使用?
它允许您的Web应用用作PWA并改善用户体验。
我怎么知道什么时候该用呢?
如果您的应用由某类人使用,并且您100%确定他们不需要(并且不想)使用PWA功能,您可能不应该关心它。例如,如果您正在构建企业B2B管理 Jmeter 板或门户,您很可能不需要PWA。但如果您正在构建互联网上任何人都可以使用的应用程序(例如Trello、Notion、GitHub),你应该关心它。

相关问题