How to get Add to Home Screen Pop up on Site Open in mobile browser

android google-chrome progressive-web-apps
Niral Bhavsar picture Niral Bhavsar · Dec 19, 2015 · Viewed 54.8k times · Source

How to get this pop up in mobile browser . when we click to Add to home Chrome icon generate on Home screen of mobile

How to get this pop up in mobile browser "Add to home" will create icon of chrome on home screen of mobile with site link on mobile.

Please suggest the solution.

Answer

Lukasz Wiktor picture Lukasz Wiktor · Nov 28, 2016

Official requirements are:

Chrome automatically displays the banner when your app meets the following criteria:

  • Has a web app manifest file with:
    • a short_name (used on the home screen)
    • a name (used in the banner)
    • a 144x144 png icon (the icon declarations must include a mime type of image/png)
    • a start_url that loads
  • Has a service worker registered on your site.
  • Is served over HTTPS (a requirement for using service worker).
  • Is visited at least twice, with at least five minutes between visits.

source: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

You can skip these requirements for testing or debugging purposes by enabling a chrome flag:

chrome://flags/#bypass-app-banner-engagement-checks

chrome flag bypass user engagement checks

Related questions

What features do Progressive Web Apps have vs. native apps and vice-versa, on Android

In 2015 Google introduced a new approach for developing web apps for Android: progressive web apps. One can create an application that will look like a native application, will be able to use device's hardware like camera and accelerometers, receive push …

Read More
How to Remove Chrome Logo from PWA App Home Screen Link (Android O Preview)

I just updated to Android O Preview and installed a few PWAs. On the home screen a miniature Chrome logo is placed by the icon. This wasn't there before the OS update. Ideally, I would like the PWA to look …

Read More
Progressive Web App "does not work offline" error

I have written a progressive web app, following all available guides and examples, but for some reason when I click the Add to homescreen button, I keep getting this mysterious error: Site cannot be installed: does not work offline The …

Read More