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.

Answer 1

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.

Answer 2

In general I'd recommend pasting your manifest into this to ensure it doesn't have any errors: http://mounirlamouri.github.io/manifest-validator/

If using Chrome with chrome://flags/#bypass-app-banner-engagement-checks enabled, you can look in the console on any page load and an error will be shown indicating why the banner wasn't shown.