PWABuilder
Published in

PWABuilder

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.

Sample install experience for a PWA with screenshots

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.

Screenshot tool integrated on PWABuilder.com
Screenshots on the app manifest generated on PWABuilder.com

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!)

Standalone tool in action!

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!

--

--

--

medium for PWABuilder team www.pwabuilder.com

Recommended from Medium

Azure Function Development on MacOS with Docker

✍🏻Industry use cases of Jenkins

Virtual Machines and Containers: A quick comparison

11 Mistakes Java Developers Make When Using Exceptions

Capítulos que no se escriben

Amazon AWS launches Amazon Location

Using a database is a way to store structured data or repetitive data.

Open compare sort.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amrutha Srinivasan

Amrutha Srinivasan

More from Medium

Scheduled Netlify Builds with GitHub Actions

Setting up Turborepo. Part 1. The right choice?

Bootstrap UI

Typescript Connect4