How to customize the “Add to home screen” banner for a PWA
Progressive Web Applications (PWAs) are great things that changed the way we see mobile websites. We no longer need to build sophisticated native mobile apps for simple projects that don’t really require that much complexity.
What is a "Add to home screen” banner?
Whenever a website is correctly configured to act as a Progressive Web Application it will prompt the user with a small banner that says “Hey, this app can be installed, do it”. The visitor sees it, clicks Install and that’s it.
So why customize it?
To increase installs, of course. As you can see in the examples bellow, the native/standard banners are not very appealing. The good news is that we can customize it by listening to the beforeinstallprompt event. A little Javascript here, a little CSS there and it will look so much “clickable”.
The expected result
First, you need a PWA
Note: This tutorial will not work if you don’t have a valid PWA. Don’t worry, it’s very easy to set it up. I came across some good articles right here, on Medium. One example would be:
Ok, let’s start customizing it
Now that your site seems to meet all the requirements needed to have an installable PWA, you will already have a banner like the one above. We want to edit it to match your brand colors, fonts, style and so on.
HTML part
Not very much to mention here. Just pay attention to the IDs and the classes’ names because you will need them in the JS part.
SASS part
I’m using SASS as my CSS preprocessor but feel free to change the code as you want.
JS part
I created a file named pwa.js where I placed all the code bellow. You can include it in your website in the footer.
Testing it
After you push your ssl-secured and pwa-valid project to live clear your cache and cookies to be sure the event will be triggered and open it in a mobile browser (let’s say Chrome).
Banner not showing?
Before you start debugging keep in mind that in order for the beforeinstallprompt to be triggered, there are some requirements that you and your visitor have to meet:
- you have a valid PWA;
- your visitor is to your domain (browse it for a little while);
- the app is not installed on the visitor’s device;
- the visitor didn’t close the banner in the last 14 days;
References
You can find more on these issues by checking the following links — that I also read when writing this article, of course:
Conclusion
PWAs are an important part of the new web and they are here to stay so it’s not a bad idea to know how to control them.
Feel free to leave a comment if you have questions or a better solution.
