APK icon off and not transparent background

[peterpeterparker]

Describe the bug The icon of the generated APK doesn't seems to amend size and transparency of the original PWA icon.

See enclosed screenshots. The generated icon TWA/APK has a white circle background and the original size, positioning, are not kept.

To Reproduce Steps to reproduce the behavior:

1. Go to https://www.pwabuilder.com/
2. Generate a TWA for https://deckdeckgo.com

Expected behavior A background transparent icon which keep ratio and positioning of the original PWA icon.

Screenshots

APK once installed on my phone:

Favicon specified in manifest.json (https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png):

[ghost]

Hello peterpeterparker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

[ghost]

Hello peterpeterparker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

[jgw96]

Hmm we are not doing anything special with icons so this might be an issue in bubblewrap itself. @andreban are you aware of any issues like this?

[andreban]

The problem is that CloudAPK is setting maskableIconUrl, but the icon is not maskable. Maskable icons need some gaps from their borders, More info on maskable icons here: https://web.dev/maskable-icon/ and Android specifics here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

Here's what the payload passed to generateSignedApkZip looks like:

{
    "packageId": "com.deckdeckgo.twa",
    "host": "deckdeckgo.com",
    "name": "DeckDeckGo",
    "themeColor": "#ffffff",
    "navigationColor": "#ffffff",
    "backgroundColor": "#ffffff",
    "startUrl": "/",
    "iconUrl": "https://deckdeckgo.com/assets/favicon/android-chrome-192x192.png",
    "maskableIconUrl": "https://deckdeckgo.com/assets/favicon/android-chrome-192x192.png",
    "appVersion": "1.0.0",
    "useBrowserOnChromeOS": true,
    "splashScreenFadeOutDuration": 300,
    "enableNotifications": false,
    "shortcuts": [],
    "signingInfo": {
        "fullName": "John Doe",
        "organization": "Contoso",
        "organizationalUnit": "Engineering Department",
        "countryCode": "US"
    }
}

But there's no maskable icon in the Web Manifest at https://deckdeckgo.com/manifest.json:

{
  "name": "DeckDeckGo",
  "short_name": "DeckDeckGo",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "scope": "/",
  "start_url": "/",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/assets/favicon/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

So, the solution is to only set maskableIconUrl if there's a maskable icon in the Web Manifest.

[jgw96]

Thanks again @andreban ! @peterpeterparker ill get this fixed up (:

[peterpeterparker]

Thanks a lot @jgw96 and @andreban for your time on both two issues I submitted, really cool and appreciated 👍

[jgw96]

Fixed https://github.com/pwa-builder/PWABuilder/commit/59d6c892dd4291749c942acdea78413693371dac . @peterpeterparker I am going to deploy this fix and the fix for #19 , let me know if you run into any other issues! Also, thanks @andreban for the help!

[jgw96]

Fixes deployed, Thanks again @peterpeterparker (:

[peterpeterparker]

I have also make some enhancement on our side to be "maskable" compatible and the result is really cool!

Thank you @jgw96 for the fix 👍

[jgw96]

No problem at all, the icon is looking really good!