Patterns for Promoting PWA Install from the Browser
Promoting Progressive Web App installation should happen at the right moment in the user journey. The best practice is to use to customize visuals, copy and design to align with both the brand identity and customer needs. For an overview on which browsers support a fully customizable install prompt experience, take a look at caniuse.com
Browser Install on Chrome Android
Chrome on Android allows fully customizable UI prompts. First, make sure to prevent the default experience, which triggers the mini info-bar.
Preventing the default mini info-bar on Chrome
The mini info-bar was only intended as a temporary shim. It’s not the best user experience, and since it’s generated by the browser, it has no way to know when it is the right moment to appear. It just shows up as soon as the site passes installability criteria and a user engagement measure.
The recommended best practice to stop the mini info-bar from showing, and instead use a customized prompt. Here are the details on how to do that.
Best practices for customized UI prompts:
✔ Appear when appropriate
The ground rule here is not to ask users to install the PWA on their first visit. Instead, consider prompting engaged users, for example: when they have viewed certain key content, or on their second visit.
Consider making the prompt discoverable throughout the site, however make sure not to interrupt the user and break the flow. It is better to prompt when the user is either in browsing mode and not deep in a specific task, or when they have just completed a certain action, such as added a product to favorites, completed a purchase, finished reading the page or finished the game.
It’s a good idea to also fix the Install prompt UI element in the side drawer or within the navigation header, so that it’s always available to the user, without being interruptive.
✔ Use a value proposition
It is no secret that people need motivation to complete any task. Motivate users to install the PWA by explaining why they should do that and what they will get at the end.
The important thing about any value proposition is to talk about benefits that the user is going to get and not only the PWA features.
❌ Don’t | ✔ Do |
“Don’t worry about the phone space! Our app won’t take up too much.” | “Install our free web app on your homescreen to have quick access to your favorites” |
❌ Avoid negative wording | ✔ Highlight user benefits ✔ Customize the message depending on where the user is in the funnel |
“Install our app which is fast, reliable and light.” | “Welcome back! Get our web app to always have your bookings with you even when you are offline.” |
❌ Don’t talk about only the app features - users are not very technical. Consider: what does it mean for the user? | ✔ Highlight user benefits ✔ Customize the message depending on where the user is in the funnel ✔ Talk about the user, not about the app |
✔ Use visuals to illustrate action
Mother nature has built into the brain the ability to recognize images instantly. Visuals (icons, pictures, illustrations) are a very important signal - they help illustrate the content and functionality so that the user's brain recognizes and understands faster.
Include icons such as a download icon or an install button to illustrate to the user the action they should take.
✔ Integrate with the UI
Pop-ups have historically become really popular for promoting installs, however every pop-up is an intrusive experience which will likely get ignored or dismissed by users.
Less intrusive experiences lead to higher engagements. Prompts that are integrated within the UI as part of the site are more likely to be well received by a user.
Read more about promotional patterns and see more options of when the prompt can appear in the user journey and how it can look here.
Reminder: don’t promote your PWA to users that already have the native app installed! This was mentioned earlier, but is important so it’s being mentioned again here!
Use the getInstalledRelatedApps API to promote PWA install only to users that don’t have the native app installed. See https://web.dev/get-installed-related-apps/ for details.
iOS Installation
iOS requires users to install from the browser menu. Guide users through this process with an install prompt that explains what to do.
Desktop Installation
On desktop, Progressive Web Apps can be installed in Chrome and Edge browsers on all operating systems. An icon appears in the omnibox when the website is installable, and will wiggle to draw users’ attention.
Consider providing UI guidance to make sure users are fully aware that they can install the PWA.
