Codelab: 푸시 알림 서버 빌드

Kate Jeffreys
Kate Jeffreys
Kayce Basques

이 Codelab에서는 푸시 알림 서버를 빌드하는 방법을 단계별로 보여줍니다. 이 Codelab을 마치면 다음과 같은 서버를 갖게 됩니다.

  • 푸시 알림 구독을 추적합니다 (즉, 서버에서 클라이언트가 푸시 알림을 선택할 때 새 데이터베이스 기록 클라이언트가 선택 해제할 경우 기존 데이터베이스 레코드 삭제)
  • 단일 클라이언트에 푸시 알림 전송
  • 구독한 모든 클라이언트에 푸시 알림을 전송합니다.

이 Codelab은 실제로 직접 해보는 것을 통한 학습에 중점을 두고 있으며, 개념에 대해 많이 이야기합니다. 결제 푸시 알림은 어떻게 작동하나요? 푸시 알림 개념에 대해 알아보세요.

이 Codelab의 클라이언트 코드는 이미 완성되었습니다. 여러분은 서버를 구현하는 방법을 설명합니다. kubectl apply 명령어로 Codelab: 푸시 알림 빌드 클라이언트

push-notifications-server-codelab-complete 확인 (출처) 전체 코드를 볼 수 있습니다.

브라우저 호환성

이 Codelab은 다음과 같은 운영체제 및 브라우저 조합에서 작동하는 것으로 알려져 있습니다.

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

이 Codelab은 다음 운영체제에서 작동하지 않는 것으로 알려져 있습니다. 또는 운영체제와 브라우저의 조합):

  • macOS: Brave, Edge, Safari
  • iOS

애플리케이션 스택

  • 서버는 Express.js를 기반으로 빌드됩니다.
  • web-push Node.js 라이브러리 푸시 알림 로직을 모두 처리합니다.
  • 구독 데이터는 lowdb를 사용하여 JSON 파일에 작성됩니다.

푸시 알림을 구현하기 위해 이러한 기술을 사용하지 않아도 됩니다. 이러한 기술을 선택한 이유는 안정적인 Codelab 환경을 제공하기 때문입니다.

설정

수정 가능한 코드 사본 받기

이 안내의 오른쪽에 표시되는 코드 편집기는 Glitch UI를 살펴봅니다.

  1. 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

인증 설정

푸시 알림을 받으려면 먼저 다음을 설정해야 합니다. 서버 및 클라이언트에 연결할 수 있습니다 웹 푸시 프로토콜 요청 서명을 참조하세요. 그 이유를 알아보세요.

  1. 도구를 클릭한 후 터미널을 클릭하여 Glitch 터미널을 엽니다.
  2. 터미널에서 npx web-push generate-vapid-keys를 실행합니다. 비공개 키 복사 및 공개 키 값을 포함할 수 있습니다.
  3. .env를 열고 VAPID_PUBLIC_KEY 및 VAPID_PRIVATE_KEY를 업데이트합니다. 설정 VAPID_SUBJECT에서 mailto:test@test.test(으)로 이 모든 값은 큰따옴표로 묶어야 합니다. 업데이트한 후 .env 파일은 다음과 같이 표시됩니다. 다음과 비슷합니다.
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Glitch 터미널을 닫습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
  1. public/index.js를 엽니다.
  2. VAPID_PUBLIC_KEY_VALUE_HERE를 공개 키 값으로 바꿉니다.

구독 관리

구독 프로세스의 대부분은 클라이언트가 처리합니다. 주요 서버에서 해야 할 일은 새 푸시 알림 구독을 저장하는 것입니다 이전 구독을 삭제할 수 있습니다 이러한 구독을 통해 메시지를 클라이언트로 푸시할 수 있습니다 클라이언트의 푸시 알림 구독을 참고하세요. 를 참조하세요.

새 구독 정보 저장

  1. 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 전체 화면입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
  1. 앱 탭에서 서비스 워커 등록을 클릭합니다. 상태 상자에서 다음과 비슷한 메시지가 표시됩니다.
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. 앱 탭에서 푸시 구독을 클릭합니다. 브라우저나 운영체제는 웹사이트에서 푸시 알림을 보낼지 묻습니다. 허용을 클릭합니다 (또는 사용하는 것과 동일한 문구). 상태 상자에 다음과 유사한 메시지가 표시됩니다. 다음과 같이 변경합니다.
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
드림
  1. Glitch UI에서 View Source를 클릭하여 코드로 돌아갑니다.
  2. 도구를 클릭한 다음 로그를 클릭하여 결함 로그를 엽니다. 나 /add-subscription 뒤에 일부 데이터가 표시됩니다. /add-subscription: 클라이언트가 보내는 URL 게시 푸시 알림을 구독할 때 요청을 보냅니다. 데이터가 저장해야 하는 클라이언트의 구독 정보입니다.
  3. server.js를 엽니다.
  4. 다음 코드를 사용하여 /add-subscription 경로 핸들러 로직을 업데이트합니다.
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});
드림

이전 구독 정보 삭제

  1. 앱 탭으로 돌아갑니다.
  2. 푸시 구독 취소를 클릭합니다.
  3. Glitch 로그를 다시 확인합니다. 팔로우한 /remove-subscription이(가) 표시됩니다. 확인할 수 있습니다.
  4. 다음 코드를 사용하여 /remove-subscription 경로 핸들러 로직을 업데이트합니다.
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

알림 보내기

푸시 메시지 보내기에 설명된 대로 서버가 실제로 푸시 메시지를 클라이언트에 직접 보내지 않습니다. 오히려 푸시 서비스를 통해 이를 실행합니다. 서버는 기본적으로 웹 기반 메시지를 작성하여 클라이언트에게 웹 서비스 (푸시 서비스)에 대한 서비스 요청 (웹 푸시 프로토콜 요청) 사용자가 사용하는 브라우저 공급업체에서 소유함

  1. 다음 코드를 사용하여 /notify-me 경로 핸들러 로직을 업데이트합니다.
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. 다음 코드를 사용하여 sendNotifications() 함수를 업데이트합니다.
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. 다음 코드를 사용하여 /notify-all 경로 핸들러 로직을 업데이트합니다.
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. 앱 탭으로 돌아갑니다.
  2. 푸시 구독 취소를 클릭한 다음 푸시 구독 취소를 다시 클릭합니다. 앞서 언급했듯이 Glitch가 프로젝트를 다시 시작하므로 이 작업만 필요합니다. 코드를 수정할 때마다 프로젝트가 시작 시 데이터베이스를 삭제하도록 구성된 경우
  3. 알림 받기를 클릭합니다. 푸시 알림이 표시됩니다. 제목은 Hello, Notifications!이고 본문은 ID: <ID>여야 합니다. 여기서 <ID>는 다음과 같습니다. 랜덤 숫자입니다.
  4. 다른 브라우저나 기기에서 앱을 열고 푸시 알림을 구독해 봅니다. 모두 알림 버튼을 클릭합니다. 다음 날짜에 동일한 알림을 받게 됩니다. 구독 중인 모든 기기 (즉, 푸시 알림 본문의 ID)가 같아야 합니다).

다음 단계

  • 푸시 알림 개요 읽기 을 참고하시기 바랍니다.
  • Codelab: 푸시 알림 클라이언트 빌드를 참고하세요. 알림 권한을 요청하고 구독 및 구독하는 클라이언트를 빌드하는 방법을 장치가 푸시 알림을 수신하고, 서비스 워커를 사용하여 푸시 메시지를 보내고 메시지를 알림으로 표시합니다.