웹푸시 구독 신청

사용자가 웹 푸시를 구독할 수 있도록 적용하는 API입니다.

개요

WEB PUSH는 구독, 발송 두 가지 단계로 구분됩니다.

구독은 사용자들이 페이지에 접속했을 때 PUSH 알림에 동의하는 과정을 말합니다. 사용자가 동의할 경우 브라우저는 PUSH를 보낼 수 있도록 설정됩니다.

WEB PUSH API는 해당 브라우저의 식별 데이터를 전송하여 API PLEX Gateway에 저장하고 PUSH 발송 시에 해당 정보를 사용합니다.

구독 기능을 구현하기 위해서는 웹 서비스에 구독 기능을 .js 파일로 추가해야 합니다. 해당 파일은 API 사용 계약 시 제공됩니다.

PUSH 구독 요청

웹 페이지에 진입 시 사용자에게 구독 여부를 묻는 안내 창을 띄우고, 수락할 경우 해당 정보를 서버로 전송합니다.

제공하는 service-worker.js, cjwebpush.js 파일에서 호출할 함수와 저장할 값은 다음과 같습니다.

loadServiceWorker();
initializeState(userId); // userId

메인 함수 렌더링 부분에서 두 함수를 선언하고, initializeState 함수에 userId를 입력합니다.

회원 가입 한 유저의 경우 회원 ID를, 회원가입하지 않은 유저의 경우 userId는 Empty String으로 입력합니다.

( userId 를 서로 구분되는 임의의 값으로 입력해도 사용이 가능합니다. 다만 회원을 구분할 수 있는 String 으로 입력해주셔야 어떤 회원에게 PUSH가 갔는지 로그를 확인할 수 있습니다. )

Vapid Key는 API 사용 신청 시 발급받은 값을 사용해주세요.

export function subscribe(userId) {
    navigator.serviceWorker.ready.then(function (ServiceWorkerRegistration) {
      ServiceWorkerRegistration.pushManager.subscribe(
        {
          userVisibleOnly: true,
          applicationServerKey: 'BAXiaJIy33SQDsmODjClICCMK8DvkTr0-WGUMCOeocFQC5EDDnQXzjKiEjjebOXuX7glZHnykHO06MYpJf66aMY' // VAPID Key
        })
      .then(function (subscription){
        return sendSubscriptionToServer(subscription, userId);
      })
      .catch(function (e) {
        if (Notification.permission === 'denied') {
          console.warn('Permission for Notifications was denied');
        } else {
          console.error('Unable to subscribe to push.', e);
        }
      });
    });
}

clientId는 API PLEX에서 발급받은 ID를 넣어주세요.

export function sendSubscriptionToServer(subscription, userId) {
    var key = subscription.getKey ? subscription.getKey('p256dh') : '';
    var auth = subscription.getKey ? subscription.getKey('auth') : '';
    
    return fetch(`${process.env.REACT_APP_API_URL}/api/subscribe`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userId: userId,
        clientId: 'apiplex-client-1',  // clientId
        endpointUrl: subscription.endpoint,
        p256dh: key ? btoa(String.fromCharCode.apply(null, new Uint8Array(key))) : '',
        auth: auth ? btoa(String.fromCharCode.apply(null, new Uint8Array(auth))) : '',
        browserType: checkBrowserType()
      })
    }).then(function (res) {
      console.log(res);
    });
  }

위의 설정을 마친 후 웹 서비스를 시작하면 브라우저에 따라 설정된 구독 요청 창이 뜨고, 수락할 경우 해당 API가 호출됩니다.

웹푸시 구독 신청 API

캐릭터 인코딩은 UTF-8을 기본으로 합니다.

JSON 형태의 전송값은 application/json; charset=utf-8을 기본으로 사용합니다.

웹푸시 구독 신청 API

POST https://d02vc26mxg.apigw.ntruss.com/web-push/v1_0/api/subscribe

Headers

Name	Type	Description
Authorization*	string	사용자ID;secret_key

Request Body

Name	Type	Description
userId	string	웹 서비스 사용자 아이디 (서로 구분되는 값이면 모두 가능) 입력하지 않을 경우 자동으로 Unique한 값으로 저장
auth*	string	(자동생성) VAPID Key를 사용하여 사용자 브라우저에서 생성한 PUSH 인증을 위한 값
p256dh*	string	(자동생성) VAPID Key를 사용하여 사용자 브라우저에서 생성한 key 값
endpointUrl*	string	(자동생성) 사용자의 브라우저를 구분하는 값
clientId*	string	API Plex에서 사용하는 고객 아이디
browserType*	string	(자동생성) 사용자 브라우저 타입

200: OK 응답 반환 완료

Response Body

{
    "code": 2002,
    "desc": "Saved Subscription Successfully"
}

키	타입	설명
code	number	전송 결과 코드
desc	string	결과 코드에 대한 설명

전송 결과 코드

code	설명
2002	Saved Subscription Successfully
2003	Deleted Subscription Successfully
4004	clientId is empty
4005	userId is empty
4041	Not Found Data
4049	Already Exist
5001	System Error