Appscope Screenshot Guide

How to capture screenshots of your Progressive Web App

In this short tutorial, we will demonstrate an easy way to capture proper screenshots of your Progressive Web App using Google Chrome. These screenshots can then be used when submitting your app to Appscope.

1. Open Developer Tools (View > Developer > Developer Tools) in Chrome.

2. Turn on the device emulator by clicking the Toogle device toolbar icon (highlighted blue in the screenshot below) in the top-left corner.

3. Click on Responsive and select Edit from the drop-down device menu.

4. Add a new custom device of width 375px, height 667px, and pixel ratio 2.

5. When added, select the new device from the drop-down device menu.

6. Click on the More button (the three dots icon) in the top-right corner of the device view and select Capture screenshot.

7. Done! A screenshot of width 750px and height 1334px (since the pixel ratio was 2) should be saved to your Downloads folder. Repeat the last step for a few of the most important features of your app and use the screenshots in your submission to Appscope.

Appscope is the leading directory for Progressive Web Apps and offers a collection of the best web-based applications that are compatible with all devices.