Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PWA not showing in Android apps drawer

Our users have been reporting that our Progressive Web App doesn't show up in their Apps drawer. I reproduced this on a Samsung Galaxy S5 and S6 running Google Chrome 65. I used the menu to "Add to Home Screen," and the icon shows up on the home screen, but doesn't show up in the "Apps" drawer or in the Application Manager Settings screen.

This indicates to me that my PWA isn't getting "WebAPK" aka "Improved Add to Home Screen" treatment, but I can't for the life of me figure out why. According to that link from Google, Improved A2HS rolled out to all users in Chrome 59.

Here's my manifest.json file with name, short_name, scope, and start_url changed to example values.

{
  "name": "Example",
  "short_name": "Example",
  "icons": [
    {
      "src": "icon.jpg",
      "sizes": "1024x1024",
      "type": "image/jpg"
    }
  ],
  "scope": "https://www.example.com/my-url/",
  "start_url": "https://www.example.com/my-url/",
  "display": "standalone",
  "background_color": "#626160",
  "theme_color": "#626160"
}
like image 720
Dan Fabulich Avatar asked Oct 20 '25 01:10

Dan Fabulich


1 Answers

In your case you're not seeing Add to Homescreen (A2HS) banner because of the icon defined as image/jpg.

Site cannot be installed: the manifest does not contain a suitable icon - PNG format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any".

More info:

There are several requirements needed to get the WebAPK listed at the Web App Install Banners

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 192x192 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). Meets a site engagement heuristic defined by Chrome (this is regularly being changed).

Starting with Chrome 68 you will need to handle "beforeinstallprompt " event and call prompt() on user gesture to get the Add to Homescreen (A2HS), it won't happen automatically.

enter image description here

enter image description here

To be absolutely sure you'll get WebAPK and not a shortcut ensure the following:

  • You need GSM Core to be able to install as WebAPK
  • Web Application Manifest available
  • Provided icon with right size in Web Application Manifest
  • Service Worker successfully registered
  • Service Worker with a fetch event

Given all of the above is ok the APK service needs to be available and reachable as APK is generated on a server and installed via GMS Core. If you don't have an internet connection it will likely default to a shortcut on homescreen.

Where can you install PWA?

PWAs are currently installable on Android:

  • Chrome
  • Samsung
  • Firefox,
  • Opera,
  • UC

and will soon be available on iOS, Windows 10, macOS, ChromeOS.

Ref: Progressive Web Apps coming to all Chrome platforms

How to know if you got WebAPK or shortcut?

  • If PWA is in an Android app drawer - it is a WebAPK.

  • If a long press on the screen icon of your PWA gives you an option to "Uninstall" - then it is a WebAPK

  • If you only get an option to "Remove" - then it is a shortcut

Testing your PWA

Two flags that should be used when testing

chrome://flags/#allow-insecure-localhost

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

You can use adb shell am start which helps with starting Chrome with both enabled without going thru the UI.

like image 187
Matija Grcic Avatar answered Oct 21 '25 22:10

Matija Grcic



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!