CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolsprogressive-web-appsprogressive-enhancement
Joseph Fraley
Joseph Fraley

Reputation: 1400

“App banner support” in Chrome Devtools

Where is the "App banner support" setting for progressive web app installation in Chrome Canary 55?

Per this guide, I'd like to test whether the web app install banner is working correctly on my site.
The article shows its possible to test using the Chrome devtools mobile panel...

enter image description here

Here are his instructions:

If you don’t see the “Request app banner…” entry, try the following:

  • Update Chrome to the latest version
  • Enable the flag for “Devtools Experiments” chrome flags enable-devtools-experiments and restart Chrome
  • Enable the option “App banner support” in Devtools -> Settings -> Experiments (If you don’t see it, press Shift six times there to get all experiments)
  • Enable the flag for “Add to shelf” chrome://flags/#enable-add-to-shelf

So, I enable the flags, open the devtools, press shift x6 and I don't see anything in here about "App banner support".

Upvotes: 3

Views: 2152

Answers (1)

tony19
tony19

Reputation: 138656

The tutorial you mention is relatively dated, and the feature has since been moved and graduated from being a DevTools experiment.

Chrome 53/55 DevTools has an Application tab with an Add to homescreen link, which triggers the app-install banner if your app meets the criteria outlined below (errors logged to console):

Application tab in Chrome DevTools

Screenshot of install banner on Chrome 53/55, macOS Sierra: Chrome screenshot on macOS

Screenshot of install banner on Chrome 54, Android 6.0.1: enter image description here

More recent (updated 6-Oct-2016) documentation on Web App Install Banners states:

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.

Testing the app install banner

The app install banner is only shown after the user visits the page at least twice within five minutes. You can disable the visit-frequency check by enabling the Chrome flag #bypass-app-banner-engagement-checks. To test on desktop Chrome, you need to enable the Chrome flag #enable-add-to-shelf.

Then, as long as you have a manifest (configured correctly), are on HTTPS (or localhost) and have a service worker, you should see the install prompt.

Upvotes: 4

Related Questions