We recently enhanced the Add to Homescreen function in Chrome which allows users to add your Web App to their home screen with the addition of the standards-based “web app manifest”. The manifest gives you extra control over the Add to Homescreen experience, allowing you to tell the browser what to launch, how to launch your app (fullscreen or in a browser window) and how it should appear to users on the home screen.
This improved things for users, but the ability to Add to Homescreen is still hidden behind a menu, meaning that your apps still aren’t as discoverable as they should be. To increase the chance of a user adding their app to the home screen a developer would have to try and guess if the site was already running as an Added to Homescreen app and if not, then tactically decide to give them an overlay that asked them to work around our poor UX. This isn’t great for users, and it is not good for developers.
In Chrome 42 (M42 - that is now in Beta) we are introducing “App Install Banners”. App Install Banners give you the ability to have your users quickly and seamlessly install your Web App as per the images below.
“This looks great, I want it on my site” I hear you shout. “Please tell me how to add it!”. The good news is if you meet the following criteria Chrome will manage the prompting of users:
- You have a web app manifest
file
- The manifest defines how your app appears on the user’s system and how it should be launched - and you are required to have a `short_name` and a `144x144` png icon
- Your icon declartion’s should include a mime type of
image/png
- You have a service worker registered on your site. We recommend a simple custom offline page service worker
- Your site is served over HTTPS (you need a service worker after all)
- The user has visited your site twice over two separate days during the course of two weeks.
A sample manifest is provided in our samples and one here for quick reference:
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone"
}
If you are interested in the implementation, check out crbug 452825. If you are interested in tracking what other things we are working on in this space, follow the Cr-UI-Browser-AppShortcuts label.
Frequently Asked Questions
My app meets all the criteria, but I don’t want the banner to display. Can I control this?
Not right now. We are working on ways to give developers the ability to cancel
the display of the prompt. Follow our “Intent to Implement” on blink-dev mailing list.
Can I detect if a user tapped “Add” at the prompt and added to home screen?
Not right now. We are working on ways to give developers the ability to
understand whether the user has gestured Install or Cancel.
If a user dismisses the banner, will it appear again?
No. Not unless the user clears their history. We want to make sure users have
a good experience. We will likely be changing all the heuristics over time.
Can I decide when to prompt the user?
No, we are not letting developers actively prompt the user to Add to Homescreen.
You said that I will only get the banner if I visit the site on two different
days. How on earth do I test it?
Yeah, we had the same problem when we were building this. Enable
chrome://flags/#bypass-app-banner-engagement-checks and you will see it as long
as you have a manifest (configured correctly) and are on HTTPS and have a
service worker.
Why do I need a service worker?
We believe that when you add to the user’s home screen you should be providing
an app-like experience. A service worker, especially one that supports push
messaging or offline, is a strong indicator that you are developing a first
class device experience. We recommend the following simple Service Worker as a
starting point.
Why do I need SSL?
Because you need a service worker.
Are there any good examples of this in action?
Yes, Glad you asked:
Examples are great, but do you have anything I can just copy and paste?
Yes. We have made a minimal app install banner
example
that you can copy, paste and change.