Проблемы с цветом нижней панели навигации Android в Discourse PWA

Я должен был сегодня запустить сайт, рассылать письма и просить людей установить PWA :rofl::rofl::rofl:

Понимаю ваше разочарование, но это не очень полезный ответ.

На данный момент могу лишь сказать, что похоже, какое-то изменение влияет на обычное поведение.

Можете проверить, какие плагины или компоненты темы у вас установлены? Добавляли ли вы какие-либо другие настройки?

Редактирование: не обращайте внимания, упустил из виду более раннюю информацию.

Это не только мой сайт. Это любой сайт на Discourse???

Я уже объяснил, почему это происходит в Discourse, но не на других сайтах.

Поскольку вы наш клиент, мы уже видим, с каким сайтом вы связаны. Цвета кнопок точно такие же, как на скриншоте, который я ранее отправил. Они не такие светлые, как у вас.

На стандартной теме без кастомизации или компонентов то же самое.

Проблема с тем, что кнопки выглядят очень светлыми на белой нижней панели, специфична для вашего устройства/ОС. На других устройствах, которые я проверял, нижняя панель действительно белая, когда ОС находится в светлом режиме, но кнопки остаются серыми и видимыми. Таким образом, то, что вы наблюдаете, не является типичным и не затрагивает других пользователей.

S ultra 22

Huawei mate20 pro

Тем не менее, мы понимаем, что опыт использования PWA с темной темой Discourse при включенном светлом режиме Android-ОС не идеален. Как я уже сказал, мы инициируем внутреннее обсуждение с нашими разработчиками и дизайнерами, чтобы рассмотреть, как можно улучшить эту ситуацию в будущих обновлениях.

Ну, это странно и противоречит тому, что вы сказали. Получается то попадание, то промах, ха-ха.

Это Samsung S24 в светлой теме

Это Google Pixel в светлой теме

На одном iPhone панель вообще не загрузилась, как в проблеме @chapoi, о которой вы писали выше.

На более старом Samsung S22 всё загрузилось правильно: белая нижняя панель и более тёмные иконки. Позже ещё 10 человек проведут тест, и я обновлю информацию.

Я думаю, что браузер Chrome в некоторых случаях может справиться с этим, в зависимости от версии Android, устройства и т. д…

В PWA мета-тег <meta name="theme-color"> надежно меняет цвет верхней адресной строки в Chrome на Android. Параметр theme_color в manifest.json влияет на строку состояния и иногда на другие элементы интерфейса, но поведение варьируется в зависимости от устройства, браузера и версии Android.

Управлять нижней панелью навигации нативного интерфейса из веб-приложения обычно нельзя. Некоторые браузеры могут применять цвет темы, но это не гарантируется.

:up_arrow: Это одна из причин, по которой я преобразовал свой сайт в TWA, используя Bubblewrap, который также может управлять цветом нижней панели навигации.

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


iPhone не загрузит эту панель навигации, поскольку это нативный элемент операционной системы Android.

Это просто странно, я никогда раньше не сталкивался с этой проблемой. Я использовал плагин WordPress Super PWA на 9 сайтах, и проблем не возникало. Только на сайте с Discourse. Как вы и отметили, вы столкнулись с той же проблемой несогласованности. Надеюсь, они смогут сделать стиль нижней панели таким же, как у верхней, поскольку она работает корректно на всех протестированных нами устройствах.

@dax @chapoi ещё более странно. Если я установлю PWA на свой телефон через Firefox, всё работает идеально. По крайней мере, теперь я вижу нижние кнопки.

Это в светлой теме

Причина, по которой это работает в Firefox, но не в Chrome, заключается в том, как каждый браузер обрабатывает PWA на Android: Chrome учитывает только свойство theme_color в манифесте веб-приложения для окрашивания системной панели. Если манифест не предоставляется с корневого домена сайта или не содержит правильный цвет, Chrome просто использует белый цвет по умолчанию. Firefox более гибок и берет цвета непосредственно со страницы, поэтому панель отображается корректно даже без специального манифеста.

Итак, в дальнейшем у меня есть размещённый сайт Discourse с тёмной палитрой; все остальные палитры отключены, чтобы пользователи не могли их выбрать, что соответствует нашему бренду. У нас включена одна тема, которую пользователи не могут изменить.

Как можно сделать нижнюю панель #121212 в PWA в Chrome, поскольку возможность установки приложения для нас важна?

Тёмный сайт и светлая нижняя панель выглядят очень отвлекающе и ужасно.

Как я уже говорил ранее, я инициировал внутреннее обсуждение для изучения возможных улучшений в этом сценарии. Однако, в связи с предстоящим глобальным митапом Discourse, команда не сможет внести какие-либо изменения в ближайшее время, и, к сожалению, на данный момент не существует обходного пути, который гарантировал бы, что нижняя панель всегда будет отображаться в тёмном цвете.

Краткое дополнение. Это теперь назначено инженеру для проверки. Однако имейте в виду, что ежегодная встреча Discourse проходит совсем скоро, поэтому, думаю, в ближайшее время (под «ближайшим временем» я имею в виду «дни») обновлений не будет.