[오류] 모바일 웹앱 푸시알림 오류

오늘은 모바일 웹앱으로 접속(PWA x) 했을 때, 오류에 대해서 적어보려고 한다.

문제발생+) 백엔드 친구가 라이톤을 사용하면서 모바일로 접속한 후, 로그인을 했는데, 아무것도 안보인다는 것이었다. 나는 이걸 듣고 띠용했다. 그래서 빠르게 들어가서 확인을 해보니, 정말 로그인 한 후, 빈화면이 뜨는 것이다.

참고영상

뭐가 문제인지, 확인해보기 위해 핸드폰과 노트북을 연결해, 사파리에서 개발자도구로 모바일웹의 콘솔을 찍어보았다.

에러 원인

에러를 보면 Firebase Messaging SDK를 사용하는 브라우저가 푸시 알림 API를 지원하지 않는 경우 발생하는 것이었다.

즉, 모바일에서 푸시알림을 적용하려면 무조건 pwa 상태여야만 푸시알림 api를 지원할 수 있다.
(푸시알림이라는 자체가 자기 핸드폰의 오는 것이기 때문에 종속? 되어 있어야한다!)

그래서 현재 메인페이지 접속했을 때, 푸시알림을 띄우는데, 여기서 조건을 하나 더 걸어주기로 했다! 바로 notfication API를 쓸 수 있는 상태인지 체크를 하는 것이다. 이게 true가 나오면 알림을 띄우고, 아니면 안띄우게끔 에러가 안나게끔 하는 것이다!

코드 수정

• 기존 코드

//메인페이지.tsx 일부
  //모바일일때만 푸시알림 허용 창 띄우기
  const isTouchDevice = "ontouchstart" in window;
  // 푸시알림 허용 창 띄우기 로직
  useEffect(() => {
    if ( Notification.permission === "default" && isPWA() && isTouchDevice) {
      setModal((modal) => ({ ...modal, notificationPermissionModal: true }));
    }
  }, []);

기존에는 바로 Notification.permission으로 알림 상태를 체크했는데, 이 api가 모바일 웹앱에서는 동작을 안하는 것이다!!! 그래서 나는 여기에 조건을 하나 더 걸었다.

"Notification" in window;
브라우저에서 푸시 알림(Notification API)을 지원하는지 확인하는 간단한 방법이다.

• 변경 코드

  //모바일일때만 푸시알림 허용 창 띄우기
  const isTouchDevice = "ontouchstart" in window;
  const isNotification = "Notification" in window;
  // 푸시알림 허용 창 띄우기 로직
  useEffect(() => {
    if (isNotification && Notification.permission === "default" && isPWA() && isTouchDevice) {
      setModal((modal) => ({ ...modal, notificationPermissionModal: true }));
    }
  }, []);

수정 후 영상

이제 다시 잘 된다!!!!!