Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bring back "Add to home" banner for progressive web app after removed the icon from home screen?

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?

like image 853
pesho hristov Avatar asked Jan 26 '17 00:01

pesho hristov


2 Answers

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)

like image 79
tony19 Avatar answered Sep 27 '22 23:09

tony19


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 ...)

like image 42
pesho hristov Avatar answered Sep 27 '22 23:09

pesho hristov