Why promote PWA installation?

Even with browser-led install prompts, many users never realize a Progressive Web App (PWA) is installable. Building an in-app promotion experience gives you a direct way to surface installation and make your app easier to return to. The patterns below are a starting point; all of them ultimately lead to the same install flow triggered via the beforeinstallprompt event and the prompt() method.

Promotion best practices

  • Keep promotional UI out of the critical path of your user journeys. For instance, on a login page, place any install call to action below the form and submit button. Disruptive promotions hurt usability and engagement metrics.
  • Always let users dismiss the promotion, and remember their choice. Only re-prompt if the relationship changes, such as after a sign-in or a purchase.
  • You can combine patterns across different parts of the PWA, but be careful not to overwhelm users with repeated prompts.
  • Show promotions only after the beforeinstallprompt event has fired.

Browser-led installation

When a PWA meets installability criteria, most browsers automatically advertise installation. Desktop Chrome surfaces an install icon in the omnibox. On Chrome for Android, a mini-infobar appears on the first visit that meets the criteria and again after about 90 days, unless you call preventDefault() on beforeinstallprompt to suppress it.

UI-based promotion patterns

These UI patterns work for most types of PWAs and slot into familiar places like the header, navigation, or banners. The key is timing: showing them at the right moment, based on user context, produces more installs without derailing uninterested users.

Simple install button

The most direct approach is an "Install" or "Get app" button placed somewhere logical in your content. Make sure it doesn't block core functionality or interrupt the primary flow.

Fixed header

An install button in the site header, alongside the logo and menu, is a natural fit for loyal users who visit often. Header space is limited, so weigh the priority of the install prompt against other header content, and only show the button after beforeinstallprompt has fired.

Consider targeting the header promotion only to users who would genuinely benefit from an installed experience.

Users who open the navigation menu are signaling engagement. Placing an install prompt there is effective, but keep it below other menu items so it doesn't interfere with navigation.

Pair the prompt with a short, relevant pitch explaining why installation is useful.

Landing page

A landing page is one place where a larger install promotion is appropriate. Present the value proposition of your site first, then explain what installation adds. Appeal to the features and keywords that likely brought visitors to the page.

Beyond the landing page, consider adding promotion in sections where users spend the most time.

Install banner

Banners are familiar from mobile experiences but are easy to get wrong. Wait until the user shows interest before showing one, and if they dismiss it, don't show it again unless a conversion event like a purchase or account sign-up occurs.

Keep the banner text brief and relevant. You can point out that a PWA uses almost no device storage and installs instantly without an app store redirect.

Temporary UI (snackbar)

Snackbars are transient notifications that let users act without leaving their current flow. Show one only after strong interest signals, such as repeat visits or sign-in, rather than on page load when new users are unlikely to act. Ignored snackbars auto-dismiss, which keeps them from blocking content.

Display the snackbar for 4 to 7 seconds, and avoid stacking it with other temporary UI like banners.

Promotion at conversion moments

Immediately after a conversion event, like an e-commerce purchase, users are clearly engaged. That's an excellent opening to suggest installation, since these users are likely to return.

Booking or checkout journeys

Show the install prompt during or just after a sequential process like checkout. On completion, you can make the promotion more prominent because the journey itself is done.

Tailor the call to action to the journey at hand, and mention any installed-app-only offers your brand provides. Keep the prompt out of the way of the next essential steps, such as the main checkout button, so it doesn't reduce journey completion rates.

Sign-up, sign-in, and sign-out flows

These pages are typically visited by engaged users who already understand the app's value. There is usually less competing content to worry about, so a larger call-to-action is less intrusive. Avoid disrupting multi-step forms, and wait until the process is complete to present the promo.

Promote features relevant to a signed-in user, and consider a separate prompt for users browsing the signed-in areas of the app.

Inline promotion patterns

Inline placements weave install prompts into your content. They are subtler than UI chrome but need to strike a balance: noticeable enough for interested users, without cheapening the content experience.

In-feed

An in-feed install card appears alongside news articles or lists of information cards. The goal is to show users a more convenient way to keep consuming the content they enjoy, so keep the focus on features and functionality relevant to that reading experience. Limit how often the card appears, and honor the user's ability to dismiss it permanently.