search

nuxt-community / pwa-module

Zero config PWA solution for Nuxt.js
https://pwa.nuxtjs.org
MIT License
1.24k stars 171 forks source link

feat: set default theme_color #426

Open debs-obrien opened 3 years ago

debs-obrien commented 3 years ago

In order to get full scores on lighthouse we need to have the theme_color defined. At the moment it is set as undefined which means this will not be added to the head meta and therefore an error will show and you will not get full pwa score out of the box. Solution is to set the default color to white and allow users to modify it to another color if needed.

Screenshot 2021-01-21 at 13 32 24

The theme color only works for android devices and setting it will not actually do anything on ios devices but not setting it will cause an error and will not give full pwa score

https://web.dev/themed-omnibox/?utm_source=lighthouse&utm_medium=devtools

Lighthouse 7 is soon to be released and there are major changes to pwa scoring but theme_color is still the only one that is failing so this will fix not only for Lighthouse 6 but also for Lighthouse 7

https://github.com/GoogleChrome/lighthouse/releases

cc @pi0

pi0 commented 3 years ago

We was once using loading bar color as default but it was making design issues so had to revert. Have to test #ffff value on an android device to see how works with dark theme. If it changes behavior, we may use a warning instead that users have to set it (or set to null)

Also would be nice if can lint markdown in another pr :P (no worries btw)

debs-obrien commented 3 years ago

ok sounds good. I don't own an android device so can't test it but at least a warning so that they add a color would be good rather than only knowing it from running lighthouse.

Yeah sorry my editor decided to lint everything. Managed to get rid of js/ts lint differences but markdown seemed to decide to stay 😬.