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 功能或呈現。