Allow separate icon settings for maskable

[rotsee]

Almost always you want to have two different variants of your logo in your manifest: Maskable, and regular icons (see e.g. https://web.dev/maskable-icon/). In fact, Google Chrome will even warn developers when using the same version. The side effects of not providing separate icons are that icons will look weird somewhere; On iOS, on Android, when adding a desktop shortcut to Gnome, etc, etc.

It would be truly great if the icon module could handle this for us! E.g. by allowing something like this in the options:

    icon: {
          icons: [{
            "src": "/assets/icon-maskable.png",
            "purpose": "maskable",
          }, {
            "src": "/assets/icon.png",
            "purpose": "any",
          }:],
    }

...while still generating all the sizes etc.

This is related to the following:

• https://github.com/nuxt-community/pwa-module/issues/392 (but this affects not only iOS, and the workaround mentioned does not solve all of the issues on all platforms where it arises)
• https://github.com/nuxt-community/pwa-module/issues/316 (again, a workaround only targeting iOS)
• https://github.com/nuxt-community/pwa-module/issues/259 (where maskable was added to all icons)

[JOODHAEWOOJAE]

Hi. Do you have any news about this issue?

[joerees]

It would be good if we can add multiple icon settings, as mentioned above to add maskable to specific sizes, not all.

Will there be a fix for this issue ?

[Migushthe2nd]

Purpose "maskable any" is actually discouraged and rejected by tools like www.pwabuilder.com, so being able to define icons separately is crucial.

Check out https://github.com/pwa-builder/PWABuilder/issues/2379

[jundellagbo]

@rotsee @joerees @JOODHAEWOOJAE

Here is my solution for this, you have to create your own manifest.json in "static" folder and change your manifest URL instead of nuxt generated.

static/manifest.json static/pwa/any/icon-512x512.png static/pwa/maskable/icon-512x512.png

~ /static/manifest.json

{
    "name": "My App,
    "short_name": "My App",
    "description": "My Description,
    "icons": [
      {
        "src": "/pwa/any/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "any"
      },
      {
        "src": "/pwa/maskable/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "purpose": "maskable"
      }
    ],
    "start_url": "/?standalone=true",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#1a73e8",
    "lang": "en"
  }

and modify nuxt.config.js under "head" option.

~ nuxt.config.js

export default {
  head: {
    link: [
      {
        hid: 'manifest',
        rel: 'manifest',
        'data-n-head': 'ssr',
        href: '/manifest.json'
      }
    ]
  }
}

Here you can also visit your manifest.json https://myapp.com/manifest.json

I tried this in www.pwabuilder.com and it works.

Also you can generate maskable icon here https://maskable.app/editor

[Migushthe2nd]

@jundellagbo

I've done it using a PWA config similar to the one below:

{
    pwa: {
        manifest: {
            icons: [
                // we want to define 'any' icon type manually, because icon module will create icons with type 'maskable'
                ...["64x64", "120x120", "144x144", "152x152", "192x192", "384x384", "512x512"].map(size => ({
                    src: `/icons/any/${size}.png`,
                    sizes: size,
                    type: "image/png",
                    purpose: "any"
                }))
            ],
        },
        icon: {
            fileName: "icon_maskable.png",
            purpose: ["maskable"],
        }
    }
}

Though, you'd have to manually create all icon variants. There's most certainly a way to automate it, but I couldn't be bothered. You could also disable the module's icon generation all together and add another of those mappings for the maskable type.

[jundellagbo]

@Migushthe2nd

I already tried that but it is still combining the "purpose" with "any maskable".

[Migushthe2nd]

It works for me as the are only 'any' and 'maskable' separately