Designing Installed Experiences

Designing a great Progressive Web App experience that meets users’ expectations of an installed app might seem like a brand new activity, but actually it should be quite familiar. UX best practices from both web and native apps can be used as inspiration, and as always, make sure to listen to users and test your design ideas.

Install UX

Designing Installed PWAs starts from the naming and the icon. Once it’s installed, the PWA will look like any other icon on the home screen. If you also have a native app, you might want to think about how you differentiate. You can do that with the icons and the name of the app. 

Icons

For Android, consider designing maskable icons that can adapt to any icon shape required by the phone manufacturer. Read more about designing adaptable icons here. For iOS use regular iOS icon design guidelines, but note that iOS does not use the icons from the manifest file, so make sure to add an apple-touch-icon meta tag with the proper image.

Naming

Using the business name as the name of the PWA makes most sense.

If the PWA uses local domains based on user location - e.g. example.co.uk, example.fr, consider including the country in the PWA name. Note that there is no built-in internationalization in the web app manifest, so to do this a different manifest is required for each domain.

Adding a suffix “Lite” to the name may be a good way to differentiate between the PWA and the native app, in case both are available.

Launching

When the app is launched from the homescreen, Android's default behavior is to display a white screen until the PWA is ready. The user may see a blank, white screen for up to 200ms. However, the splash screen can be customized to provide a smooth launch experience. Chrome for Android automatically customizes the splash screen so long as the manifest contains:

• The name property
• The background_color property is set to a valid CSS color value
• The icons array specifies an icon that is at least 512px by 512px
• The icon exists and is a PNG

For iOS there is no splash screen customization at the moment, so implement meta-tags to specify pre-generated splash screens.

Standalone UI

Progressive Web Apps launched from the homescreen icon should open in a standalone display mode, to provide the experience consistent to what users have come to expect from native apps. This means the PWA launches with no browser bar on the top, and is separate from the browser when cycling through the app switcher. 

Navigation

When designing for a longer screen, make sure all key navigation items are easily accessible for the user. In general, the bottom of the screen on mobile devices is considered to be a more ergonomic location: easier to reach when holding the device with just one hand. Consider locating there the key calls-to-action, testing bottom navigation or anchoring modal pop-ups on the bottom (vs in the center of the screen).

Along with an increased above the fold space, PWAs in standalone mode have fewer browser navigation capabilities. For example, on iOS there are no ‘’Back” / “Forward” buttons, so implement additional navigation elements within the PWA such as a “Back” button, breadcrumbs, additional navigation bar, etc.

Color schemes

On Android, the browser bar can be changed to match your brand color. This will also affect the standalone mode, specifically the color of the system notifications panel.

Refreshing

Pull-to-refresh is an intuitive gesture popularized by native apps such as Facebook and Twitter. For installed PWAs, consider customizing pull-to-refresh and overscroll behavior. Read more here.

Sharing

When users are in standalone mode on both Android and iOS, the browser menu isn’t available to select the URL and easily share. Consider displaying additional buttons that trigger the Web Share API to bring up the native Android share dialogue and make it easy to share URLs via other apps, like social networks or messengers.