와, 어떻게 해도 이 PNG로 변환한 파일은 JPEG로 표시됩니다. 처음에는 Preview가 변환을 제대로 하지 않은 줄 알았는데, 신뢰할 수 있는 Affinity Photo를 사용해도 마찬가지였습니다.
해당 설정은 변경한 적이 없다고 생각하는데, 옆에 ‘초기화’ 옵션이 없거든요.
다른 PNG 이미지 파일을 업로드하면 파일 형식이 그대로 유지됩니다. 이 파일에 대해 Discourse가 정말로 변환하고 싶어하는 것이 있는 것 같습니다. 아이디어가 있으신 분 계신가요?
잘 알려지지 않았지만 알려진 버그에 직면한 것 같습니다. 해당 버그는 위의 커밋으로 수정되었습니다. 다만, 이 커밋은 아직 Discourse의 안정 버전에는 포함되지 않았습니다.
일시적으로 recompress original jpg quality 설정을 100으로 변경하면 변환이 일어나지 않도록 방지할 수 있습니다.
(…그리고/또는 내보내는 png의 품질을 recompress original jpg quality 설정 값보다 낮게 조정해 볼 수도 있습니다.)
로고가 업로드된 후에는 해당 설정을 이전 값으로 반드시 되돌려 주세요!
한 주 안에 Discourse 버그를 두 개나 발견하다니, 상을 하나 받아도 될 것 같아요. 
하지만 두 가지 조치를 모두 취했는데도 파일이 여전히 jpeg로 변환되고 있습니다. 설정을 100%로 변경하고, 이미지를 92% 품질의 jpg로 저장한 후 PNG로 내보냈거든요(PNG의 품질을 직접 변경할 수 없었나요?). 다른 우회 방법이 있거나, 제가 잘못한 부분이 있을까요?
Mozilla Firefox에서도 해당 옵션이 표시되지 않습니다.
iOS 기기(특히 이제 PWA를 지원하는 상황에서)에는 왜 그 설치 배너가 표시되지 않는지 이유가 있나요?
제 Pixelbook Go에서도 놀라울 정도로 잘 작동합니다. Chrome OS에서 PWA는 필수입니다.
iOS 브라우저에 이 기능이 없으며, 추가할 계획도 없기 때문입니다.
앞서 제가 제안했던 것은, 이 기사에 설명된 대로 웹사이트 어딘가에 PWA 설치용 버튼이나 링크가 왜 없어야 하는지입니다.
이미 수년 동안 사용해 왔습니다:
죄송합니다, 저는 PWA가 없는 사용자를 위한 덜 눈에 띄는 영속적 버튼/링크, 예를 들어 메뉴에 있는 것을 말씀드린 것입니다.
이 기능이 유용하다고 생각하는 이유는, 앱을 설치하려는 사용자가 있을 때 그 사용자가 어떤 상태인지 알 수 없고, Q&A를 진행하는 데 많은 에너지가 소모되기 때문입니다. 사용자가 따라 할 수 있는 확실한 2단계 프로세스가 있다면 좋겠습니다. 즉, 햄버거 메뉴로 이동 → 앱 설치. 그러면 사용자의 TL(타임라인) 상태, 방문 횟수, 배너를 닫았는지, 과거에 앱을 삭제했는지, 어떤 브라우저를 사용 중인지, 그리고 브라우저가 설치 옵션을 어떻게 표현하는지 등을 걱정할 필요가 없습니다.
여기서 혼란(제 혼란을 포함해서)이 많이 생기는 이유는 브라우저에 따라 PWA 설치 옵션이 다르기 때문인 것 같습니다:
Android Chrome (즉, 기본 브라우저): 공유하신 스크린샷을 여기서 받으신 것 같습니다. 여기서는 햄버거 메뉴에 “앱 설치” 옵션이 있는 것처럼 보입니다. 모든 브라우저에서 이 옵션이 제공되면 좋겠지만, 현재로서는 불가능한 것 같습니다.
iPhone Safari (기본 브라우저): 햄버거 메뉴에서 설치할 수 있는 버튼이 없습니다. 설치하려면 공유 아이콘(위쪽 화살표가 있는 사각형)을 누르고, 아래로 스크롤하여 "홈 화면에 추가"를 선택해야 합니다. 여기에서의 토론을 들어보면 햄버거 메뉴에 버튼을 추가하는 것은 불가능한 것 같습니다. 이렇게 하면 앱이 홈 화면에 저장되긴 하지만, 이전 상태를 저장하는 것과 같은 PWA 기능을 단독으로 제공하는지는 확실하지 않습니다.
데스크톱 Chrome: 제 Mac Chrome 브라우저의 햄버거 메뉴에는 설치 버튼이 없습니다. 원래 있어야 하나요? 여기에 추가할 수 있을까요?
데스크톱 Safari: 제 Mac Safari 브라우저의 햄버거 메뉴에도 설치 버튼이 없습니다. 원래 있어야 하나요? 여기에 추가할 수 있을까요?
네, @JQ331 님의 말씀에 동의합니다.
Falco님의 제안은 Chrome 메뉴를 활용하는 것입니다. 여기서 말하는 햄버거 메뉴는 브라우저의 것이 아니라 Discourse의 메뉴를 의미합니다. 앞서 몇몇 분들이 Safari나 Firefox에서는 작동하지 않는다고 지적했듯이, 이 옵션은 브라우저에 따라 달라집니다. 설치가 가능하다 해도 해당 옵션이 제공되지 않는 경우가 있으므로, Discourse 메뉴 옵션이 가장 적절해 보입니다. 또한 사용자가 Chrome 메뉴를 확인하지 않을 수 있으므로, 이 옵션의 존재를 상기시켜 줄 수 있다는 장점도 있습니다.
Apple이 제어하는 영역에는 설치 버튼을 추가할 수 없으며, Apple은 여러 차례 개발자가 이러한 버튼을 생성하는 것을 절대 허용할 의사가 없다고 명시했습니다.
제 환경에서는 해당 버튼이 있습니다:
데스크톱에서는 주소 막대에도 표시됩니다.
JPG 로고 관련 문제 때문에 웹사이트에서 해당 버튼이 표시되지 않는 것입니다. PWA는 빠르게 변화하는 기술이며, 기준이 항상 바뀌고 있습니다. 최대 PWA 호환성을 원하신다면 기본 릴리스 채널 사용을 권장합니다.
저는 크롬 메뉴가 아니라 디스커스 햄버거 메뉴를 말씀드린 것입니다. 실제로 보니 안드로이드 스크린샷도 디스커스 햄버거 메뉴가 아니라 크롬 메뉴에서 촬영된 것이었습니다.
디스커스 햄버거 메뉴에 해당 버튼이 있으면 좋겠습니다. 사용자가 더 자주 볼 수 있을 뿐만 아니라, PWA로 설치하는 방법에 대한 안내가 조금 더 명확해질 것입니다. 개발자에게 큰 부담은 되지 않을 수 있지만, 유용한 기능이 될 것입니다.
크로미움 기반 브라우저만이 설치 프롬프트를 표시하는 것 같습니다. Mozilla Firefox와 Safari는 서로 다른 렌더링 엔진을 기반으로 합니다.
테마 컴포넌트를 만들어서 버튼을 추가했습니다.
새로운 테마 컴포넌트를 생성하세요..
다음과 같은 JS 코드를 헤더에 추가한다고 가정해 보겠습니다.
<script>
let deferredPrompt; // 설치 프롬프트를 표시할 수 있도록 허용
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt 발생");
// Chrome 76 및 이전 버전에서 프롬프트가 자동으로 표시되지 않도록 방지
e.preventDefault();
// 나중에 트리거할 수 있도록 이벤트를 저장합니다.
deferredPrompt = e;
// 설치 버튼 표시
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// 프롬프트 표시
deferredPrompt.prompt();
installButton.disabled = true;
// 사용자가 프롬프트에 응답할 때까지 대기
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("PWA 설치 수락됨");
installButton.hidden = true;
} else {
console.log("PWA 설치 거부됨");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled 발생", evt);
});
</script>
그리고 설치 버튼이 필요한 위치에 다음 HTML을 배치하세요.
<button id="install_button" hidden>설치</button>
기본적으로 숨겨져 있으며, PWA가 설치되지 않은 경우에만 나타납니다.
Chrome에서 테스트했습니다.
훌륭하네요! 정식 테마 컴포넌트로 만들 생각을 해보실 수 있을까요? 아니면 더 좋게, 햄버거 링크 테마 컴포넌트를 수정해서 이 기능을 포함하는 건 어떨까요? 바로 제가 그 기능을 넣고 싶은 곳이 그곳이니까요!
햄버거 메뉴에 앱 설치 버튼을 표시할 수 있도록 수정된 코드를 업로드해 주시겠어요?
이게 왜 안 되는지 모르겠어요. 솔직히 이 분야에 초보라 잘 모르겠습니다.
컴포넌트를 불러오고, 헤더에 js를 추가하고, 컴포넌트를 기본 테마로 설정했습니다.
근데 HTML 스크립트는 – 게시글에 HTML을 넣을 수 있나요? 안 되는 것 같긴 한데. 만약 불가능하다면, 실제로 유용하게 쓸 수 있는 곳은 어디인가요?
감사합니다! 정말로 이걸로 도움이 될 수 있기를 바랍니다.
이건 안드로이드에서만 작동할 것 같은데?