Pwa-module: No maskable icon support

[liyasthomas]

What problem does this feature solve?

Maskable icons support for PWA is gaining pace in most browsers and still it is not supported in Nuxt PWA module

What does the proposed changes look like?

On nuxt.config.js adding purpose field to PWA images will make icons compatible for maskable icons.

_{This feature request is available on Nuxt community (#c192)}

[EricHier]

Hi! Has there been progress on this feature? I am looking forward to using it. :)

[nikolayandreev]

I totally don't understand what is going on..
There is a pull request from 2019 https://github.com/nuxt-community/pwa-module/pull/246
Which seems to be targeting this exact issue.

But here's what I see, you can clearly see that the maskable is working on some places, but not on others, I've tried to leave even more than the recommended safe zone of 48dp and it still doesn't work..

I can see it's cropping while it's installing:

I can see it cropped on the screen:

But on the minimize tab for example I see it as a rectangle.. :

[EricHier]

This represents my own experience regarding maskable icons pretty well. However I would say that this problem should and will be fixed by chrome (or what ever browser you use under android) and should not be solved by nuxt/pwa.

[FreekVR]

Just came here for this. #246 is now merged, but unfortunately the release has not yet been tagged :(

@pi0 would it be possible to publish a new beta with this feature included? Or is there anything I can do to help get this published? Thanks :)

[wagerfield]

@pi0 I too would really like the icon purpose feature that was merged to be published to npm. It would be awesome if you could publish another beta with this feature included now that it's been merged. Thank you 🙏

[dschox]

+1

[AllanOricil]

Could you give us an estimate of when this will be released?
For those who want to create really cool Maskable Icons, use this Tutorial.

https://web.dev/maskable-icon/

[AllanOricil]

workaround for testing this the purpose feature:
Edit the manifest.json inside .nuxt/dist/client (development) or dist/_nuxt/ (production)

...
"icons": [
    ...
    {
      "src": "/_nuxt/icons/icon_512.a97621.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
...

To solve my problem while deploying my app to Netlify, I created a small script to insert the purpose property in the manifest.

const fs = require('fs')
//this will look for the dist generated after running nuxt build
let dir = `${process.cwd()}/dist/_nuxt/`
const purpose = ['any', 'maskable']

fs.readdir(dir, (err, files) => {
  if (err) console.log('error: ' + err)
  else
    files.forEach((file) => {
      if (file.includes('manifest')) {
        console.log(`Manifest File Name: ${file}`)
        const manifestPath = `${process.cwd()}/dist/_nuxt/${file}`
        let manifest = fs.readFileSync(manifestPath, 'utf8')
        console.log('BEFORE EDITING')
        console.log(manifest)
        let manifestObj = JSON.parse(manifest)
        manifestObj.icons.forEach((icon) => {
          icon.purpose = purpose.join(' ')
        })
        manifest = JSON.stringify(manifestObj)
        fs.writeFileSync(manifestPath, manifest, 'utf8')
        manifest = fs.readFileSync(manifestPath, 'utf8')
        console.log('AFTER EDITING')
        console.log(manifest)
      }
    })
})

And added it to my package.json

"scripts": {
    "build": "nuxt build && node fix_manifest.js"
}

And this is the script running at Netlify

[Glutnix]

Chrome Lighthouse just gave me a point off for not having a maskable icon:

[abshirahmed]

Chrome Lighthouse just gave me a point off for not having a maskable icon:

same 😿

[thegoldgoat]

I am currently using @nuxtjs/[email protected] from npm
I have set
icon: { purpose: 'maskable' },

Still, the manifest doesn't get any purpose field.

Is there any way to get it working?

[AllanOricil]

I am currently using @nuxtjs/[email protected] from npm
I have set
icon: { purpose: 'maskable' },

Still, the manifest doesn't get any purpose field.

Is there any way to get it working?

Manually edit the manifest in the dist folder. or create a script to automate it for you before publishing your site. It worked for me.

[thegoldgoat]

Manually edit the manifest in the dist folder. or create a script to automate it for you before publishing your site. It worked for me.

I see, thanks for your response!

[pi0]

Hi! with 3.0.0 purpose option is available and defaulting to maskable. please be sure to have enough spacing for round icons. notes

[liyasthomas]

Working as expected 🎉

[liyasthomas]

What is the prescribed size / format for static/icon.png? I'm getting the following warning even though I'm using a 512x512px PNG image.

WARN  You are using a low quality icon, use icon png. See https://pwa.nuxtjs.org/modules/icon.html

https://github.com/nuxt-community/pwa-module/blob/f4eeda7ce05cdd7dda4e4c4ab81e986f6c94a951/lib/meta/module.js#L112

[pi0]

@liyasthomas It should only happen if you disabled icon or only having favicon.ico. Would you please share nuxt.config and directory structure (screen shot of static or assets) with a new bug report issue?

[liyasthomas]

Here's my screenshot of static folder.

And my nuxt.config.js

  pwa: {
    meta: {
      ogHost: process.env.BASE_URL,
      twitterCard: 'summary_large_image',
      twitterSite: options.social.twitter,
      twitterCreator: options.social.twitter,
      description: options.shortDescription,
      theme_color: options.app.background,
    },
    manifest: {
      name: options.name,
      short_name: options.name,
      description: options.shortDescription,
      start_url: '/',
      background_color: options.app.background,
      theme_color: options.app.background,
    },
  },

[pi0]

This error should be only happening if there is no icon.png file. Can you please somehow share the project issue is happening? (and opening new issue would be appreciated since it is not related to maskable icons)

[zorca]

This error should be only happening if there is no icon.png file. Can you please somehow share the project issue is happening? (and opening new issue would be appreciated since it is not related to maskable icons)

This error has been appearing for some time on every fresh Nuxt project. The icon.png file is located in the static folder.

[liyasthomas]

Raised a question here: https://cmty.app/nuxt/pwa-module/issues/c238

[thiscodes4u]

Having this very same issue. Latest Nuxt/PWA installed. The project structure looks like this:

"@nuxtjs/pwa": "^3.0.2",
"nuxt": "^2.14.4"

├── README.md
├── favicon.ico
├── icon.png
├── share-image.jpg
├── sw.js
└── videos

PWA using defaults settings in nuxt.config.js

modules: [
    // Doc: https://pwa.nuxtjs.org/
    '@nuxtjs/pwa',
  ],

[pi0]

Regarding low quality warning, i've created #341 and will check soon (seems related to #25 not maskable feature). Please use proper thread :)