Мета-тег theme-color не содержит действительный CSS цвет - PullRequest
Новая
       63

Мета-тег theme-color не содержит действительный CSS цвет

0 голосов
/ 03 мая 2020

У меня есть приложение PWA , и когда я выполняю аудит с использованием инструментов разработки Chrome, я получаю это сообщение о том, что цветовой код CSS недействителен: 

Failures: The theme-color meta tag did not contain a valid CSS color.

Позволю себе не согласиться. Это действительный CSS цветной код.

Также на странице разработчика Google написано: Lighthouse does not test whether the values are valid CSS color values., но это противоречит тому, на что жалуется аудит.

Я искал это сообщение, и его очень мало, или я должен сказать, почти ничего, объясняя его обоснование.

Файл index.html содержит: 

<meta name="theme-color" content="#E8EAF6">

Файл manifest.json содержит: 

 "theme_color": "#E8EAF6",
  "background_color": "#fafafa",

Я тоже пробовал с белым цветом. Не лучше.

В убыток.

ОБНОВЛЕНИЕ: Я перезаписывал цвет темы неправильным использованием метода setMetaData. Я передавал ему объект json, в котором отсутствовало свойство цвета. Теперь я изменил его подпись и передал ему цвет фона: 

public setMetaData(title: string, description: string, color: string, image: string): void {
  this.title.setTitle(title);

  const tags: Array<MetaDefinition> = [
    { name: 'description', content: description },
    { name: 'theme-color', content: color },
    { name: 'twitter:card', content: 'summary' },
    { name: 'twitter:image', content: image },
    { name: 'twitter:title', content: title },
    { name: 'twitter:description', content: description },
    { name: 'apple-mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
    { name: 'apple-mobile-web-app-title', content: title },
    { name: 'apple-touch-startup-image', content: image },
    { name: 'og:title', content: title },
    { name: 'og:description', content: description },
    { name: 'og:image', content: image },
  ];
  tags.forEach((tag: MetaDefinition) => this.meta.updateTag(tag));
}

private setAppMetaData(): void {
  const title: string = this.translateService.instant('app.title');
  const description: string = this.translateService.instant('app.description');
  const themeColor: string = '#E8EAF6';
  const image: string = 'assets/icons/icon-192x192.png';
  this.screenDeviceService.setMetaData(title, description, themeColor, image);
}

javascript по-прежнему перезаписывает метатег в файле index.html, но на этот раз с правильным значением цвета: <meta name="theme-color" content="#E8EAF6">

...