next + pwa 홈화면에 추가 버튼 생성

beforinstallpropt라는 wepAPI를 사용하여 클릭시에 홈화면에 추가 할 수 있도록 했다. 다만 ios에서는 불가능하고 안드로이드만 가능하다

 

useEffect에서 이벤트를 생성한다

  let installPrompt = null;
  
  useEffect(() => {
    console.log('Listening for Install prompt');
    window.addEventListener('beforeinstallprompt', (e) => {
      // For older browsers
      e.preventDefault();
      console.log('Install Prompt fired');
      installPrompt = e;
      // See if the app is already installed, in that case, do nothing
      if (
        (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) ||
        window.navigator.standalone === true
      ) {
        return false;
      }
    });
  }, []);

 

클릭시에 실행할 함수

const installApp = async () => {
    if (!installPrompt) {
      alert('이미 다운로드 했습니다')
      return false;
    }

    installPrompt.prompt();

    let outcome = await installPrompt.userChoice;

    if (outcome.outcome == 'accepted') {
      console.log('App Installed');

    } else {
      console.log('App not installed');
    }
    // Remove the event reference
    installPrompt = null;
  };

참고 : https://blog.anam.co/progressive-web-apps-with-create-react-app/