Chrome for Android - add web app to home screen

Question

I'm trying to implement an 'add to homescreen' banner using Google Chrome's native banner support, with this demo as reference.

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

According to the spec there, the requirements are:

the page uses a service worker (yep, see below)
the site is using HTTPS (yep, the site has a valid SSL certificate and I am loading over HTTPS. chrome shows the site as secure and has a green padlock, no errors or warnings in the certificate)
the app has a manifest declared (yep, see below)
the manifest has a short_name, 144 pixel icon and a type of 'image/png' (yep, see below)

The manifest I am using is below.

{
  "name": "Web app test",
  "short_name": "Test",
  "icons": [
    {
      "src": "/resources/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

Which contains a short_name and a 144 pixel icon of type image/png.

The service worker I am using is a direct copy & paste of this code:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

which was recommended in this article:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

The service worker has been registered, the manifest is being loaded into the page and the image url is correct, but the banner is not showing.

I also have the chrome://flags/#bypass-app-banner-engagement-checks enabled so this isn't a case of me needing to come back tomorrow and check that it works. I have been able to view homescreen banners on all of Chrome's demos that I have checked (which is where I took most of this code from) and my phone has the latest version of Chrome installed.

Is there anything else I am missing that could be blocking the homescreen banner from appearing?

Thanks.

I don't know, but a couple possibilities: 1) try defining a "start_url" property in the manifest, like in the demos, 2) I wasn't clear - did you link the manifest from the html file? 3) Is it possible you already have the app installed? Also FYI, I believe you can actually just use blank service worker file if you want to simplify further. — Brendan Ritchie
I'm having similar problems and have not found the answer. Everything is there but the app banner is not showing. Did you find a solution? — kaoscify

Kinlan Kinlan · Accepted Answer · 2015-12-01T10:27:45

A couple of things to check:

Ensure you have a start_url in your manifest that defines the page to launch.
Ensure that you have a <link rel=manifest> in your page
Ensure the image URL's all resolve correctly based on the manifest location
Preferably have a 192px icon, 144 is the minimum

Mounir Lamouri has created a manifest validator that you can use to check your manifest is correct.

You should also enable chrome://flags/#bypass-app-banner-engagement-checks if you are using Chrome so that you get a quicker warning or visibility of any issues. Finally you can look in the Dev Tools console on any page load and an error will be shown indicating why the banner wasn't shown.

There is also a lot of guidance on developers.google.com

Using App Install Banners
- Create a manifest file including a short_name, icons and launch_url
- Link to the manifest file from the page
Web App Install Banner
- Optionally include extra information such as the background_color and theme_color.
Listening to events on App Install banner
- Learn when Chrome thinks it can prompt for install and then offer the ability to defer it until a more appropriate time.
- Understand if the user has accepted or rejected the prompt by looking at the response in the onbeforeinstallprompt event.

Chrome for Android - add web app to home screen

2 Answers