-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No maskable icon support #259
Comments
Hi! Has there been progress on this feature? I am looking forward to using it. :) |
I totally don't understand what is going on.. 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.. : |
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. |
@pi0 I too would really like the icon |
+1 |
Could you give us an estimate of when this will be released? |
workaround for testing this the purpose feature:
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
|
I am currently using Still, the manifest doesn't get any 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. |
I see, thanks for your response! |
Hi! with 3.0.0 purpose option is available and defaulting to maskable. please be sure to have enough spacing for round icons. notes |
Working as expected 🎉 |
What is the prescribed size / format for
Line 112 in f4eeda7
|
@liyasthomas It should only happen if you disabled icon or only having |
Here's my screenshot of static folder. And my
|
This error should be only happening if there is no |
This error has been appearing for some time on every fresh Nuxt project. The icon.png file is located in the static folder. |
Raised a question here: https://cmty.app/nuxt/pwa-module/issues/c238 |
Having this very same issue. Latest Nuxt/PWA installed. The project structure looks like this:
PWA using defaults settings in
|
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
addingpurpose
field to PWA images will make icons compatible for maskable icons.The text was updated successfully, but these errors were encountered: