고객이 메뉴 주문을 완료하면 완료됐다는 푸시 알림을 주문 고객에게 보내고자 PWA 기술을 사용했다.

PWA

프로그레시브 웹 어플리케이션으로 앱처럼 보이고, 직접 홈 화면에 저장도 가능하고, 스플래시 화면도 있고, 오프라인 지원 등등 모든 작업을 수행할 수 있는 강력한 기술이다.

구현

설치를 해주고

npm install next-pwa
yarn add next-pwa

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
});

const nextConfig = withPWA({
  reactStrictMode: true,
});

module.exports = nextConfig;

next에서 진행할 거니 빌드 타임 때, pwa 쓸 거라는 명령을 내려야 하니까 next.config.js 에서 설정을 해줘야 한다.

그리고 서비스 워커에 등록을 하고 푸시 알림을 처리할 수 있도록 하자.

export const registerServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker
        .register('/sw.js')
        .then(registration => {
          console.log('Service Worker 등록 성공:', registration);
        })
        .catch(error => {
          console.log('Service Worker 등록 실패:', error);
        });
    });
  }
};

export const requestNotificationPermission = () => {
  if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        console.log('푸시 알림 권한이 허용됨');
      } else {
        console.log('푸시 알림 권한이 거부됨');
      }
    });
  }
};

export const sendPushNotification = (title: string, body: string) => {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.ready.then(registration => {
      registration.showNotification(title, {
        body,
        icon: '/icons/favicon/favicon-16x16.png',
      });
    });
  }
};

• registerServiceWorker 함수를 호출해서 웹 페이지가 로드될 때, sw.js 경로에 있는 서비스 워커를 등록해준다.
• requestNotificationPermission 브라우저가 Notification API를 지원하는 경우, 사용자에게 푸시 알림 권한을 요청한다. (예외 처리)
• sendPushNotification 서비스워커가 준비되면 등록을 사용해서 푸시 알림을 생성 후 보내준다.

컴포넌트 사용

const Test = () => {
  // 푸시 알림 테스트
  const clickPushHandler = () => {
    sendPushNotification('매직포스 알림', '알림 가나요?');
  };
  useEffect(() => {
    registerServiceWorker();
    requestNotificationPermission();
    // 직접 푸시 알림 테스트
    sendPushNotification('테스트 알림', '테스트 알림입니다.');
  }, []);

  return (
    <Fragment>
      <button onClick={clickPushHandler}>알림 보내기</button>
    </Fragment>
  );
};

서비스 워커만 잘 등록해주면 컴포넌트에서 사용하는 것은 어렵지 않다.

나는 모바일에서도 가능하게 하고 싶어서 추후 앱에서 푸시가 가능한 파이어베이스의 fcm 적용기를 포스팅 할 예정이다.