17

The reason - I made a Progressive web app, opened in the browser - all is fine and browser offered me to add it to home screen.

Now, I want to demonstrate this on a presentation, and so - removed the icon from home screen. But for the last whole day I've been playing with the website in chrome a lot, and the banner never appears back.

Is it really a once-in-a-lifetime thing? Or is there something specific I need to do?

Basj
  • 41,386
  • 99
  • 383
  • 673
pesho hristov
  • 1,946
  • 1
  • 25
  • 43
  • Also, I would like to know how to make a manual link to Add to Homescreen, or at least, shall I just give a message (modal or not) anywhere on my website reminding the user "Hey, add this website to your homescreen for better features!". – Kalnode Dec 11 '17 at 15:20

2 Answers2

18

The app-install banner prompt is normally presented after you've visited the site at least twice with at least 5 minutes between each visit. Using a Chrome flag, you can bypass these checks so that the banner always appears on every visit:

  1. Open Android Chrome.
  2. Go to chrome://flags/#bypass-app-banner-engagement-checks
  3. Click Enable
  4. Click Relaunch Now

You can also simulate an Add To Homescreen event from Chrome DevTools:

  1. Open Android Chrome on your phone, and navigate to a PWA (e.g., the Paper Planes app from https://paperplanes.world).
  2. Connect to your Android with a USB cable.
  3. From desktop Chrome DevTools, select Menu > More Tools > Remote Devices. OR CTRLSHIFTP (or CMDSHIFTP for macOS), and enter "Remote devices".
  4. Select your phone by name.
  5. Click the Inspect button next to the list item corresponding to your PWA (e.g., Paper Planes).
  6. In the new DevTools pop-up for your PWA, go to the Application panel, and click Add to homescreen. This should cause the app-install banner to appear in Android Chrome. Note the banner won't appear in the Chrome DevTools screen mirror.

(steps above verified with Chrome 55 on macOS Sierra, and Android Chrome 57)

tony19
  • 125,647
  • 18
  • 229
  • 307
  • 2
    Enabled the flag, and cleared browsing data, restarted browser but it didn't prompt me again. Does this solution still work? – Adam Reis Mar 17 '19 at 07:37
  • Important note: **even** if you enable `chrome://flags/#bypass-app-banner-engagement-checks`, if you dismiss the install once on a given site, the install prompt will NOT be showed anymore for subsequent visits. The only way to have it displayed again is to delete browser history/cache. (Tested on Chrome Android) – Basj Jan 17 '22 at 14:46
8

I found another solution - when I go to the settings of chrome mobile and choose History -> Clear browsing data (make sure that the option to clear Cookies is ticked) then click the Clear Data button - after that I get again the app install banner to add the app to the home screen.

Apparently - it clears not only the data itself, but also makes the browser forget everything about this website.

(Strangely - the old icon doesn't go away ... so now I have a few icons on the home screen :D ...)

Adam Reis
  • 4,165
  • 1
  • 44
  • 35
pesho hristov
  • 1,946
  • 1
  • 25
  • 43
  • This all makes logical sense. And it's up to the user to delete old icons. Do the old icons still function, using your new service worker? That's another question. – Kalnode Dec 11 '17 at 15:19
  • This didn't work for me either, banner refuses to show up again – Adam Reis Mar 17 '19 at 07:39
  • In the end I managed to make the banner reappear by explicitly selecting cookies to be cleared, not just site data, so I think that's important to indicate in this answer. This page also contains some useful information regarding some recent changes to the behaviour of the banner: https://developers.google.com/web/updates/2018/06/a2hs-updates – Adam Reis Mar 17 '19 at 19:53
  • could you indicate which cookies and site data need to be cleared – Emmanuel Mahuni Mar 20 '19 at 11:34