Overview
When your web app is loading from a user's homescreen, the browser uses the
background_color property to draw the background color of the browser while
the app loads. This creates a smooth transition between launching the app and
loading the app's content.
Recommendations
Add a background_color property in your Web App Manifest. The value can be any
valid CSS color.
{
...
"background_color": "cornflowerblue",
...
}
Check out Manifest Exists
for a list of guides that teach you how to properly
implement and test "Add to Homescreen" support in your app.
More information
Audit passes if the manifest contains a background_color property.
The manifest that Lighthouse fetches is separate from the one that Chrome is
using on the page, which can possibly cause inaccurate results. Lighthouse does
not validate that the value is a valid CSS color.
Feedback
Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
