Chrome for Android - Add a web application to the home screen

Question

I am trying to embed an “add to desktop” banner using the built-in Google Chrome banner, with this demo as a link.

https://googlechrome.imtqy.com/samples/app-install-banner/basic-banner/index.html

According to the specification, the requirements are as follows:

• the page uses an employee (yes, see below)
• the site uses HTTPS (yes, the site has a valid SSL certificate, and I upload it via HTTPS. chrome shows the site as secure and has a green lock, no errors or warnings in the certificate).
• application announces manifest (yes, see below)
• the manifest has a short name, 144-pixel icon and type "image / png" (yes, see below).

Below is the manifest I am using.

{ "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 like image / png.

The employee I use is a direct copy and 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 employee has been registered, the manifest is loaded on the page, and the image URL is correct, but the banner does not appear.

I also have a chrome flag: // flags / # bypass-app-banner-engagement-check, so this is not the case when I need to return tomorrow and check that it works. I was able to view the home screens on all the demo versions of Chrome that I checked (this is where I took most of this code), and the latest version of Chrome is installed on my phone.

Is there anything else I'm missing that can block the appearance of the main screen?

Thanks.

Answer 1

A few things to check:

• Make sure there is a start_url in the manifest that defines the page to start.
• Make sure your page has <link rel=manifest>
• Make sure the image URL is fully resolved depending on the location of the manifest.
• It is desirable to have a 192px icon, 144 - the minimum

Mounir Lamouri created a manifest manifest that you can use to validate your manifest correctly.

You should also enable chrome: // flags / # bypass-app-banner-engagement-checks if you use Chrome to get a faster warning or visibility of any problems. Finally, you can look in the Dev Tools console on any page load, and an error will be displayed indicating why the banner was not displayed.

There are also many recommendations for developers.google.com

• Using application installation banners
  • Create a manifest file including short_name, icons, and launch_url
  • Link to the manifest file from the page
• Set web application banner
  • Additionally, you can add additional information such as background_color and theme_color .
• Listening for events on the application installation banner
  • Find out when Chrome thinks it might request an installation, and then offer the opportunity to defer it to a more appropriate time.
  • Understand if the user accepted or declined the invitation by viewing the response in the onbeforeinstallprompt event.

Answer 2

In general, I would recommend inserting your manifest into this to make sure it has no errors: http://mounirlamouri.imtqy.com/manifest-validator/

If you use Chrome with chrome: // flags / # bypass-app-banner-engagement-check, you can look in the console at any page load and an error will be displayed indicating why the banner was not displayed.