All Collections
PWA Questions
Patterns and elements for promoting PWA installation
Patterns and elements for promoting PWA installation

Best practices for prompting users to install your PWA on their device.

Kevin Basset avatar
Written by Kevin Basset
Updated over a week ago

Having your web app icon on your users' home screens is very valuable. With Progressier, you have four neat ways to promote the installation of your PWA.

1. The Install Page

With Progressier, each app gets a unique URL. Here is an example: https://install.page/covid

Pick a URL, add screenshots and provide users with a familiar app-store-like experience. The Install Page automatically adapts to your users' devices and browsers โ€” always providing them with the best option to install your app. You can easily link to your unique URL from your app or share it on social media.

2. The Floating Action Button

Display a floating action button in the body of your app to let your users know they can install it on their device. On click, the button either redirects to your Install Page or displays an in-page modal with install & subscribe buttons. The button is automatically hidden when users launch the app from their home screen.

3. The App Banner

Show users that they can install your app with an in-app banner. The banner contains a short pitch that incentivizes users to install it. You can display it on certain pages, customize its content, and show it on mobile, desktop, or both.

4. The Install Button

If you feel like creating your own promotion banner, you can delegate the install logic to our Install Button. Creating a browser-agnostic install button from scratch can be quite difficult (I've written about this specific topic here). Once you've added Progressier to your site it becomes as easy as adding this snippet of code in your HTML:

<button class="progressier-install-button"></button>

The Install Button comes completely unstyled so you can make it blend into your app perfectly.

Did this answer your question?