Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/screenshots below:

screenshots - Web application manifest

The screenshots manifest member lets you specify one or more images that showcase your web application. These images help users preview your web app's interface and features in app stores.

Note: The screenshots member is optional, and app stores may not display these images when presenting your app.

/* 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

An array of objects. Each object represents a screenshot of the web app in a common usage scenario.

Each screenshot object can have one or more properties. Of these, only src is required. The possible properties include:

src

A string that specifies the path to the image file. It has the same format as the icons member's src property.

sizes Optional

A string that specifies one or more sizes of the image. It has the same format as the icons member's sizes property.

type Optional

A string that specifies the MIME type of the image. It has the same format as the icons member's type property.

label Optional

A string that represents the accessible name of the screenshot object. Keep it descriptive because it can serve as alternative text for the rendered screenshot. For accessibility, it is recommended to specify this property for every screenshot.

form_factor Optional

A string that represents the screen shape of a broad class of devices to which the screenshot applies. Specify this property only when the screenshot applies to a specific screen layout. If form_factor is not specified, the screenshot is considered suitable for all screen types.

Valid values include:

narrow

Indicates that the screenshot is applicable only to narrow screens, such as mobile devices.

wide

Indicates that the screenshot is applicable only to wide screens, such as desktop computers.

platform

A string that represents the platform to which the screenshot applies. Specify this property only when the screenshot applies to a specific device or distribution platform. If platform is not specified, the screenshot is considered suitable for all platforms.

Valid values include:

Type Value Description Operating systems android Google Android chromeos Google ChromeOS ios Apple iOS ipados Apple iPadOS kaios KaiOS macos Apple macOS windows Microsoft Windows xbox Microsoft Xbox Distribution platforms chrome_web_store Google Chrome Web Store itunes iTunes App Store microsoft-inbox Pre-installed with Microsoft Windows microsoft-store Microsoft Store play Google Play Store

The screenshots member is supplementary metadata that does not affect the app's runtime behavior or how browsers present the app. Screenshots are used in app stores and other distribution platforms to showcase your app's features to potential users.

Distribution platforms may choose how many screenshots to display.

The images below from the Apple App Store show how screenshots appear in an iPhone app listing. In the gallery view (image on the left), users can scroll through multiple images horizontally. They can tap any image to view it in full screen (image on the right).

The same full-screen image on iPad shows why different screenshots are needed for narrow (iPhone) and wide (iPad) device form factors:

This example shows how to add screenshots for a meal planning app for different devices. The screenshots show the same feature of the app in desktop and mobile views:

{
  "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"
    }
  ]
}

The screenshots manifest member is used by app stores when publishing and listing web apps, so browser compatibility is not applicable. While browsers may parse this member, it's optional and doesn't affect the app's functionality or presentation.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3