One of the banner features of PWA is that it can be saved as an icon on your home screen. This gives readers a one-tap move to open your site and get to your content, rather than digging through the browser and typing the URL.
But, we're still in the early-adopter phase of PWAs. Most users don't know they can save them, despite browsers sending prompts to certain users. In addition to the browser provided install experience, it's possible to provide your own custom install flow, directly within your app.
In this post, we're covering how you can let your readers know that they can install your PWA and get the best conversion rates possible.
Creating a custom install flow
If your PWA meets certain criteria, based on some technical requirements and an unnamed standard of user engagement, the browser can automatically display a prompt to add the PWA to the home screen.
But, if you want to push more users, or have your own strategy in mind for getting PWA installs, you can create a custom install flow.
To do this, you need to listen for the beforeinstallprompt event and then save it so you can use it to trigger the installation flow when you want it.
Then, you can choose one of the many patterns available to you that will alert your user that your app is installable. You put this button or action on the interface when the user clicks, it will call on the saved beforeinstallprompt event. Your user will see an install dialog that asks for confirmation. They agree, and the PWA can be saved as a home screen icon.
Promoting high installation rates
Provoking user action comes down to a combination of art and science. Quality of content, the user, saying the right thing at the right time are harder to judge but there are some variables that can give you an objectively better chance at converting.
With a custom install flow defined, we can then play with UI and UX elements to maximize installations. Here are some of the best practices for publishers to get more install of their PWAs:
Don't break up established patterns
Assume that the majority of readers are not familiar with PWAs. New UI elements that break well-worn patterns need to be taught gently, rather than jammed into high profile UI locations.
Don't replace familiar buttons or break up familiar user journeys. Make your install prompt clear and easy to see but ensure it doesn't disrupt or block important functionality.
An open space in the header or a simple button out of the navigation menu can work well. Another good option is to use the dead space at the end of a lateral menu.
PWAs are widely used but not widely recognized by users. The next test comes down to educating your readers on what the feature can do. What does 'install' say to you? It says go to the app store and start the process of downloading another native app.
To get more users to add your page to the home screen, lead with the value proposition. The benefit for the user is they get faster, easier access and offline content, so make it clear that they get something out of the deal. Make it obvious and appealing on the button.
No Wifi? No problem Access offline content with a one-click installation
Want one-click access? Save to home here
Psst! Here's a shortcut Click here to add a one-click shortcut to us on your home screen
PWAs still have a bit of a public image problem. Making your UX writing more explicit about the benefits available to your readers will help adoption.
Pick your moment
It's natural to want all readers to install, but new users to your site may not be ready to install your PWA. When a user visits your site for the first time, it's wise to give the 'meet the parents' version.
It's you, but you on your best behavior. This means fewer pop-ups, promos, or interruptions. As the relationship develops, you can then start to drip out more of the annoying elements, as your readers have grown to love you.
Hitting readers with requests from the first interaction is kind of absurd. There's nothing to judge the proposal on so it leads to a kind of cognitive overload. When this happens, users will tend to shut down and dismiss everything they see. Therefore, it's best to wait until you have strong interest signals from the user before using this pattern, for example, repeat visits, a user signs in, or a similar conversion event.
Banners over pop-ups
It happens all the time. A pop-up fires into the middle of the screen and you accidentally click it or - thanks to a dark pattern - press the wrong button to close it. Suddenly, you're whipped out of the review of the new Adam Sandler movie and the App store is loading. Now, I may be a particularly petty and vindictive person but this unintended diversion makes me vow to never download whatever app it is.
Small banners at the top or bottom of the page are noticeable and clear but don't overrun the content. When you're asking your users to skew off from their intended journey, it's always better when you allow them to finish the primary content they are reading. Banners are an elegant compromise.
Use conversion events
The gold standard of UI is to use your readers' behavior to create dynamic journeys. When asking users to install your PWA on their home screen it makes sense they are going to more agreeable to this suggestion after a conversion event like signing up as a member or subscribing to a newsletter.
Not only are these users showing that they are engaged, but it's also pleasing to get all of the page admin done in one. No-one wants to fill in forms then get interrupted to save the icon in the middle of a new story. Cluster tasks for higher conversion.
With a custom install flow, you can get more of your readers to understand that your site is PWA with many additional features, without overhauling the normal UI pattern.
Getting more users to add your PWA should see a surge in page views and sessions as users go to your page as a natural impulse.
Here are some more best practices to bear in mind when building your custom prompt:
Bonus best practices:
Give readers an option to decline
Add the prompt in the pages where users spend the most time
If users decline, don't prompt again for a set number of visits
Try temporary UIs such as snack bars for non-disruptive engagement
Show temporary content for 4-7 seconds
PWAs are a tremendous tool that is silently re-shaping the mobile internet. But, for adoption to take hold, and to get the most out of the technology, we need to make it as easy as possible for users to discover the features.