사용자에게 PWA를 설치하라는 메시지를 어떻게 표시합니까?

오늘의 나의 교훈. 사용 브라우저: 크롬

PWA를 설치하려면 등록된 서비스 워커와 관련 필드가 있는 매니페스트 파일이 필요합니다.

또한 HTML 파일의 요소에 클릭 이벤트를 첨부해야 합니다. 내 HTML 파일의 마지막 요소로 버튼 태그를 추가하고 CSS에서 표시를 없음으로 설정했습니다. 참고: 버튼 요소는 비어 있습니다.

다음 인라인은 자바스크립트 코드입니다.

let defferedPrompt;
const addbtn = document.querySelector('.btn');

window.addEventListener('beforeinstallprompt', event => {
    event.preventDefault();
    defferedPrompt = event
    addbtn.style.display = 'block';
});

addbtn.addEventListener('click', event => {
    defferedPrompt.prompt();

    defferedPrompt.userChoice.then(choice => {
        if(choice.outcome === 'accepted'){
            console.log('user accepted the prompt')
        }
        defferedPrompt = null;
    })
})

코드 설명:
beforeinstallprompt 이벤트를 수신하고 이벤트를 변수에 저장합니다. 그런 다음 이벤트 리스너를 HTML 요소에 연결하고 클릭 이벤트를 수신합니다. 또한 저장된 이벤트에서 prompt()를 호출하는 이벤트 리스너에 콜백 함수를 전달합니다. 프롬프트는 대화 상자를 표시합니다. 사용자 선택 속성을 사용하여 사용자의 작업을 캡처합니다. 사용자 선택은 사용자 선택을 반환하는 속성입니다. 사용자 선택이 수락과 같으면 설치가 시작되고 그렇지 않으면 대화 상자가 닫힙니다. 지연된 이벤트에 대해 한 번만 prompt()를 호출할 수 있습니다. 마지막으로 지연된 이벤트를 null로 설정합니다.

그게 68일째다.
내일 또 해보자