PWA Install Ready

PWA를 설치할 수 있음을 표시하고 사용자 지정 인앱 설치 흐름을 제공하는 방법

1. beforeinstallprompt 이벤트 실행

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

2. 인앱 설치 흐름

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null;
});

https://web.dev/customize-install/?fbclid=IwAR04KRJPbp9alCuR2M_sAmn9bh65uFsAXxmCmBzGYeHHfsl0egu8-_t0Hgo 

자신만의 인앱 설치 경험을 제공하는 방법