🆘 WebPush 구현

분야	작성자	작성일
BE	문설민, 김성환	24년 11월 25일

웹 푸시 알림은 사용자가 웹 애플리케이션을 사용하지 않는 상태에서도 실시간으로 알림을 받을 수 있게 해주는 기술입니다. 이 문서에서는 웹 푸시 알림을 구현하기 위한 전체적인 구조와 서버 및 클라이언트 측 구현 방법을 설명합니다.

구조

1. 사용자: 웹 애플리케이션에 접속하여 푸시 알림 수신에 동의합니다.
2. 클라이언트: 서비스 워커를 등록하고 푸시 구독을 생성하여 서버에 전송합니다.
3. 서버: 구독 정보를 저장하고, 알림 조건이 만족되면 web-push 라이브러리를 사용하여 푸시 메시지를 전송합니다.
4. 푸시 서비스: 브라우저 공급자가 제공하는 푸시 서비스로, 서버로부터 받은 메시지를 사용자에게 전달합니다.
5. 서비스 워커: 클라이언트 측에서 백그라운드에서 동작하며, 푸시 메시지를 수신하고 알림을 표시합니다.

서버

서버 측에서는 웹 푸시 알림을 관리하고 전송하는 역할을 담당합니다.

주요 구성 요소

• PushSubscription 엔티티: 사용자의 푸시 구독 정보를 저장합니다.
• PushService: web-push 라이브러리를 사용하여 푸시 알림을 전송합니다.
• PushController: 클라이언트로부터 구독 정보를 받아 저장하고 관리합니다.
• AlarmService: 알림 조건을 주기적으로 검사하고, 조건이 만족되면 푸시 알림을 전송합니다.
• 스케줄러: @nestjs/schedule 패키지를 사용하여 알림 조건을 주기적으로 검사합니다.

서버 구현 상세

1. VAPID 키 생성 및 설정

   webPush.setVapidDetails(
     'mailto:[email protected]',
     process.env.VAPID_PUBLIC_KEY!,
     process.env.VAPID_PRIVATE_KEY!,
   );

   • 여기서 VAPID는 서버에서 정의하는 키로써 [RFC 8292](https://datatracker.ietf.org/doc/html/rfc8292) 정의에 맞춰져 있다.
   • VAPID 키의 경우 web-push라이브러리를 이용해 쉽게 생성할 수 있다.

   const webPush = require('web-push');
   
   const vapidKeys = webPush.generateVAPIDKeys();
   
   console.log('Public Key:', vapidKeys.publicKey);
   console.log('Private Key:', vapidKeys.privateKey);
   /**
   Public Key: BNo....
   Private Key: OqOn...
   */

2. PushSubscription 엔티티 정의

   @Entity()
   export class PushSubscription {
     @PrimaryGeneratedColumn()
     id: number;
   
     @ManyToOne(() => User, (user) => user.subscriptions, { onDelete: 'CASCADE' })
     user: User;
   
     @Column({ type: 'text' })
     endpoint: string;
   
     @Column({ type: 'text' })
     p256dh: string;
   
     @Column({ type: 'text' })
     auth: string;
   }

3. PushService 구현

   @Injectable()
   export class PushService {
     constructor(
       @InjectRepository(PushSubscription)
       private readonly subscriptionRepository: Repository<PushSubscription>,
       private readonly dataSource: DataSource,
     ) {
       // VAPID 키 설정
     }
   
     async createSubscription(userId: number, subscriptionData: any): Promise<PushSubscription> {
       return await this.dataSource.transaction(async (manager) => {
         const user = new User();
         user.id = userId;
   
         const newSubscription = manager.create(PushSubscription, {
           user: user,
           endpoint: subscriptionData.endpoint,
           p256dh: subscriptionData.keys.p256dh,
           auth: subscriptionData.keys.auth,
         });
   
         return await manager.save(newSubscription);
       });
     }
   
     async sendPushNotification(subscription: PushSubscription, payload: object): Promise<void> {
       // 푸시 알림 전송 로직
     }
   }

4. PushController 구현

   @Controller('push')
   export class PushController {
     constructor(private readonly pushService: PushService) {}
   
     @UseGuards(AuthGuard('jwt'))
     @Post('subscribe')
     async subscribe(@Body() subscriptionData: any, @Req() request: Request) {
       const userId = (request.user as any).id;
   
       const newSubscription = await this.pushService.createSubscription(userId, subscriptionData);
   
       return { message: 'Subscription saved.', subscriptionId: newSubscription.id };
     }
   }

5. AlarmService에서 알림 조건 검사 및 전송

   @Injectable()
   export class AlarmService {
     // ...
   
     @Cron('*/5 * * * * *') // 매 5초마다 실행 (테스트용)
     async checkAlarms() {
       const alarms = await this.alarmRepository.find({
         relations: ['user', 'stock', 'user.subscriptions'],
       });
   
       for (const alarm of alarms) {
         // 알림 조건 검사 로직
         if (shouldNotify) {
           await this.sendPushNotification(alarm);
           // 알람 삭제 또는 상태 업데이트
         }
       }
     }
   
     private async sendPushNotification(alarm: Alarm): Promise<void> {
       const payload = {
         title: '주식 알림',
         body: `${alarm.stock.name}: 조건이 만족되었습니다.`,
       };
   
       for (const subscription of alarm.user.subscriptions) {
         await this.pushService.sendPushNotification(subscription, payload);
       }
     }
   }

클라이언트

클라이언트 측에서는 푸시 알림을 수신하기 위한 설정과 사용자 경험을 향상시키기 위한 설치 안내 등을 구현합니다.

공통 구현 사항

• 서비스 워커 등록

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('Service Worker registered:', registration);
      })
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  }

• 푸시 구독 생성 및 서버 전송

  async function subscribeUser() {
    const registration = await navigator.serviceWorker.ready;
  
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
    });
  
    await fetch('/push/subscribe', {
      method: 'POST',
      body: JSON.stringify(subscription),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }

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

  self.addEventListener('push', function(event) {
    const data = event.data.json();
  
    const options = {
      body: data.body,
      icon: '/icons/icon-192x192.png',
      badge: '/icons/badge-72x72.png',
    };
  
    event.waitUntil(
      self.registration.showNotification(data.title, options)
    );
  });

웹

데스크톱 웹 브라우저에서는 기본적으로 웹 푸시 알림을 지원하므로 특별한 추가 작업 없이 공통 구현 사항을 따르면 됩니다.

안드로이드 웹

안드로이드의 모바일 브라우저에서는 웹 푸시 알림과 PWA(Progressive Web App)를 지원합니다.

• PWA 설치 안내

  let deferredPrompt;
  
  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    document.getElementById('install-button').style.display = 'block';
  });
  
  document.getElementById('install-button').addEventListener('click', async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      deferredPrompt = null;
    }
  });

• 매니페스트 파일 설정

  {
    "name": "Your App Name",
    "short_name": "App",
    "start_url": "/",
    "display": "standalone",
    "icons": [
      {
        "src": "/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }
  

iOS 웹

iOS에서는 웹 푸시 알림 지원에 제한이 있으므로 사용자에게 홈 화면에 추가하도록 안내해야 합니다.

• iOS 설치 안내 배너

  function isIos() {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test(userAgent);
  }
  
  function isInStandaloneMode() {
    return ('standalone' in window.navigator) && (window.navigator.standalone);
  }
  
  if (isIos() && !isInStandaloneMode()) {
    document.getElementById('ios-install-banner').style.display = 'block';
  }

  <div id="ios-install-banner" style="display: none;">
    <p>이 웹 앱을 설치하려면 Safari에서 공유 버튼을 누른 후 "홈 화면에 추가"를 선택하세요.</p>
  </div>

• 홈 화면에 추가된 후 푸시 구독 생성

  if (isInStandaloneMode()) {
    subscribeUser();
  }

참고 사항

• HTTPS 사용: 웹 푸시 알림과 서비스 워커는 HTTPS 환경에서만 동작합니다.
• 브라우저 호환성: 최신 브라우저에서의 지원 여부를 확인해야 합니다.
• 에러 처리: 푸시 알림 전송 실패 시 구독 정보를 업데이트하거나 삭제하는 로직이 필요합니다.
• 사용자 경험 개선: 설치 안내 및 권한 요청을 적절한 시점에 제공하여 사용자 만족도를 높입니다.
• 보안 강화: VAPID 키 관리 및 인증 절차를 철저히 하여 보안을 강화합니다.

참고 자료

https://stackoverflow.com/questions/40392257/what-is-vapid-and-why-is-it-useful

https://datatracker.ietf.org/doc/html/rfc8292

https://mozilla-services.github.io/WebPushDataTestPage/