Generating Google Play Screenshots for TWA Apps

When publishing your converted Progressive Web App to the Google Play Store, creating visual assets is often one of the final hurdles. Google Play requires developers to submit high-quality screenshots demonstrating the app in action. These screenshots must cover multiple device profiles, including standard mobile phones, 7-inch tablets, and 10-inch tablets. For web developers who do not regularly work with native Android emulator suites, capturing these precise dimensions can be a tedious and time-consuming process. Fortunately, because your app is a web application, you can use modern web testing tools to generate these screenshots quickly and accurately.

Google Play Screenshot Requirements

Google has strict guidelines regarding the dimensions, aspect ratios, and contents of the screenshots you upload to the Play Console. If your screenshots do not meet these criteria, you will not be able to submit your app for review. The table below outlines the primary device profiles and their accepted resolution ranges.

To publish, you must provide at least two screenshots for phones. Although tablet screenshots are optional, Google highly recommends them to ensure your store listing looks professional on larger screens. If your app is viewed on a tablet in the Play Store and lacks tablet-specific screenshots, Google may display a warning indicating that the app is not optimised for large screens.

The Problem with Using Real Devices

Many developers attempt to capture screenshots by installing their signed APK on their physical Android phone and taking manual screenshots. While this works for the phone category, it becomes problematic when you need 7-inch and 10-inch tablet screenshots. Buying physical tablets solely for screenshots is expensive, and configuring multiple emulators within Android Studio requires substantial storage, computing power, and setup time. Furthermore, manual screenshots on physical devices often capture system UI elements like notification icons, low battery indicators, or cellular signals, which can look unprofessional on your store page.

Method 1: Manual Generation Using Chrome DevTools

If you only need a few screenshots and want to generate them without writing code, you can use the built-in device emulator in Google Chrome on your desktop computer.

• Open your PWA in Google Chrome on your computer.
• Right-click anywhere on the page and select Inspect to open the Developer Tools.
• Click the Toggle Device Toolbar icon in the top-left corner of the DevTools panel.
• In the device dropdown list, select Responsive.
• Manually input the exact pixel dimensions required by Google Play, such as 1080 for width and 2400 for height.
• Ensure the zoom level is set to 100% so the output image is crisp and not downscaled.
• Click the three vertical dots in the top-right corner of the device viewport and select Capture screenshot.

This method generates a pixel-perfect PNG image matching the exact dimensions you specified. You can repeat this process for 1200 x 1920 and 1600 x 2560 to cover your tablet screenshots within minutes.

Method 2: Automating Screenshots with Playwright

If you regularly update your web app or want to automate your release pipeline, writing a simple Javascript script to capture screenshots is the most efficient approach. Using automation frameworks like Playwright or Puppeteer, you can load your PWA, hide specific UI elements (like web-only install buttons), set exact viewports, and export the screenshots automatically.

Below is an example of a simple Playwright script that you can run locally to generate your Google Play assets in all required formats:

const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
const pwaUrl = 'https://example.com';
const sizes = [
{ name: 'phone', width: 1080, height: 2400 },
{ name: 'tablet-7', width: 1200, height: 1920 },
{ name: 'tablet-10', width: 1600, height: 2560 }
];
for (const size of sizes) {
await page.setViewportSize({ width: size.width, height: size.height });
await page.goto(pwaUrl, { waitUntil: 'networkidle' });
await page.evaluate(() => {
const banner = document.querySelector('.pwa-install-banner');
if (banner) banner.style.display = 'none';
});
await page.screenshot({ path: `play-store-${size.name}.png` });
}
await browser.close();
})();

This script launches a headless Chromium instance, iterates through the required dimensions, loads your PWA, hides any non-native elements like web-only install prompts, and saves high-resolution PNG files directly to your directory. This process ensures your screenshots are identical in composition and perfectly formatted every time you update your app layout.

Important Layout Adjustments for TWA Screenshots

When you capture screenshots from a desktop browser, the viewport renders as a standard web page. To make these screenshots look like a native app running inside an Android TWA wrapper, keep the following styling adjustments in mind:

• Hide desktop-only elements: Ensure that side navigation bars meant for desktop screens are collapsed into mobile menus, just as they would appear on a native mobile screen.
• Remove web install banners: If your web app displays an add-to-homescreen banner, hide it in your screenshot script. A user viewing your app on the Google Play Store is already installing the app, so showing a prompt to install the PWA is redundant and confusing.
• Simulate native components: Ensure that any platform-specific CSS styles (such as targeting TWA users via display-mode standalone or specific user-agents) are active during the screenshot generation process.
• Do not include browser chrome: Google Play screenshots should only display the application interface itself. Do not include desktop browser address bars, navigation buttons, or desktop operating system frames.

By automating your screenshot generation or utilizing Chrome Developer Tools, you can eliminate the complexity of mobile emulation and produce pixel-perfect assets that comply with all Google Play store criteria.