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

Codelab: 푸시 알림 클라이언트 빌드

Kate Jeffreys

Kayce Basques

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

사용자의 푸시 알림을 구독합니다.
푸시 메시지를 수신하고 알림으로 표시합니다.
사용자의 푸시 알림 구독을 취소합니다.

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

이 Codelab의 서버 코드는 이미 완성되었습니다. 여러분은 클라이언트 구현 방법을 알아봅니다. kubectl apply 명령어로 자세한 내용은 Codelab: 푸시 알림 빌드 있습니다.

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

브라우저 호환성

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

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

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

macOS: Brave, Edge, Safari
iOS

설정

수정 가능한 코드 사본 받기

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

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

인증 설정

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

Glitch UI에서 Tools를 클릭한 다음 Terminal을 클릭하여 Glitch Terminal을 엽니다.
Glitch Terminal에서 npx web-push generate-vapid-keys를 실행합니다. 비공개 키 복사 및 공개 키 값을 포함할 수 있습니다.
Glitch UI에서 .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"

글리치 터미널을 닫습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

환경 변수 값 (.env에 있는 항목)은 단일 Glitch 프로젝트에 고유합니다. 프로젝트를 리믹스하면 .env의 값은 복사되지 않습니다.

public/index.js를 엽니다.
VAPID_PUBLIC_KEY_VALUE_HERE를 공개 키 값으로 바꿉니다.

서비스 워커 등록

클라이언트는 결국 서비스 워커를 수신해서 있습니다. 서비스 워커는 가능한 한 빨리 등록하는 것이 가장 좋습니다. 자세한 내용은 푸시된 메시지를 알림을 참고하세요.

// TODO add startup logic here 주석을 다음 코드로 바꿉니다.

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

`Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
콘솔 탭을 클릭합니다. 다음과 같은 메시지가 표시됩니다. Service worker was registered.가 콘솔에 기록되었습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

푸시 알림 권한 요청

페이지 로드 시 푸시 알림을 전송할 권한을 요청해서는 안 됩니다. 대신 UI에서는 사용자에게 푸시 알림을 수신할지 묻는 메시지를 표시해야 합니다. 고객이 명시적으로 확인하면 (예: 버튼 클릭) 다음 작업을 수행할 수 있습니다. 브라우저에서 푸시 알림 권한을 받는 공식 프로세스를 시작할 수 있습니다.

Glitch UI에서 View Source를 클릭하여 코드로 돌아갑니다.
public/index.js 페이지의 // TODO 주석을 subscribeButtonHandler()를 다음 코드로 바꿉니다.

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

앱 탭으로 돌아가서 푸시 구독을 클릭합니다. 내 브라우저 또는 운영 체제에서 웹사이트를 방문하도록 허용할 것인지 푸시 알림을 보냅니다 허용 (또는 이에 상응하는 문구)을 클릭합니다. 브라우저/OS 사용). 콘솔에 요청이 수락되었는지 또는 거부되었는지를 나타냅니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

푸시 알림 구독

구독 프로세스에는 제어 가능한 웹 서비스와의 브라우저 공급업체에서 제공하며 이를 푸시 서비스라고 합니다. 배포 완료 후 서버로 전송하는 데 필요한 푸시 알림 구독 정보 서버가 데이터베이스에 장기적으로 저장하도록 할 수 있습니다. 클라이언트의 푸시 알림 구독을 참고하세요. 를 참조하세요.

다음 강조표시된 코드를 subscribeButtonHandler()에 추가합니다.

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly 옵션은 true여야 합니다. 언젠가는 이러한 문제를 해결할 수 있는 사용자에게 표시되는 알림을 표시하지 않고 푸시 메시지를 보낼 수 있음 (자동 푸시)하지만 브라우저에서는 현재 이 기능을 허용하지 않습니다. 사생활 침해 우려가 있기 때문입니다.

applicationServerKey 값은 base64 문자열을 Uint8Array로 변환합니다. 이 값은 서버 및 푸시 서비스 간의 인증입니다.

푸시 알림 수신 거부

사용자가 푸시 알림을 구독한 후 UI는 사용자가 마음이 바뀌는 경우 구독 취소할 수 있는 방법 제공 더 이상 푸시 알림을 받고 싶지 않은 경우

unsubscribeButtonHandler()에서 // TODO 주석 바꾸기 다음 코드로 교체할 수 있습니다.

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

푸시 메시지를 수신하고 알림으로 표시

앞서 언급했듯이, 기본 스레드가 아닌 클라이언트로 푸시된 메시지 수신 및 표시 있습니다. 자세한 내용은 푸시된 메시지를 알림을 참조하세요.

public/service-worker.js를 열고 // TODO 주석을 교체합니다. 서비스 워커의 push 이벤트 핸들러에서 이벤트를 처리할 수 있습니다.

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

앱 탭으로 돌아갑니다.
알림 받기를 클릭합니다. 푸시 알림이 표시됩니다.
다른 브라우저 (또는 구독 워크플로를 거치고 모두 알림을 클릭합니다. 이때에도 동일한 푸시 알림이 구독한 모든 브라우저에 적용됩니다. 다시 브라우저 호환성에서 브라우저/OS 목록 확인 작동하지 않는 것으로 알려진 조합의 근간이 될 수 있습니다.

다양한 방법으로 알림을 맞춤설정할 수 있습니다. 매개변수 보기 ServiceWorkerRegistration.showNotification()에서 자세히 알아보세요.

서비스 워커의 install 리스너에서 self.skipWaiting() 호출을 이해하는 것이 중요합니다. 설명은 대기 단계 건너뛰기를 참고하세요. 이 속성이 없으면 서비스 워커에 대한 코드 변경사항이 즉시 적용되지 않습니다. 필요에 따라 자신의 웹사이트에서 이 기능을 사용하고 싶을 수도 있고 사용하지 않을 수도 있지만 어느 쪽이든 그 효과를 이해하는 것이 중요합니다.

사용자가 알림을 클릭할 때 URL 열기

실제 상황에서는 알림을 사용하여 사용자의 재참여를 유도하고 사이트를 방문하도록 유도합니다. 그렇게 하려면 서비스 워커를 조금 더 구성해야 합니다.

서비스 워커의 notificationclick에서 // TODO 주석을 바꿉니다. 이벤트 핸들러를 만들어야 합니다.

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

앱 탭으로 돌아가서 자신에게 다시 알림을 보낸 다음, 알림을 클릭합니다. 브라우저에서 새 탭이 열리고 로드됩니다. https://web.dev

다음 단계

ServiceWorkerRegistration.showNotification() 보기 알림을 맞춤설정할 수 있는 다양한 방법을 모두 살펴보세요.
푸시 알림 개요 읽기 을 참고하시기 바랍니다.
Codelab: 푸시 알림 서버 빌드를 참고하세요. 구독을 관리하고 웹 푸시 프로토콜을 전송하는 서버를 구축하는 방법을 알아봅니다. 요청을 처리합니다
알림 생성기 사용해 보기 하여 알림을 맞춤설정할 수 있는 모든 방법을 테스트해 보세요.