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

Kate Jeffreys
Kate Jeffreys

알림은 사용자에게 작은 크기의 정보를 제공합니다. 웹 앱은 알림을 사용하여 중요하고 시간이 중요한 이벤트 또는 사용자가 취해야 하는 작업에 관해 사용자에게 알릴 수 있습니다.

알림의 디자인과 분위기는 플랫폼마다 다릅니다. 예를 들면 다음과 같습니다.

<ph type="x-smartling-placeholder">
</ph>
Android 기기의 알림
<ph type="x-smartling-placeholder"></ph>
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.jsexpress 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을 만들었습니다.