푸시 알림을 사용하여 사용자 참여 유도 및 재참여 유도

Kate Jeffreys
Kate Jeffreys

알림은 사용자에게 소량의 정보를 표시합니다. 웹 앱은 알림을 사용하여 사용자에게 시간에 민감한 중요한 이벤트 또는 사용자가 취해야 할 조치를 알릴 수 있습니다.

알림의 모양은 플랫폼마다 다릅니다. 예를 들면 다음과 같습니다.

Android 기기의 알림
MacBook의 알림

기존에는 웹브라우저가 요청을 통해 서버와 클라이언트 간의 정보 교환을 시작해야 했습니다. 반면 웹 푸시 기술을 사용하면 앱에 적합한 경우 알림을 전송하도록 서버를 구성할 수 있습니다. 푸시 서비스는 구독된 각 서비스 워커에 고유한 URL을 만듭니다. 서비스 워커의 URL로 메시지를 전송하면 해당 서비스 워커에서 이벤트가 발생하여 알림을 표시하라는 메시지가 표시됩니다.

푸시 알림을 사용하면 사용자가 앱을 다시 열고 최신 정보를 기반으로 앱을 최대한 활용하도록 유도할 수 있습니다.

알림 만들기 및 전송

Notifications API를 사용하여 알림을 만듭니다. Notification 객체에는 title 문자열과 options 객체가 있습니다. 예를 들면 다음과 같습니다.

let title = 'Hi!';
let options
= {
  body
: 'Very Important Message',
 
/* other options can go here */
};
let notification
= new Notification(title, options);

title는 알림이 활성화되어 있을 때 굵게 표시되고 body에는 추가 텍스트가 포함됩니다.

알림 전송 권한 얻기

알림을 표시하려면 앱에서 사용자의 권한을 받아야 합니다.

Notification.requestPermission();

푸시 알림은 어떻게 작동하나요?

알림의 진정한 힘은 서비스 워커와 푸시 기술의 조합에서 비롯됩니다.

  • 서비스 워커는 백그라운드에서 실행할 수 있으며 앱이 화면에 표시되지 않는 경우에도 알림을 표시할 수 있습니다.

  • 푸시 기술을 사용하면 앱에 적합한 경우 알림을 전송하도록 서버를 구성할 수 있습니다. 푸시 서비스는 구독된 각 서비스 워커에 고유한 URL을 만듭니다. 서비스 워커의 URL로 메시지를 전송하면 해당 서비스 워커에서 이벤트가 발생하여 알림을 표시하라는 메시지가 표시됩니다.

다음 예시 흐름에서 클라이언트는 서비스 워커를 등록하고 푸시 알림을 구독합니다. 그런 다음 서버는 구독 엔드포인트에 알림을 전송합니다.

클라이언트와 서비스 워커는 추가 라이브러리 없이 표준 JavaScript를 사용합니다. 서버는 Node.js에서 express npm 패키지로 빌드되며 web-push npm 패키지를 사용하여 알림을 전송합니다. 서버에 정보를 전송하기 위해 클라이언트는 서버가 노출한 POST URL을 호출합니다.

1단계: 서비스 워커 등록 및 푸시 구독

  1. 클라이언트 앱이 ServiceWorkerContainer.register()에 서비스 워커를 등록합니다. 등록된 서비스 워커는 클라이언트가 비활성 상태일 때 백그라운드에서 계속 실행됩니다.

    고객 코드:

    navigator.serviceWorker.register('sw.js');
  2. 클라이언트는 알림을 보내기 위해 사용자에게 권한을 요청합니다.

    고객 코드:

    Notification.requestPermission();
  3. 푸시 알림을 사용 설정하기 위해 서비스 워커는 PushManager.subscribe()를 사용하여 푸시 구독을 만듭니다. PushManager.subscribe() 호출에서 서비스 워커는 앱의 API 키를 식별자로 제공합니다.

    고객 코드:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Firebase 클라우드 메시징과 같은 푸시 서비스는 정기 결제 모델을 기반으로 작동합니다. 서비스 워커가 PushManager.subscribe()를 호출하여 푸시 서비스를 구독하면 푸시 서비스는 해당 서비스 워커에 고유한 URL을 만듭니다. 이 URL을 구독 엔드포인트라고 합니다.

  4. 클라이언트가 구독 엔드포인트를 앱 서버로 전송합니다.

    고객 코드:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ }).then(subscription => {
        sendToServer
    (subscription, '/new-subscription', 'POST');
     
    });
    });

    서버 코드:

    app.post('/new-subscription', (request, response) => {
     
    // extract subscription from request
     
    // send 'OK' response
    });

2단계: 알림 보내기

  1. 웹 서버가 구독 엔드포인트에 알림을 보냅니다.

    서버 코드:

    const webpush = require('web-push');

    let options
    = { /* config info for cloud messaging and API key */ };
    let subscription
    = { /* subscription created in Part 1*/ };
    let payload
    = { /* notification */ };

    webpush
    .sendNotification(subscription, payload, options);
  2. 구독 엔드포인트로 전송된 알림은 서비스 워커를 타겟으로 푸시 이벤트를 실행합니다. 서비스 워커는 메시지를 수신하고 사용자에게 알림으로 표시합니다.

    서비스 워커 코드:

    self.addEventListener('push', (event) => {
      let title
    = { /* get notification title from event data */ }
      let options
    = { /* get notification options from event data */ }
      showNotification
    (title, options);
    })
  3. 사용자가 알림과 상호작용하여 웹 앱이 아직 활성화되지 않은 경우 활성화합니다.

다음 단계

다음 단계로 푸시 알림을 구현합니다.

이 과정의 각 단계를 안내하는 Codelab 시리즈를 마련했습니다.