PWA audit: warn when no maskable icons are declared

[mathiasbynens]

Feature request summary

In the PWA audit, consider checking if the manifest declares at least one maskable icon.

What is the motivation or use case for changing this?

Stable Chrome for Android and other browsers have supported maskable icons for a while now. Chrome DevTools can be used to check existing icons for maskability. Lighthouse could help guide developers to optimal-looking icons on any platform!

How is this beneficial to Lighthouse?

Optimal "add to homescreen" functionality is part of building a great PWA, and should therefore be reflected in the PWA audit scoring.

[patrickhulce]

Woah this is really neat! Definitely seems worth surfacing in some way.

should therefore be reflected in the PWA audit scoring.

A warning wouldn't affect the scoring of an audit. If we really wanted to move the needle here, I feel like it should become part of the base icon requirement, but that might be a bit extreme. Are there any valid use cases where one would not want to use a maskable icon?

[mathiasbynens]

Are there any valid use cases where one would not want to use a maskable icon?

I can't think of any. It's strictly better to provide a maskable icon. Even in the case where you explicitly want to re-use the same image resource for both maskable and non-maskable icons, you'd still want to mark that resource as maskable in the manifest (i.e. "purpose": "any maskable").

[paulirish]

ensure that important information is within a “safe zone” circle with a radius equal to 40% of the image’s size.

via https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/

@NotWoods, how'd you come at this 40% number? how do we know its not 43%, for example. :)

[NotWoods]

@paulirish The safe zone is specified in the spec: https://www.w3.org/TR/appmanifest/#icon-masks

[connorjclark]

This feels like a P1 to me, given the priority that DevTools gave this feature.