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"
}
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.
To be absolutely sure you'll get WebAPK and not a shortcut ensure the following:
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With