이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Kate Jeffreys

푸시 알림을 사용하는 이유

알림은 사용자에게 작은 정보 청크를 표시합니다. 웹 앱은 알림을 사용하여 중요하고 시급한 이벤트 또는 사용자가 취해야 하는 조치를 사용자에게 알릴 수 있습니다.

알림의 디자인은 플랫폼에 따라 다릅니다. 예를 들면 다음과 같습니다.

일반적으로 웹 브라우저는 요청을 통해 서버와 클라이언트 사이에 정보 교환을 시작해야 했습니다. 반면에 웹 푸시 기술을 사용하면 앱에 필요한 경우 알림을 보내도록 서버를 구성할 수 있습니다. 푸시 서비스는 구독한 각 서비스 워커에 고유한 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부: 서비스 워커 등록 및 푸시 구독

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

클라이언트 코드:
```
navigator.serviceWorker.register('sw.js');
```
클라이언트가 사용자에게 알림을 보낼 권한을 요청합니다.

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

클라이언트 코드:
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
Firebase 클라우드 메시징과 같은 푸시 서비스는 구독 모델에서 작동합니다. 서비스 워커가 PushManager.subscribe()를 호출하여 푸시 서비스를 구독하면 푸시 서비스는 해당 서비스 워커에 고유한 URL을 만듭니다. 이 URL을 구독 엔드포인트라고 합니다.

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

클라이언트 코드:

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: 알림 보내기

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

서버 코드:

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);

구독 엔드포인트로 전송된 알림은 서비스 워커를 대상으로 푸시 이벤트를 실행합니다. 서비스 워커가 메시지를 수신하여 사용자에게 알림으로 표시합니다.

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

다음 단계

다음 단계로 푸시 알림을 구현해 보겠습니다.

프로세스의 각 단계를 안내하는 일련의 Codelab을 만들었습니다.