40

I just updated to Android O Preview and installed a few PWAs. On the home screen a miniature Chrome logo is placed by the icon. This wasn't there before the OS update.

Ideally, I would like the PWA to look like a regular app on the home screen considering it has service workers enabled.

Is it possible to remove this with some settings in the app.yaml or manifest.json?

KVNA
  • 847
  • 1
  • 11
  • 24

8 Answers8

29

Above answer is not accurate except for the part that Chrome had the issue of adding Chrome badge to App icon, which is changed in the following updates.

Before getting into whats wrong, here is how web apps are added to home screen.

1) As a simple shortcut(like a bookmark), when the users web browser don't have service worker support(which all recent versions of major browsers have support now), targeted web URL don't have a valid manifest.json and service worker files configured(this can be validated in Application-> Manifest and Service worker tabs in chrome developer tools). In this case, what is added to home screen is not an APK and the bookmark kind of shortcut was represented by a specific version of Chrome with a badge.

2) As an installed APK: When the targeted URL have a valid Manifest.json, service workers and one of supported Chrome version is used, Chrome for Android uses WebAPK to build and sign an .APK file with the package name starting "org.chromium.webapk". Read here for more details on apk generation and PWA distribution here.

Whats not accurate in the above answer/linked article,

1) The chrome badge is not a security measure. Chrome team added the badge for web apps created as bookmark/URL shortcut as it was not using WebApk in some particular version. Badge is a simple visual representation which was later withdrawn.

2) PWA is not abandoned in favor of WebApk. WebApk is part of PWA solution, which compliments PWA by building an installable APK file to get the native app like behavior. WebApk is used to build .apk files by Chrome for Android. Here is official read me file.

So if you are building a PWA, you can still be assured you are not left behind in outdated/abandoned/being abandoned technology. Its still a constantly progressing positively, which got iOS support for service worker in march-2018(iOS 11.3), making it the last major browser vendor aboard PWA game.

Anand
  • 9,672
  • 4
  • 55
  • 75
  • 2
    Agreed. Sorry for unclear/misleading answer. Can I somehow switch the "accepted" mark to your post? – Pavel Cernik Apr 26 '18 at 06:25
  • So is it correct that Chrome is the only Webbrowser that supports WebApk because the PWAs of all other Browsers (Firefox, Edge, Opera) contain a small browser logo in the bottom right corner and they are not listed as an installed app in the settings? – maxeh May 20 '18 at 16:20
  • That's true for now. WebAPK is part of Chrome-Android(not for any other OS which Chrome runs on) opensource project listed here. While there seems to be no official statement from Firefox on supporting it in Android, we can hope to see it sometime. Safari has its own way of adding to home screen in iOS, which don't have any doc on how it does and for now, no other browser in iOS supports add to home screen other than safari. Microsoft has its own way of packing PWA for windows(pwabuilder.com). https://github.com/brave/browser-android-tabs/tree/master/chrome/android/webapk. – Anand May 22 '18 at 20:45
  • In short, only respective OS authors have defined their way on how they package the PWA for their platform, which make sense. Exposing that to all browser vendor is something we can expect to see in coming months/years. – Anand May 22 '18 at 20:47
  • how do make my app to webapk? i already check in Application-> Manifest and Service worker tabs in chrome developer tools, my app is pwa, but still have icon android on it when add it to homescreen. – dehamzah Aug 16 '18 at 06:48
  • 3
    I am still confuddled... under what circumstances is the icon added in android and how/can we avoid it? – Anthony Johnston Dec 17 '18 at 15:36
  • @Anthony Avoid what ? Please elaborate what you are asking. Icon is added when when user chooses to via add to home screen option. – Anand Dec 17 '18 at 17:08
  • If you are asking how to avoid chrome icon, as long as your went app is fully qualifies PWA to be installed as APK, new versions of chrome won't add that icon. I've tested with chrome version 70 in Android pie . If it's a mere web page, failing to meet key PWA criteria or non PWA, chrome might add chrome icon to indicate it's a web link(depending on chrome version again) – Anand Dec 17 '18 at 17:11
  • yes, I was asking about the chrome icon added to my own apps icon. I found this too https://developers.google.com/web/fundamentals/app-install-banners/ – Anthony Johnston Dec 18 '18 at 16:04
13

Note that if the phone doesn’t have a google play account enabled then all pwa will be installed as a bookmark only. This happened to us using a new phone to test our pwa

M. Merino
  • 146
  • 1
  • 3
  • Oh my god I've been stuck on this for what feels like forever. Tested via new devices here, in stores and on Browserstack all of which were signed out of Google Play for obvious reasons. This answer should be getting more attention, couldn't find this documented anywhere. Thank you! – CodemanDoEl May 18 '20 at 15:54
  • 1
    THANKS. This saved my day. Adding another tip: you can login with a Google account, install the PWA and then remove the account from the device. Android will keep the PWA icon as intended. Don't install the PWA before logging in because it will not update the icon, just login, install and delete the account. – LuBre Jul 01 '20 at 11:38
2

Addition to other answers. User also need enough space on their device or else it will be installed as bookmark. This happened to me.

Adib Zaini
  • 119
  • 2
  • 8
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29857038) – callmenikk Sep 18 '21 at 12:12
  • @callmenikk it is related answer actually – Pooya Estakhri May 14 '23 at 22:40
2

In my case, this was because my *-maskable.png icon (the version of the icon that the PWA will use on its splash screen) had a 32-bit color depth.

It had this 32-bit color depth because my other icons (for the other sizes, for browser tabs, bookmarks and so on) had a transparent background, and therefore must be 32-bit.

However the maskable PNG must not have a transparent background. It must have a solid background (i.e. white) and be 24-bit color depth.

None of the tools above highlighted this problem for me :(

Richard Kennard
  • 1,325
  • 11
  • 20
1

This is simple security measure as the PWA is literary opening the browser window and small icon signalizes which browser is used:

Starting with Android Oreo, every shortcut added from Chrome (and potentially other browsers as well, but they are not working now) will have a Chrome badge at the lower right corner of the icon.

Anyway, PWA seems to be abandoned as the new WebAPK feature is significantly more powerful and actually, supports normal icons

With WebAPK enabled, icons are back to normal as we were used in Android before Oreo

Source for quotes: https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f

Pavel Cernik
  • 111
  • 2
  • 6
1

Sometime we just miss one of the following, which stops us adding it as PWA to mobile:

  1. Use https instead of http (easily get ignored).
  2. One or more service worker.
  3. A manifest file.
SynergyChen
  • 1,161
  • 9
  • 4
  • My React App was missing service workers which is why I was seeing the chrome icon being added to my app's icon. CRA stopped shipping service workers by default so I had to manually add it to work. https://create-react-app.dev/docs/making-a-progressive-web-app/ – Siddhant Varma May 19 '21 at 05:31
  • ah, so thats why it wasn't working for me. I was trying on localhost which is http instead of https. – Dev-Siri Aug 23 '23 at 17:12
1

In my case, I wanted to ship an app shortcut, which is a feature requiring an installable PWA. The app properly prompted me for the add to home screen, but installed the app as a shortcut with the browser badge instead of a “real” PWA.

My mistake was that I declared the app shortcut with 2 PNGs and 1 SVG as icons, while the article linked says:

SVG files are not supported at the time of writing. Use PNG instead.

My Web Manifest looked like this:

{
    "name": "My app",
    /* other Web Manifest members… */
    "shortcuts": [
        {
            "url": "/new",
            "name": "Name of this action",
            "description": "Description of this action",
            "icons": [
                { "src": "/icons/new-192.png", "sizes": "192x192", "type": "image/png" },
                { "src": "/icons/new-512.png", "sizes": "512x512", "type": "image/png" },
                { "src": "/icons/new.svg", "sizes": "150x150", "type": "image/svg+xml" }
            ]
        }
    ]
}

This alone prevented the web app to be “installed” as expected. After the removal of the SVG line, it worked. The issue was in Chrome Android, not desktop.

meduz'
  • 555
  • 4
  • 12
0

In 2021, this was happening to me on Android 11 and Chrome 92, so I looked around, generated a Lighthouse audit report and got told that the following two things need to be green:

  • Does not provide a valid apple-touch-icon

For ideal appearance on iOS when users add a progressive web app to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.

  • Manifest has a maskable icon

A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more..

There was also one more point about the HTTP not automatically redirecting to HTTPS, but after fixing the two points above, everything magically came alive and my Chrome as well as Edge properly show the app install prompt as well as the icon sans the Chrome/Edge icon.

FYI, the maskable icon link suggests using the following app: https://maskable.app/editor

aalaap
  • 4,145
  • 5
  • 52
  • 59