1. 환영합니다
이 실습에서는 기존 설치 가능한 PWA를 가져와 맞춤 인앱 설치 버튼을 추가합니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 다섯 번째입니다. 이전 Codelab은 탭에서 작업 표시줄로였습니다. 이 시리즈에는 Codelab이 3개 더 있습니다.
학습할 내용
- 맞춤 인앱 PWA 설치 버튼 만들기
유의해야 할 사항
- 자바스크립트
필요한 항목
- 서비스 워커를 지원하는 브라우저
2. 설정하기
이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.
저장소를 클론하는 경우 pwa04--prompt-measure-install 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.
이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.
소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.
키 파일
js/main.js- 기본 애플리케이션 JavaScript 파일
3. 설치 버튼 설정
설치 프롬프트를 추가하고 설치 이벤트를 캡처하기 전에 몇 가지 설정을 완료해야 합니다. 먼저 js/lib/install.js 파일을 만들고 다음 코드를 추가합니다.
export class Install {
/**
* @param {DOMElement} trigger - Triggering element
*/
constructor(trigger) {
this._prompt;
this._trigger = trigger;
}
/**
* Toggle visibility of install button
* @param {string} action
*/
toggleInstallButton(action = 'hide') {
if (action === 'hide') {
this._trigger.style.display = 'none';
} else {
this._trigger.style.display = 'block';
}
}
}
그런 다음 js/main.js의 DOMContentLoaded 이벤트 하단에 다음 코드를 추가합니다.
// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));
설명
이 코드는 다음 단계에서 사용될 Install 클래스를 설정하고 실행 중인 애플리케이션에 연결합니다.
4. 설치 프롬프트 리스너 추가
설치 버튼 트리거를 사용하여 PWA 설치를 실제로 트리거하려면 설치 프롬프트를 캡처해야 합니다. 설치되면 캡처된 설치 프롬프트를 재설정해야 합니다. 이렇게 하려면 js/lib/install.js의 Install 클래스에 있는 constructor에서 다음을 실행하는 코드를 작성합니다.
설치 프롬프트 캡처
window에서beforeinstallprompt이벤트를 수신 대기합니다.- 이벤트가 실행되지 않도록 방지
- 프롬프트 캡처
- 설치 버튼 트리거 표시
설치 시 메시지 재설정
window에서appinstalled이벤트를 수신 대기합니다.- 캡처된 프롬프트 재설정
- 설치 버튼 트리거 숨기기
5. 인앱 버튼에서 설치 트리거
프롬프트가 캡처되면 PWA의 설치 버튼이 프롬프트를 트리거할 수 있어야 합니다. 이렇게 하려면 js/lib/install.js의 Install 클래스에 다음을 추가하세요.
async설치를 트리거하는 메서드입니다.- 캡처된 프롬프트를 사용하여 설치를 요청합니다.
await: 사용자가 선택한 프롬프트- 프롬프트 재설정
- 사용자가 설치 메시지를 수락한 경우 설치 버튼 숨기기
- 설치 트리거를 호출하는 클래스의
constructor에click이벤트 리스너를 추가합니다.
6. 축하합니다.
지금까지 자체 인앱 설치 버튼에서 PWA 설치를 트리거하는 방법을 알아봤습니다.
이 시리즈의 다음 Codelab은 PWA 강화하기입니다.