Discourse를 PWA로 설치하기 쉽게 만들기

기여 기능
38

테마 컴포넌트를 만들어서 버튼을 추가했습니다.

새로운 테마 컴포넌트를 생성하세요..

다음과 같은 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에서 테스트했습니다.

6개의 좋아요