🔔 푸시 알림 구현하기

🎈 푸시 알림의 필요성

사용자의 위치를 기반 으로 주변 사용자와 소통 할 수 있다는 특징을 가진 캠핑핑을 만들면서,
주변 사용자와 소통을 위해서는 사용자가 웹 앱에 접속해 있지 않더라도
메시지에 대한 알림을 받을 수 있어야 원활한 소통이 가능하다고 생각이 들었다.
그래서 오프라인 시에도 푸시 알림을 받을 수 있으면 좋겠다고 생각했다.

뿐만 아니라, 푸시 알림 기능을 활용하게 되면 추후 업데이트나 이벤트 등의 소식을 즉시 전달하여
사용자에게 사용을 유도하고 편의성을 향상할 수 있을 거라고 생각되었다.

❗️ 푸시 알림 구현하기

📍 서비스 워커 등록하기

PWA 에서 푸시 알림을 사용하려면 서비스 워커( Service Worker )를 등록해야 한다. 서비스 워커를 등록하면 백그라운드에서 실행되며 푸시 메시지를 처리할 수 있다. 오프라인 환경에서도 앱이 동작할 수 있도록 설정하기 위해서 next-pwa 라이브러리 를 활용했다.

📃 PWA 관련 포스팅

  const registerServiceWorker = async () => {
    try {
      const registration =
        await navigator.serviceWorker.register('/service-worker.js');
      console.log('서비스 워커 등록 성공:', registration);
    } catch (error) {
      console.error('서비스 워커 등록 실패:', error);
    }
  };

서비스 워커는 백그라운드에서 실행되며 푸시 메시지를 처리한다. 서비스 워커를 등록해서 푸시 알림을 받을 준비를 한다.

📍 푸시 알림 권한 요청

사용자에게 푸시 알림 권한을 요청한다.

// app/layout
const requestPushPermission = async () => {
  askPushNotification();
};

// hooks/usePushNotification
import { usePwaStore } from '@/stores/pwaState';
import { userStore } from '@/stores/userState';
import { isPwa } from '@/utils/isPwa';
import { useCallback } from 'react';

export const usePushNotification = () => {
  // 첫 방문인지를 확인하는 state
  const { isVisited } = userStore();
  const { setIsPwaOpen, setClicked } = usePwaStore();
  const denyPermission = () => {
    setIsPwaOpen(false);
  };

  const askPushNotification = useCallback(async () => {
    // 모달 타입을 noti로 설정
    setClicked('noti');

    // PWA 환경이고 첫 방문이라면
    if (isPwa() && !isVisited) {
      // 'noti-default': 알림 권한 설정을 묻는 모달을 띄운다.
      setIsPwaOpen(true, 'noti-default');
    }
  }, [isVisited]);

  // 알림 권한 설정 모달에서 승인을 누를 경우 실행될 함수
  const checkNotificationPermission = useCallback(async () => {
    setClicked('noti');

    // 권한이 'default' 로 설정되어 있을 경우
    if (Notification.permission === 'default') {
      // 권한 승인 요청을 한다.
      const permission = await Notification.requestPermission();

      // 승인된 경우 모달 닫기
      if (permission === 'granted') {
        setIsPwaOpen(false);
      }
    } else {
      // 권한 설정이 불가능 할 경우 '직접 설정'에 대한 안내 모달 띄우기
      setIsPwaOpen(false);
      setIsPwaOpen(true, 'noti-unsupported');
    }
  }, [isVisited]);

  return {
    denyPermission,
    askPushNotification,
    checkNotificationPermission,
  };
};

📍 푸시 알림을 위해 구독하기

푸시 알림을 받기 위해서는 브라우저의 pushManager를 사용하여 서버에 푸시 구독 정보를 저장해야한다.

// utils/registerPushNotification.ts
import { api } from '@utils/axios';
import { toast } from 'react-toastify';

const registerPushNotification = async () => {
  if (!('Notification' in window) || !('serviceWorker' in navigator)) {
    toast.warn('🔔 푸시 알림이 지원되지 않는 환경입니다');
    return;
  }

  if ('Notification' in window && 'serviceWorker' in navigator) {
    const permission = await Notification.requestPermission();

    if (permission === 'granted') {
      const registration = await navigator.serviceWorker.ready;
      const pushSubscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlB64ToUint8Array(
          process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY
        ),
      });

      try {
        const res = await api.post('/user/subscribe', {
          endpoint: pushSubscription.endpoint,
          expirationTime: pushSubscription.expirationTime,
          keys: {
            p256dh: arrayBufferToBase64(pushSubscription.getKey('p256dh')),
            auth: arrayBufferToBase64(pushSubscription.getKey('auth')),
          },
        });
      } catch (error) {
        console.error(error);
      }
    }
  }
};

const arrayBufferToBase64 = (buffer: ArrayBuffer | null): string => {
  if (!buffer) {
    throw new Error('ArrayBuffer is null or undefined');
  }
  const bytes = new Uint8Array(buffer);
  let binary = '';
  for (let i = 0; i < bytes.byteLength; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary);
};

const urlB64ToUint8Array = (base64String: string | undefined): Uint8Array => {
  if (!base64String) {
    throw new Error('Base64 string is required');
  }

  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; i++) {
    outputArray[i] = rawData.charCodeAt(i);
  }

  return outputArray;
};

export default registerPushNotification;

📍 서비스 워커에서 푸시 이벤트 처리

이제 service-worker.js에서 푸시 이벤트를 수신하여 알림을 표시해보자 !

// 'push' 이벤트 처리하기
self.addEventListener('push', (event) => {
  // data JSON 형 변환
  const data = JSON.parse(event.data.text());

  // 푸시 알림 타이틀 뽑기
  const title = data.title;
  // 푸시 알림 내용, 아이콘, 뱃지 등 설정
  const options = {
    body: data.body,
    icon: './images/maskable_icon_x192.png',
    badge: 'images/maskable_icon_x128.png',
    data: data.roomId,
  };
});

// 'push 알림 클릭' 시 이벤트 처리하기
self.addEventListener('notificationclick', (event) => {
  // 푸시 알림 닫기
  event.notification.close();

  const roomId = event.notification.data;

  event.waitUntil(
    // 해당하는 창이 있는지 확인
    self.clients.matchAll({ type: 'window' }).then((clients) => {
      const client = clients.find((client) =>
        client.url.includes('campingping.com/list')
      );
	  // 있다면 해당 창으로 포커스 이동하고 채팅 창 열어주기
      if (client) {
        client.postMessage({ type: 'OPEN_CHAT_MODAL', roomId });
        client.focus();
      // 없다면 새로 띄워주기
      } else {
        self.clients.openWindow(`/list`).then((newClient) => {
          if (newClient)
            newClient.postMessage({ type: 'OPEN_CHAT_MODAL', roomId });
        });
      }
    })
  );
});

✨ 구현 결과

이미 PWA가 백그라운드에 열려있었을 경우에는 해당 채팅방으로 이동까지 잘 되는데,
완전히 앱이 꺼져있었던 경우에는 앱이 켜지는 데 까지만 진행이 된다... 😭
채팅 방을 열어주고 싶었는데 해당 부분이 구현이 잘 안되어서... 개선해나갈 예정이다.

---

푸시 알림을 구현하면서 제일 힘들었던 부분은 바로... iOS와 Android 였다.........!

나는 개인적으로 모든 기기를 다 iOS를 사용중이라서.. 사실 PWA 설치부터 난관이 있었다.
맥북에서는 설치가 잘 되는데 아이폰에서는 설치가 안되었던 것!
그래서 윈도우 테스트도 해봤는데 윈도우는 설치가 잘되는 것!!!

구글링을 통해 iOS는 이벤트 미지원으로 '홈 화면에 추가' 버튼을 통해 가능하다는 것을 확인하고...
그것도 'safari'를 통해서만...

아.... 왠지 고난이 있을 거 같아...! 라는 생각이 들었다.

그렇게 푸시 알림을 구현하는데 아무리해도 채팅도 어플을 잠시 내려놓았다가 켜면 잘 안오는 거 같고,
푸시 알림도 잘 안오는 거 같고, 그런데 맥북에서는 또 채팅은 잘 되고 푸시 알림은 지원안한다고 하고...
지원도 애매하고 이유를 알 수 없는 '내 아이폰 이상해 😭' 상황이 계속되었다.
심지어 친구랑 나란히 앉아서 테스트 하는데 친구 아이폰은 되고 내 아이폰은 안되는 경우도 있었다...

그렇게 스트레스 받다가 설마... 하는 마음으로 윈도우 테스트를 했는데 윈도우는 푸시알림도 채팅도 잘된다...
그래서 설마... 하는 마음으로 가족들한테 안쓰는 갤럭시가 있는 지 물어서 받아왔는데 푸시 알림이 너무 잘 오는거 😦

그래서 찾아보니...

📍 iOS 푸시 알림 구현 문제 상황

• 백그라운드에서 WebSocket 유지가 안됨: 일정 시간 후 연결 해제
• Wi-Fi -> LTE 전환 시 WebSocket 끊김
• 푸시 알림이 '즉시' 도착 하지 않을 수 있음: 서버에서 추가 설정 필요
• 푸시 구독 자동 만료 가능성이 있어서 '재등록' 필요
• 배터리 절약 모드에서 푸시 알림 차단 가능성 때문에 서버에서 추가 설정 필요

??????????????????????????????????????????????????????????????

굉장히 까다로운 친구였던 것이다 !

iOS에서도 잘 동작하길 바라며 몇가지 찾아서 더 추가한 보완 코드들...

🥲 socket 유지가 끊어질 경우 재연결 하기

export const socket = io(CHAT_URL, {
  withCredentials: true,
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 2000,
  timeout: 5000,
  transports: ['websocket', 'polling'],
});

🥲 구독 실패 시 재시도 하기

 const initPushNotification = async () => {
      while (attempt < MAX_RETRIES) {
        try {
          await registerPushNotification();
          console.log(`Push Notification 등록 성공 (시도 ${attempt + 1})`);
          return;
        } catch (error) {
          attempt += 1;
          console.error(
            `Push Notification 등록 실패 (시도 ${attempt}):`,
            error
          );

          if (attempt >= MAX_RETRIES) {
            toast.error('푸시 알림 등록에 실패했습니다.');
          } else {
            await new Promise((resolve) => setTimeout(resolve, 3000 * attempt));
          }
        }
      }
    };

    initPushNotification();
  }, [userState]);

---

그래서 일단 슬프고 힘들었던 마음과 함께 정리하는

💡 iOS와 Android 의 주요 차이점

기능	Android( Chrome, Edge 등 )	iOS( Safari )
PWA 설치	자동 설치 가능( beforeinstallprompt 지원)	직접 홈 화면 추가 필요( 자동 유도 X )
백그라운드 동작	Background Sync API 지원	백그라운드에서 작업 제한
로컬 저장소	Persistent Storage API 지원	저장소 자동 삭제 가능
오프라인 모드	Cache API 활용 가능	오프라인 캐싱 불완전

👀 느낀 점

브라우저 별로 시스템 별로 동작하는 방식도 지원하는 이벤트나 방식도 다른 점이 생각보다 많았다.
새로운 것들을 시도하다 보니 전혀 예상하지 못한 곳에서 문제들이 발생했는데,
물론 제대로 구현을 하지 못한 부분들이나 이해를 못한 부분도 있었지만
구현을 해놓고도 지원하지 않는다는 것을 몰라서 한참 엉뚱한 것만 구글링하면서
왜 같은 코드 같은데 나만 안되는거지.. 하는 시간도 보냈다.

브라우저 간의 차이나 시스템 간의 주요 차이점 같은 것들도 꼭 공부해봐야겠다.

그리고 iOS 에서 추가적으로 해결할 수 있는 방법이 있는 지 좀 더 찾아볼 예정이다 !

---

3/19일 test 추가 내용

• Android에서도 오프라인이 지속되면 푸시 알림이 오지 않는다 !
• 네트워크 연결 시 누락된 메시지가 확인 가능하도록 푸시 알림이 한번에 온다.