📲
PWA Bundle
1.0.x
1.0.x
  • PHPWA Bundle
  • How To Create A PWA?
  • How To Install/Remove A PWA?
  • Bundle Installation
  • Deployment
  • The Manifest
    • Application Information
      • Scope
      • ID
      • Direction and Language
      • Orientation
      • Description
      • IARC Rating ID
      • Categories
    • Icons
    • Screenshots
    • Shortcuts
    • Protocol Handlers
    • File Handlers
    • Share Target
    • Complete Example
  • The Service Worker
    • Configuration
    • Content Security Policy
    • Custom Service Worker Rule
    • Workbox
      • Site Manifest Cache
      • Asset Caching
      • Resource Caching
      • Image Caching
      • Font Caching
      • Offline Fallbacks
      • BackgoundSync
      • CDN and Versions
      • Cache Cleaning
      • Custom Cache Strategy
    • Push Notifications
    • Complete Example
  • Symfony UX
    • Connection Status
    • Prefetch on demand
    • Sync Broadcast
    • BackgroundSync Form
  • Image Management
    • Icons
    • Screenshots
  • Experimental Features
    • Non-Standard Parameters
      • Launch Handler
      • Display Override
      • Related Applications
      • EDGE Side Panel
    • Translations
    • Widgets (Win10+)
Powered by GitBook
On this page
  • Configuration
  • src Parameter
  • type Parameter
  • label Parameter
  • platform Parameter
  • form_factor Parameter

Was this helpful?

Edit on GitHub
Export as PDF
  1. The Manifest

Screenshots

PreviousIconsNextShortcuts

Last updated 1 year ago

Was this helpful?

Progressive Web App screenshots enable richer installation UI. As shown below, by default only the application name and short name are visible.

However, by including screenshots in the web app manifest, the installation experience can be significantly improved. These screenshots give users a visual preview of the app, enhancing their understanding and increasing the likelihood of installation.

Screenshots should showcase the most important functionalities of your application and be of high quality to attract users.

In the example below, a selection of screenshots are visible and the user can navigate to show them all. On mobile devices, the interface is different, but shows the same information.

Configuration

You can add as many screenshots as you need. But keep in mind that the host device or the platform may show only a selection of them.

/config/packages/pwa.yaml
pwa:
    manifest:
        enabled: true
        screenshots:
            - "images/screenshot-feature1.png"
            - 
              src: "images/screenshot-feature2.png"
              platform: "android"
              type: "image/png"
            -
              src: "images/screenshot-feature3.png"
              label: "Feature #3 in action"
              form_factor: "narrow"

src Parameter

Ensure that the screenshots you provide are of high quality. Crisp and clear images can make a significant difference in how users perceive your app. Always aim for the highest resolution possible, without compromising the load times or performance of the installation interface.

Remember, these screenshots are part of your app's first impression on potential users. Take the time to choose them wisely, ensuring they accurately represent your app and its key features.

type Parameter

label Parameter

The label parameter provides a way to give a brief description or caption for the screenshot. This helps users to understand what the feature or screen is about before they have installed the app. It assists in providing context and can be particularly useful when displaying a series of screenshots.

Example:

label: "Main dashboard view"

platform Parameter

The platform parameter can be used to specify which operating system the screenshot is intended for. This helps to display the appropriate screenshots for users on different devices. For instance, you might have specific screenshots for Android users versus those using a desktop browser.

Example:

platform: "android"

Possible values are listed below. This list is not exhaustive.

  • Device platform identifiers:

    • "android"

    • "chromeos"

    • "ipados"

    • "ios"

    • "kaios"

    • "macos"

    • "windows"

    • "xbox"

  • Distribution platform identifiers:

    • "chrome_web_store"

    • "itunes"

    • "microsoft-inbox"

    • "microsoft-store"

    • "play"

form_factor Parameter

The form_factor parameter allows you to define the intended device form factor for your screenshots. This can help cater to different device types, such as mobile, tablet, or desktop, ensuring that the screenshots displayed are relevant to the user's device.

Possible values include:

  • "narrow": Suggests the screenshot is best suited for narrow screen devices, like phones.

  • "wide": Implies the screenshot is intended for wider screen devices, such as tablets or desktops.

Example:

form_factor: "narrow"

See the description .

This parameter is similar to .

on the icon page
the format parameter for the icons
GitHub installation UI