Giters

elegantapp / pwa-asset-generator

Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Warning in Chrome: Declaring an icon with purpose: "any maskable" is discouraged. It is likely to look incorrect on some platforms due to too much or too little padding.

frederikhors opened this issue · comments

commented

Describe the bug
I'm having this warning in Chrome 93 (Win 10).

Screenshots
image

commented

I just looked into this, and the conclusion is pretty much what the warning says:

  • maskable icons are supposed to have a certain amount of padding around the central icon, allowing the OS to cut the image to a custom shape without cutting away anything important.
  • any icons on the other hand, are designed to be shown as-is, so they should have as little padding as possible.

pwa-asset-generator is currently generating a single icon for both purposes. The image has a lot of padding, making the icon smaller than it needs to be for any images, but if you put the image into something like maskable.app, you will see that the padding is not enough for maskable images, and some of the icon will often be cut away.

We should solve this by generating separate icon files for the two different purposes.

commented

Hi @frederikhors, thanks for reporting this issue. It's not recommended to use both maskable and any purposes together anymore. With the upcoming fix, when maskable option is provided, PAG will only be adding maskable as a purpose.

commented

I'm using PAG with the default options (I love convention over configuration).

Will it still be like this?

commented

Maskable will stay as the default option, but the purpose output will be 'maskable' instead of 'maskable any'.

commented

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

commented

I just used this library for the first time today and i now have errors in chrome BECAUSE "any" is not present in the "purpose":

"purpose": "maskable"

image

if i manually add "any" or only use "any" as the error suggests:

"purpose": "maskable any"

or

"purpose": "any"

error 1 and 3 go away.

so its a little confusing if it should be there or not.

EDIT:
i did not have the newest version of chrome installed. i just went from 89->95 and now i get the same error as the OP when my "purpose" has "any".

though i still get the same errors when i dont have "any":

image

so chrome is complaining either way for me

commented

Same problem for me in chrome 95.0.4638.69

commented

Thanks for reporting the warnings. You can track the updates on this issue: #725