Add to Home Screen is a concept almost as old as the original iPhone. In fact, it was introduced in February 2008 with iPhone OS version 1.1.3 . Today, more than 10 years later, the feature has come a really long way. What started as a mere bookmark, has now turned into a PWA super power.
Chrome first introduced Add to Home Screen banners in Chrome 42 —we are talking May 2015. We have heard from developers like Alibaba, that users re-engage 4 times more often with their site added to home screen. So in the early days, it seemed like getting users to install a PWA was an immediate recipe for success. In consequence, we tuned the heuristics for add to home screen to prompt users sooner, which yielded to 48% more installs .
In hindsight, this alone was not directly correlated with other app success metrics that you as a developer would care about, such as conversions. We introduced an improved variant of the feature in Chrome Beta 57 called WebAPK , with better integration into Android, so apps were no longer just better bookmarks. Other new features included the ability to change the app icon and app name by changing the values in the Web App Manifest, and also to register a scope of URLs where the app would be launched for directly.
But we have heard one thing loud and clear: developers want more control as to when their apps show the banner . For example, if you are an airline site and you have a PWA for storing boarding passes, it only makes sense to ask people to install it after they have actually bought a ticket. If you are a news site and your users are logged in, it might make sense to show the prompt immediately. And in some cases, even if you have a fully qualifying PWA, you might not even want to show the prompt at all. But most probably, you would want to define your own criteria in your app to determine who’s a loyal enough user to show the banner to.
Let us see how we can do that in our good old friend 🐈 AffiliCats that we have introduced in our last two episodes. It simulates a comparison site where you can get great offers for cats. AffiliCats makes money when someone clicks through to view one of the deals . The app meets the PWA installability quality bar in Lighthouse but we want to hold back the prompt until someone has actually viewed at least two deals .
Should the user then come back to the app — which they hopefully do — we can then show them a customized button that would trigger the browser’s prompt. We are in full control.
window.addEventListener('beforeinstallprompt', (event) => {
let previouslyEngaged = localStorage.getItem('engagement');
if (!previouslyEngaged) {
console.log('Install button hidden due to no prior engagement');
return;
}
previouslyEngaged = parseInt(previouslyEngaged, 10);
if ((isNaN(previouslyEngaged)) ||
(previouslyEngaged < INSTALL_THRESHOLD)) {
console.log('Install button hidden due to too low engagement');
return;
}
event.preventDefault();
installPromptEvent = event;
install.disabled = false;
install.hidden = false;
});
⚠️ Note that in Google Chrome currently there also is a temporary mini-infobar that you cannot control. The manually controlled “Install” button in the screenshot below is fully customizable. This is the behavior this article and the accompanying video are talking about.
Add to home screen is a 🦸 superpower that, if used wisely, can indeed have a massive impact on how users use your PWA, and if they perceive it as a real app worth a precious space on their home screen. As always, you are invited to play with this app yourself and read the source code .
This is the final episode of “Why build Progressive Web Apps” in 2018. Looking forward to reading our seeing you in 2019! Do let us know in the comments on any of the videos or write-ups what you want us to cover next. In order not to miss future episodes, subscribe Medium Dev Channel , the Chrome Developers YouTube channel , follow @ChromiumDev on Twitter — and if you like, I am @tomayac almost universally on the World Wide Internet.
