오늘 사이트를 제대로 오픈하고, 이메일을 보내고, 사람들이 PWA를 설치하도록 해야 하는데 ![]()
![]()
![]()
당신의 좌절감을 이해하지만, 그건 아주 유용한 답변은 아닙니다.
지금 제가 할 수 있는 말은, 뭔가 정상적인 동작을 수정하고 있는 것처럼 보인다는 것입니다.
설치하신 플러그인이나 테마 구성 요소가 무엇인지 확인해 보실 수 있을까요? 다른 커스터마이징을 추가하셨나요?
수정: 죄송합니다, 이전 정보를 놓치고 있었습니다.
제 사이트만의 문제가 아닙니다. 모든 Discourse 사이트에서 이런 문제가 발생하는 건가요???
디스코urs에서는 왜 이런 현상이 발생하지만 다른 사이트에서는 그렇지 않은지에 대해 이미 설명드렸습니다.
고객님이신 만큼, 어떤 사이트와 연결되어 있는지 이미 확인하고 있습니다. 버튼의 색상은 제가 이전에 공유한 스크린샷과 정확히 동일합니다. 고객님의 화면처럼 밝은 색이 아닙니다.
커스터마이징이나 컴포넌트 없이 기본 테마에서도 동일합니다
흰색 하단 바에서 버튼이 매우 밝게 보이는 문제는 사용자 기기와 OS에 특화된 현상입니다. 제가 테스트한 다른 기기에서는 OS가 라이트 모드일 때 하단 바가 실제로 흰색으로 표시되지만, 버튼은 회색으로 유지되어 잘 보입니다. 따라서 사용자가 보고 있는 동작은 일반적인 현상이 아니며 다른 사용자에게 영향을 미치지 않습니다.
S ultra 22
Huawei mate20 pro
다만, Android OS가 라이트 모드인 상태에서 다크 테마의 Discourse PWA를 사용할 때의 경험이 이상적이지 않다는 점은 이해합니다. 말씀드린 대로, 향후 업데이트에서 이 시나리오를 어떻게 개선할 수 있을지 개발자와 디자이너와 내부 논의를 시작하겠습니다.
음, 이건 좀 이상하네요. 말씀하신 내용과 모순됩니다. 좀처럼 제대로 안 되는 것 같아요, 하하.
이건 라이트 모드의 삼성 S24입니다.
이건 라이트 모드의 구글 픽셀입니다.
아이폰 한 대는 아예 바가 로드되지 않았는데, 위에서 @chapoi 님이 겪었던 문제와 비슷합니다.
오래된 삼성 S22 한 대는 흰색 하단 바와 어두운 아이콘이 제대로 로드되었습니다. 나중에 다른 10명에게도 테스트를 시켜볼 예정이고, 더 업데이트해 드리겠습니다.
안드로이드 버전, 기기 등에 따라 크롬 브라우저가 일부 상황에서 이를 처리할 수 있다고 생각합니다.
PWA에서 <meta name="theme-color">는 안드로이드 크롬에서 상단 주소창 색상을 일관되게 변경합니다. manifest.json의 theme_color는 상태바와 때로는 다른 UI 요소에도 영향을 미치지만, 동작은 기기, 브라우저, 안드로이드 버전에 따라 다릅니다.
네이티브 하단 내비게이션 바는 일반적으로 웹 앱에서 제어할 수 없습니다. 일부 브라우저에서는 테마 색상이 적용될 수 있지만, 보장되지는 않습니다.
이것이 제가 Bubblewrap을 사용하여 사이트를 TWA로 전환한 이유 중 하나입니다. Bubblewrap은 하단 내비게이션 바 색상도 처리할 수 있습니다.
따라서 PWA에서는 상단 바를 스타일링할 수 있지만, 하단 내비게이션 바 제어는 일관성이 없습니다.
이것은 안드로이드 OS의 네이티브 요소이므로 아이폰에서는 이 내비게이션 바가 로드되지 않습니다.
그냥 좀 이상해요. 이전에는 이런 문제를 겪어본 적이 없거든요. 워드프레스 슈퍼 PWA를 9개 사이트에서 사용했는데 한 번도 문제가 없었거든요. discourse 사이트에서만 문제가 생겼어요. 말씀하신 것처럼 일관성 없는 동일한 문제를 겪으셨다면, 하단 바 스타일을 상단 바와 동일하게 만들어주셨으면 좋겠어요. 테스트해본 모든 기기에서 상단 바는 정상적으로 작동하거든요.
이 기능이 Firefox에서는 작동하지만 Chrome에서는 작동하지 않는 이유는 각 브라우저가 Android에서 PWA를 처리하는 방식에 달려 있습니다. Chrome은 시스템 바 색상을 지정할 때 Web App Manifest의 theme_color만 참조합니다. 매니페스트가 사이트의 루트 도메인에서 제공되지 않거나 올바른 색상이 지정되지 않은 경우, Chrome은 기본적으로 흰색으로 표시합니다. 반면 Firefox는 더 유연하여 페이지 자체에서 색상을 가져오므로, 사용자 정의 매니페스트가 없어도 바가 올바르게 표시됩니다.
앞으로 진행할 내용으로, 현재 다크 팔레트를 사용하는 호스팅된 디스커스 사이트가 있습니다. 다른 모든 팔레트는 비활성화되어 사용자가 선택할 수 없으며, 이는 우리의 브랜드와 일치합니다. 또한 사용자가 변경할 수 없는 테마 하나만 활성화되어 있습니다.
인스톨 가능한 앱이 우리에게 중요하기 때문에, 크롬에서 PWA의 하단 바를 #121212로 설정하는 방법은 무엇인가요?
다크한 사이트와 밝은 하단 바의 조합은 매우 눈에 띄고 보기 싫습니다.
앞서 말씀드린 것처럼, 이 시나리오에 대한 가능한 개선 사항을 모색하기 위해 내부 논의를 시작했습니다. 그러나 곧 다가올 Discourse 글로벌 미트업으로 인해 팀은 당장 변경 사항을 적용할 수 없으며, 안타깝게도 현재로서는 하단 바가 항상 어둡게 표시되도록 보장할 수 있는 우회 방법이 없습니다.
간단히 말씀드릴게요. 이제 이 문제가 엔지니어에게 배정되어 검토 중입니다. 다만, 연례 디스코urs 미팅이 매우 가까워지고 있어 단기적으로는 업데이트가 없을 것으로 보입니다(여기서 '단기’란 '몇 일’을 의미합니다).




