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

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

Манифест.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"
}

Скриншот: Манифест в Chrome Devtools

ИЗМЕНИТЬ

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

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

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

Какие-либо предложения?


create-react-app google-chrome-devtools manifest.json pwa
person Apocabal    schedule 06.06.2018    source источник
comment
Вы выяснили, в чем проблема с заставкой? Имея ту же проблему.   -  person JacobTheDev    schedule 25.09.2018
comment
Прошло много времени, но я думаю, что это была просто моя глупая ошибка. Изображения PNG имели неправильный размер. Я думал, что экспортировал их как 512x512px, но когда проверил их, они были как 499x501 или что-то в этом роде.   -  person Apocabal    schedule 06.12.2018

Ответы (2)


arrow_upward
2
arrow_downward

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

  "start_url": "/index.html",

or

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

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

person Anand    schedule 06.06.2018
comment
Спасибо за ваш ответ, решение действительно состояло в том, чтобы разместить приложение на живом сервере, а не просто просматривать его через локальный хост. Однако изображение заставки по-прежнему не отображается. Я отредактировал свой пост соответственно. - person Apocabal; 13.06.2018

arrow_upward
12
arrow_downward

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

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

person Crozeta    schedule 19.07.2019
comment
Я нахожусь в процессе преобразования приложения Angular в PWA. Angular CLI автоматически добавляет тег <meta name="theme-color">, так что это решение для меня. Мне нужно было обновить мой манифест И index.html. Спасибо, что поделился. - person vitale232; 11.02.2020