next js에서 pwa 다운로드 버튼 생성하기

데스크탑에서 크롬이나 모바일 안드로이드 같은 경우 beforeinstallpropmt 이벤트를 사용해서 다운로드 버튼을 만들 수 있지만 ios는 작성일 기준까지도 불가능하다. 

 

1. beforeinstallpropmt 이벤트 등록하기

import React, { useEffect, useRef } from "react";

...

let deferredPrompt = useRef(null);

useEffect(() => {
    console.log("Listening for Install prompt");
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      deferredPrompt.current = e;
    });
    
    //설치가 되어있다면 버튼은 숨긴다
    if (!deferredPrompt.current) {
      return dispatch({
        type: "HIDE_BUTTON",
      });
    }

//버튼을 보여줌
    dispatch({
      type: "SHOW_BUTTON",
    });
  }, []);
  
  ...

useRef를 사용하여 defferdpropmt변수에 beforeinstallpropmt 이벤트를 넣는다

 

2. 설치 함수 만들기

const installApp = () => {
    if (!deferredPrompt.current) return false;
    
    //홈화면의 추가를 실행시킨다
    deferredPrompt.current.prompt();
    
    //실행 후 유저가 설치를 했는지 안했는지를 알 수 있다
    deferredPrompt.current.userChoice.then((choiceResult) => {
      //설치 했을 때
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the A2HS prompt");
        dispatch({
          type: "HIDE_BUTTON",
        });
      } else {
      //설치 하지 않았을 때
        console.log("User dismissed the A2HS prompt");
      }
    });
  };

 

3.버튼에 이벤트 등록

...

return (
  <>
    <button onClick={installApp}>다운로드</button>
  </>
);

 

next js에 pwa 적용하기 : https://jcon.tistory.com/171