PWA manifest.json - «theme_color» и «background_color» не работают, заставка не отображается на устройстве Android - PullRequest
Новая
       64

PWA manifest.json - «theme_color» и «background_color» не работают, заставка не отображается на устройстве Android

0 голосов
/ 06 июня 2018

Когда я смотрю на manifest.js в Chrome DevTools, я вижу, что там есть логотип и цвета.Однако, когда я запускаю веб-сайт со своего домашнего экрана на устройстве Android, не загружается ни фон, ни цвет темы, ни заставка.Любая идея почему?

Manifest.json: 

{
  "short_name": "Example",
  "name": "Example",
  "icons": [
    {
      "src": "images/logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/logo_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./",
  "display": "standalone",
  "theme_color": "#a300c4",
  "background_color": "#c46a00"
}

Снимок экрана: Manifest in Chrome Devtools

РЕДАКТИРОВАТЬ

Я нашел ошибку.Я просматривал веб-сайт через удаленное устройство, используя Chrome DevTools.Переадресация портов на localhost: 3000 не соответствует требованию https для запуска заставки.

Теперь программа pwa запускается в автономном режиме, цвета и заставка отображаются правильно.

Однако , логотип заставки не отображается, и я понятия не имею, почему.Путь к изображению правильный, и изображение существует с правильным именем файла и типом.

Есть предложения?

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

"Если на вашей странице уже есть метатег цвета темы - например, <meta name="theme-color" content="#2196F3"> - тогда вместо значения в манифесте будет использоваться конфигурация уровня страницы."

from: https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color

0 голосов
/ 07 июня 2018

Единственное, что я вижу неправильно в этом манифесте - это начальный URL.Измените его на что-то вроде ниже 

  "start_url": "/index.html",

или 

  "start_url": "https://example.com/myapp/",

Если это не помогло, разместите ваше приложение в каком-либо общедоступном домене и предоставьте URL-адрес.

...