Progressive Web App (PWA) Displays Only One Screenshot During Installation

Question

I'm facing an issue with my Progressive Web App (PWA) manifest where only one screenshot is displayed during installation, even though I've defined multiple screenshots with different form factors.

As I have added two narrow and two wide images, I should see at least two screenshots. Additionally, when I refresh the page and click on the install button, I notice the same screenshot getting added each time. Initially, there is one screenshot, and after a refresh, two screenshots with the same image appear. After another refresh, I see three screenshots with the same image.

Here's a snippet of my manifest:

 manifest: {
        "name": "Decker",
        "short_name": "Decker",
        "description": "Decker is a...",
        "icons": [
          {
            "src": "/favicons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
          },
          {
            "src": "/favicons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
          },
          {
            "src": "/favicons/apple-touch-icon.png",
            "sizes": "180x180",
            "type": "image/png"
          },
          {
            "src": "/favicons/favicon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
          },
          {
            "src": "/favicons/favicon-16x16.png",
            "sizes": "16x16",
            "type": "image/png"
          }
        ],
        "start_url": "/",
        "display": "standalone",
        "background_color": "#fcfefc",
        "theme_color": "#fcfefc",
        screenshots: [{ src: "/screenshots/decker_cards_page.png", form_factor: "narrow", sizes: "462x822", "type": "image/png", label: "cards page" }, { src: "/screenshots/fullscreen_card_view.png", form_factor: "narrow", sizes: "462x820", "type": "image/png", label: "fullscreen card view" }, , { src: "/screenshots/windows_cards_page.png", form_factor: "wide", sizes: "1920x933", "type": "image/png", label: "cards page " }, { src: "/screenshots/windows_full_screen_view.png", form_factor: "wide", sizes: "1920x936", "type": "image/png", label: "fullscreen card view" }],

      }

Answer 1

The problem could be in the sizes of pictures. You have the following sizes: 462x822, 462x820, 1920x933, 1920x936. So, if you want to have two or more screenshots for wide screens, all related pictures should be the same size - 1920x933 (or 1920x936)