MDN URL: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
What information was incorrect, unhelpful, or incomplete?
The description of the manifest suggests an "icons" key is required, but does not describe any limitations on the number, size, or type of icons required. It turns out, there are some!
Specific section or headline?
The heading "How do you make an app A2HS-ready?", inside the sub-heading "Manifest"
What did you expect to see?
Something along the lines of:
A collection of icons that the browser can use to represent this application. Different browsers on different platforms may prefer different icons in different contexts, but at minimum you must provide a PNG file of exactly 192x192px.
Did you test this? If so, how?
The MDN docs imply (by omission) that any icon will do. This is false, since my first attempt (a 128px SVG icon) did not work.
The Chrome DevTools' "Lighthouse" validator says:
Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any".
...so I resized my SVG icon to 256px (greater than 144px!), but this did not work.
The Google docs suggest that a 192px and a 512px image are required. This is blatantly false, since the MDN example works in Chrome with only a 192px image, but I tried doubling my SVG again up to 512px, still no success.
I scaled the SVG back down to 192px, but that didn't help either.
It was only when I rendered my icon to PNG that I got prompted to install my website as an app in (Linux) Chrome and (Android) Firefox.
MDN Content page report details
MDN URL: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
What information was incorrect, unhelpful, or incomplete?
The description of the manifest suggests an "icons" key is required, but does not describe any limitations on the number, size, or type of icons required. It turns out, there are some!
Specific section or headline?
The heading "How do you make an app A2HS-ready?", inside the sub-heading "Manifest"
What did you expect to see?
Something along the lines of:
Did you test this? If so, how?
The MDN docs imply (by omission) that any icon will do. This is false, since my first attempt (a 128px SVG icon) did not work.
The Chrome DevTools' "Lighthouse" validator says:
...so I resized my SVG icon to 256px (greater than 144px!), but this did not work.
The Google docs suggest that a 192px and a 512px image are required. This is blatantly false, since the MDN example works in Chrome with only a 192px image, but I tried doubling my SVG again up to 512px, still no success.
I scaled the SVG back down to 192px, but that didn't help either.
It was only when I rendered my icon to PNG that I got prompted to install my website as an app in (Linux) Chrome and (Android) Firefox.
MDN Content page report details
en-us/web/progressive_web_apps/add_to_home_screen