fix(pwa): add maskable icon to web manifest

[userquin]

Latest changes on Chromium based browsers complains about not having a maskable icon (LightHouse): just added the variants adding 10px padding to current apple-touch-icon.png icons.

Tested on Android from Chrome:

I need someone to check it on iOS...

/cc @antfu sorry man, can you try installing preview and check the icon is ok?

/cc @josh-collinsworth can you test preview PR on Edge Mobile?

closes #1449

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	30566b1
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/63d18c6c55bef900080c4052
😎 Deploy Preview	https://deploy-preview-1456--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	30566b1
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/63d18c6c5be43b000844ebb8

[josh-collinsworth]

@userquin Know what? I'm sorry, I'm wrong. I think the "bug" I reported is actually a normal effect from using non-Chrome browsers to install PWAs on Android, and not anything to do with the PWA itself.

I must have used Chrome to install the ones that worked properly, and used Edge to install the others, and completely forgotten.

So yeah, I can confirm that it installs properly when using Chrome as the installing user agent, and that it does not work with Edge—but, again, this is expected.

Still, the maskable icon is a win, though I'd recommend it be higher resolution. (Here's what the PWA loading screen looked like before—all black—and what it looks like with this PR—the round, lower-res icon.)

Before:

After:

[josh-collinsworth]

Unless there's time and energy to spend on making the maskable icon high-res, I'd suggest maybe this issue and PR should just be closed, since the default seemed to work well for me. (Again, I apologize for sending you on a wild goose chase with this report.)

[userquin]

@josh-collinsworth thx for feedback, I'll add a 512x512 maskable icon, I need to create and optimize them...

[userquin]

Unless there's time and energy to spend on making the maskable icon high-res, I'd suggest maybe this issue and PR should just be closed, since the default seemed to work well for me. (Again, I apologize for sending you on a wild goose chase with this report.)

can you test again when ready?

[josh-collinsworth]

Looks much better, resolution-wise. It does still have the light-colored circle background. If that's the desired effect, I'd say 👍

[userquin]

Looks much better, resolution-wise. It does still have the light-colored circle background. If that's the desired effect, I'd say 👍

Looks much better, resolution-wise. It does still have the light-colored circle background. If that's the desired effect, I'd say 👍

can you test again? maskable icons sizes were wrong (180px, updated to 512px)

[josh-collinsworth]

Still looks good on my end.

[patak-dev]

Awesome!

[dunxen]

Sorry to draw attention to this again, but it seems on the iOS 16.4 Beta (which I'm running now) it seems it prefers the PWA icons (since they're supporting a lot more on the manifest side of things also push which has been working for me with Elk 🎉).

This is how the icon looks for me now:

I can open another issue if one does not currently exist.

[userquin]

@dunxen so, it seems iOS now using 512x512 pwa icon instead maskable one and ignoring apple-touch-icon?

[dunxen]

@dunxen so, it seems iOS now using 512x512 pwa icon instead maskable one and ignoring apple-touch-icon?

Yes looks like that!

[userquin]

@dunxen FYI: https://twitter.com/firt/status/1628378241726545921

[dunxen]

@dunxen FYI: https://twitter.com/firt/status/1628378241726545921

Thanks! Seems to be working on 16.4 Dev Beta 2: