[웹 푸시] 알림 web-push

Dragon_Tack·2025년 1월 10일

프로젝트 서비스 유저들의 활성화를 위해서, 알림을 생성하고나서 기기구독 유저에게 푸시알림을 보내 보겠습니다.

도입 하는 이유

참여율 증가

푸시 알림은 사용자의 참여를 유도하는 효과적인 방법입니다. 푸시 알림을 사용하여 사용자에게 관련 정보를 보내고, 애플리케이션 사용을 상기시키고, 기능 및 프로모션을 이용하도록 안내할 수 있습니다.

유지율 개선

푸시 알림을 사용하면 보다 표적화되고 관련성 높은 메시징을 만들 수 있습니다. 예를 들어 사용자의 과거 행동, 위치, 관심사 및 기타 요인을 기반으로 사용자를 표적화할 수 있습니다. 이렇게 하면 서비스 이용 고객들에 유지율 및 수익률이 증가할 수 있습니다.

사용자 제어 강화

푸시 알림은 사용자가 쉽게 제어할 수 있기 때문에 다른 통신 방법보다 푸시 알림을 선호하는 사용자가 많을 수 있습니다. 사용자는 자신이 원할 때 푸시 알림 수신을 옵트인하고 옵트아웃할 수 있습니다.

Web-push는 해당 서비스의 브라우저가 꺼져있어도 서비스 워커라는 자바스크립트 파일에 의해 푸시메세지를 보낼 수 있습니다.

Flow

사용자에게 푸시 알림을 보내는 권한을 요청하는 클라이언트 로직을 추가한 다음, 데이터베이스에 저장하기 위해 클라이언트 식별자 정보를 서버로 전송합니다.
클라이언트 기기에 메시지를 푸시하는 서버 로직을 추가합니다.
기기에 푸시된 메시지를 수신하고 알림으로 표시하는 클라이언트 로직을 추가합니다.

푸시 알림을 보내는 권한 얻기

먼저 웹사이트에서 푸시 알림을 보내기 위해 사용자의 권한을 받아야 합니다. 이는 Do you want to receive push notifications? 메시지 옆에 있는 예 버튼을 클릭하는 등의 사용자 동작에 의해 트리거되어야 합니다. 확인 후 Notification.requestPermission()를 호출합니다. 사용자 기기의 운영체제 또는 브라우저는 사용자가 푸시 알림을 선택하려는 것인지 공식적으로 확인하는 일종의 UI를 표시할 수 있습니다. 이 UI는 플랫폼마다 다릅니다.

클라이언트를 푸시 알림에 구독

권한을 얻은 후 웹사이트에서 사용자의 푸시 알림 구독 프로세스를 시작해야 합니다. 이는 Push API를 사용하여 JavaScript를 통해 이루어집니다. 구독 프로세스 중에 공개 인증 키를 제공해야 합니다. 이 키에 대해서는 나중에 자세히 알아봅니다. 구독 프로세스를 시작한 후 브라우저는 푸시 서비스라는 웹 서비스에 네트워크 요청을 보냅니다. 푸시 서비스에 대해서는 나중에 자세히 알아봅니다.

구독에 성공했다고 가정하면 브라우저는 PushSubscription 객체를 반환합니다. 이 데이터는 장기적으로 저장해야 합니다. 일반적으로 이는 개발자가 제어하는 서버로 정보를 전송한 후 서버에서 데이터베이스에 저장하도록 합니다.

여기서 부터 지극히 서버개발자 관점에서만 작성된 글 인점 양해부탁드립니다.

export class WebPushSubscriptionDTO {
  @NewStringProperty({ description: 'endPoint' })
  endpoint: string;
  @IsOptional()
  @NewNumberProperty({ description: 'expirationTime' })
  expirationTime?: number | null;

  @ObjectProperty({
    name: 'keys',
    description: '공간 요소 정보',
    required: false,
    isArray: false,
    type: () => WebPushKeysDto,
  })
  keys: WebPushKeysDto;
}

  async subscribe(login_idx: string, pushSubscription: WebPushSubscriptionDTO) {
    const result = await this.subRepository.addSubscriber(
      login_idx,
      pushSubscription,
    );
  }

메세징 처리하기

export type WebPushMsgType = {
  title: string;
  sub_title: string;
  endPoint: string;
  thumbnail_path: string;
};

실제로 구독하고 있는 유저의 기기정보를 찾아 전송해주는 모습이다.

async sendPushNotification(user_id: string, webPushMsg: WebPushMsgType) {
  const findResult = await this.subRepository.findSubscriber(user_id);
  if (findResult.length !== 0) {
    // 연결되있는거 다 발송
    findResult.map(async (subscriberResult) => {
      await this.sendWebPush(subscriberResult, webPushMsg);
    });
    // return 'noti done';
  } else {
    // return 'no subscriber';
  }
}