Making screenshots easy on PWABuilder!
With no dearth in the app market for PWAs and other apps promising to help the consumer in very similar ways, it can be difficult for developers to get their apps to stand out. Pictures can tell a powerful, convincing story. Screenshots can offer a glimpse into the features users will find useful. They showcase the capabilities of the app so that users can quickly gauge what it has to offer.
The quick and easy way to include screenshots with your PWA (Progressive Web Application) is to add them to your app manifest. While the Web App Manifest has been supporting screenshots for a while, this feature has not been used by any browser or app store. But having screenshots on your PWA manifest has great benefits as it can allow for an app store like install experience.
Since PWABuilder.com is a one-stop-shop for everything PWAs, we thought it would be useful to integrate a screenshot generating tool right into it. This tool takes multiple URLs as input, and generates desktop and mobile sized screenshots for each URL, by internally calling a Puppeteer service. It also includes these screenshots in your app manifest.
Some app stores, like the Google Play Store, only allow up to 8 screenshots. For that reason, we’ve set the same upper bound on the total number of screenshots that can be included on the app manifest generated by PWABuilder.
So that’s it! With one click, you’re good to go with screenshots in your app manifest.
Bonus! A standalone tool for screenshots
Some developers may already have a working PWA, and might just want to add screenshots to it, without going through the end-to-end process that PWABuilder offers. For those users, we released a standalone screenshot generating tool. This tool lets the user choose between mobile and desktop-sized screenshots for each URL, and allows them to download all the generated screenshots into a zip file.
(Note : This tool is in preview and in early stages of development. Some major design improvements will be coming soon!)
Open source repositories
The screenshots service APIs, as well as the standalone interface are both open-source. Any feedback and/or contributions from the community would be appreciated!
Link to screenshot service repository : https://github.com/pwa-builder/pwa-screenshots
Link to standalone tool repository : https://github.com/pwa-builder/standalone-screenshots
Limitations
Note that there are two known limitations with the screenshots service currently that you may run into https://github.com/pwa-builder/pwa-screenshots/issues/2
We hope you enjoy using this feature! Our goal is to make sure you have the right tools every step of the way to building successful PWAs :)
Thanks for reading!
