screenshots

语法

/* Single screenshot */
"screenshots": [
  {
    "src": "desktop.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
]

/* Two screenshots */
"screenshots": [
  {
    "src": "screenshots/home.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "form_factor": "wide",
    "label": "Home screen showing main navigation and featured content"
  },
  {
    "src": "screenshots/dashboard.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "ios",
    "label": "Dashboard view displaying key metrics"
  }
]

值

screenshots

一个对象数组。每个对象代表 Web 应用在常见使用场景下的截图。

每个截图对象可以有一个或多个属性。其中，只有 src 是必需的。可能的属性包括：

src

一个字符串，指定图片文件的路径。其格式与 icons 成员的 src 属性相同。

sizes 可选

一个字符串，指定图片的一个或多个尺寸。其格式与 icons 成员的 sizes 属性相同。

type 可选

一个字符串，指定图片的 MIME 类型。其格式与 icons 成员的 type 属性相同。

label 可选

一个字符串，表示截图对象的无障碍名称。保持描述性，因为它可以用作渲染截图的替代文本。为了无障碍访问，建议为每个截图指定此属性。

form_factor 可选

一个字符串，表示截图适用的广泛类别的设备的屏幕形状。仅当截图适用于特定屏幕布局时才指定此属性。如果未指定 form_factor，则截图被认为适用于所有屏幕类型。

有效值包括：

narrow

表示截图仅适用于窄屏设备，例如移动设备。

wide

表示截图仅适用于宽屏设备，例如台式电脑。

platform

一个字符串，表示截图适用的平台。仅当截图适用于特定设备或分发平台时才指定此属性。如果未指定 platform，则截图被认为适用于所有平台。

有效值包括：

类型	值	描述
操作系统	android	Google Android
	chromeos	Google ChromeOS
	ios	Apple iOS
	ipados	Apple iPadOS
	kaios	KaiOS
	macos	Apple macOS
	windows	Microsoft Windows
	xbox	Microsoft Xbox
分发平台	chrome_web_store	Google Chrome 网络应用商店
	itunes	iTunes 应用商店
	microsoft-inbox	预装于 Microsoft Windows
	microsoft-store	Microsoft Store
	play	Google Play Store

描述

screenshots 成员是补充元数据，不影响应用的运行时行为或浏览器如何展示应用。截图用于应用商店和其他分发平台，以向潜在用户展示您的应用的功能。

分发平台可以选择显示多少张截图。

Apple App Store 下方的图片展示了截图在 iPhone 应用列表中如何显示。在图库视图（左侧图片）中，用户可以水平滚动浏览多张图片。他们可以点按任何图片以全屏查看（右侧图片）。

iPad 上相同的全屏图片说明了为什么需要为窄屏（iPhone）和宽屏（iPad）设备因子提供不同的截图。

示例

为餐饮计划 Web 应用添加预览

此示例展示了如何为不同设备的餐饮计划应用添加截图。截图展示了应用的同一功能在桌面和移动设备上的不同视图。

{
  "name": "Meal Planner",
  "screenshots": [
    {
      "src": "screenshots/desktop-home.webp",
      "sizes": "1920x1080",
      "form_factor": "wide",
      "label": "Desktop view showing weekly meal calendar"
    },
    {
      "src": "screenshots/mobile-home.webp",
      "sizes": "750x1334",
      "form_factor": "narrow",
      "label": "Mobile view showing weekly meal calendar"
    }
  ]
}

规范

浏览器兼容性

screenshots 清单成员在发布和列出 Web 应用时由应用商店使用，因此浏览器兼容性不适用。虽然浏览器可能会解析此成员，但它是可选的，并且不影响应用的 PWA 功能或呈现。