Skip to main content

PWA Screenshot Generation Guide

This guide provides instructions for generating high-quality PWA screenshots for app store submissions and PWA installation prompts.

Required Screenshots for PWA​

Mobile Screenshots (Narrow Form Factor)​

  • Size: 390x844px (iPhone 14 dimensions)
  • Format: PNG
  • Purpose: Mobile app stores, PWA install prompts
  • Quantity: 3-5 screenshots showcasing key features

Desktop Screenshots (Wide Form Factor)​

  • Size: 1280x720px (HD)
  • Format: PNG
  • Purpose: Desktop app stores, PWA install prompts
  • Quantity: 2-3 screenshots

Key Features to Showcase​

Screenshot 1: Home/Cases Feed​

  • Mobile: Show the reels-style pet cases feed
  • Desktop: Dashboard with case grid
  • Elements: Navigation, case cards, floating action button

Screenshot 2: Case Detail & Chat​

  • Mobile: Individual case with AI chat interface
  • Desktop: Case details with donation panel
  • Elements: Pet image, description, chat interface, donation button

Screenshot 3: Donation Flow​

  • Mobile: Payment interface or donation confirmation
  • Desktop: Donation dashboard or confirmation
  • Elements: Secure payment UI, success states

Screenshot 4: User Profile/Dashboard​

  • Mobile: User profile with onboarding complete
  • Desktop: User dashboard with statistics
  • Elements: Profile info, donation history, settings

Screenshot 5: Onboarding (Optional)​

  • Mobile: AI-powered onboarding chat
  • Desktop: Welcome screen
  • Elements: Chat interface, onboarding progress

Screenshot Generation Steps​

  1. Setup Environment

    npm run dev
    # Open http://localhost:3000

  2. Mobile Screenshots

    • Open Chrome DevTools (F12)
    • Toggle device toolbar (Ctrl+Shift+M)
    • Select "iPhone 14 Pro" (390x844)
    • Navigate to each screen
    • Take screenshots using browser tools

  3. Desktop Screenshots

    • Set browser window to 1280x720
    • Navigate to each screen
    • Take full-window screenshots

Option 2: Automated Screenshots​

Use Puppeteer script for consistent screenshots:

// screenshot-generator.js
const puppeteer = require('puppeteer');

async function generateScreenshots() {
  const browser = await puppeteer.launch();

  // Mobile screenshots
  const mobilePage = await browser.newPage();
  await mobilePage.setViewport({ width: 390, height: 844 });

  // Desktop screenshots
  const desktopPage = await browser.newPage();
  await desktopPage.setViewport({ width: 1280, height: 720 });

  // Generate screenshots for each screen
  // ... implementation

  await browser.close();
}

Option 3: Professional Screenshots​

For app store submissions, consider:

  • Using actual device screenshots
  • Adding device frames
  • Professional editing/annotation
  • Optimizing for store requirements

Screenshot Optimization​

Image Requirements​

  • File Size: < 8MB per screenshot
  • Format: PNG or JPEG
  • Quality: High resolution, crisp text
  • Content: Representative of actual app usage

App Store Specific Requirements​

Apple App Store​

  • iPhone: 1290x2796px, 1284x2778px, or 1179x2556px
  • iPad: 2048x2732px or 2732x2048px

Google Play Store​

  • Phone: 320dp-3840dp width, aspect ratio 16:9 to 9:16
  • Tablet: 320dp-3840dp width, aspect ratio 16:9 to 9:16

Microsoft Store​

  • Minimum: 1366x768px
  • Recommended: 1920x1080px

Implementation Checklist​

  • Generate mobile screenshots (390x844)
  • Generate desktop screenshots (1280x720)
  • Optimize image sizes
  • Update manifest.json with correct paths
  • Test PWA install prompt
  • Validate screenshots in browser dev tools
  • Create app store variants if needed

Testing PWA Screenshots​

  1. Chrome DevTools

    • Open Application tab
    • Go to Manifest section
    • Verify screenshots load correctly

  2. PWA Install Testing

    • Trigger install prompt
    • Verify screenshots appear in install dialog

  3. Lighthouse PWA Audit

    • Run Lighthouse PWA audit
    • Check for screenshot-related issues

File Naming Convention​

/public/screenshots/
├── mobile-home-390x844.png
├── mobile-case-390x844.png
├── mobile-donation-390x844.png
├── mobile-profile-390x844.png
├── desktop-dashboard-1280x720.png
├── desktop-case-1280x720.png
└── desktop-profile-1280x720.png

Manifest.json Update​

After generating screenshots, update the manifest.json:

{
  "screenshots": [
    {
      "src": "/screenshots/mobile-home-390x844.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Home screen showing pet cases"
    },
    {
      "src": "/screenshots/mobile-case-390x844.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Individual case with chat interface"
    },
    {
      "src": "/screenshots/desktop-dashboard-1280x720.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Desktop dashboard with cases grid"
    }
  ]
}

This ensures proper PWA screenshots for enhanced user experience and app store submissions.