Separate maskable / non-maskable images

[theguacamoleking]

Hello there!

I'm currently using vite-plugin-favicons-inject but would love to move to this tool. I'm currently hitting an issue where I'm not sure how to specify the maskable and non-maskable image 🤔

As an example, here's how this is done with vite-plugin-favicons-inject

viteFaviconsInject(
  'favicon.svg',
  {
    manifestMaskable: './favicon-maskable.svg', // <- different image for maskable
  }
)

And the resulting output in the manifest looks like this

{
  // ...
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "android-chrome-maskable-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "purpose": "maskable" // <- maskable image takes precedence
    },
  ]
}

Proposal

User can specify maskable/non-maskable from config

export default defineConfig({
  preset,
  images: [
    { path: 'src/favicon.svg', maskable: false },
    { path: 'src/favicon-maskable.svg', maskable: true }
  ]
})

In combination with vite-plugin-pwa, the app manifest will be generated containing maskable and non-maskable definitions (see above)