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

서비스 워커를 사용하여 알림 관리

Kate Jeffreys

이 Codelab에서는 서비스 워커를 사용하여 알림을 관리합니다. 여기에서는 서비스 워커와 알림 권한 요청 및 알림 전송의 기본사항을 이미 알고 있다고 가정합니다. 알림에 대해 다시 한번 살펴보고 싶다면 알림 API 시작하기 Codelab을 참고하세요. 서비스 워커에 대해 자세히 알아보려면 Matt Gaunt의 서비스 워커 소개를 참고하세요.

샘플 앱 및 시작 코드 익히기

새 Chrome 탭에서 라이브 앱을 확인하는 것으로 시작합니다.

`Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
콘솔 탭을 클릭합니다.
필터 상자 옆에 있는 수준 드롭다운에서 정보 옵션이 선택되어 있는지 확인합니다.
실제 앱의 DevTools 콘솔에 다음 콘솔 메시지가 표시됩니다.

TODO: Implement getRegistration().

이 메시지는 이 Codelab에서 구현할 함수 스텁에서 가져온 것입니다.

이제 샘플 앱의 코드를 살펴보겠습니다.

public/index.js를 살펴보세요.
- 구현할 함수의 스텁은 registerServiceWorker, getRegistration, unRegisterServiceWorker, sendNotification의 4가지입니다.
- requestPermission 함수는 알림을 보낼 사용자 권한을 요청합니다. 알림 API 시작하기 codelab을 진행했다면 여기에서 requestPermission 함수가 사용된 것을 알 수 있습니다. 유일한 차이점은 이제 권한 요청을 해결한 후 사용자 인터페이스도 업데이트한다는 것입니다.
- updateUI 함수는 앱의 모든 버튼과 메시지를 새로고침합니다.
- initializePage 함수는 브라우저에서 서비스 워커 기능의 기능 감지를 실행하고 앱 사용자 인터페이스를 업데이트합니다.
- 스크립트는 페이지가 로드될 때까지 기다린 후 초기화합니다.
public/service-worker.js를 엽니다.

이름에서 알 수 있듯이 이 파일을 서비스 워커로 등록하는 코드를 앱에 추가합니다.

파일이 아직 앱에서 사용되지는 않지만 서비스 워커가 활성화될 때 콘솔에 메시지를 출력하는 시작 코드가 포함되어 있습니다.

서비스 워커가 알림을 수신할 때 알림을 처리하는 코드를 public/service-worker.js에 추가합니다.

서비스 워커 등록

이 단계에서는 사용자가 앱 UI에서 서비스 워커 등록을 클릭할 때 실행되는 코드를 작성합니다. 이 코드는 public/service-worker.js를 서비스 워커로 등록합니다.

public/index.js를 엽니다. registerServiceWorker 함수를 다음 코드로 바꿉니다.
```
// Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}
```
registerServiceWorker는 async function 선언을 사용하여 프라미스 처리를 더 편리하게 합니다. 이를 통해 Promise의 확인된 값을 await할 수 있습니다. 예를 들어 위의 함수는 서비스 워커 등록 결과를 기다린 후 UI를 업데이트합니다. 자세한 내용은 MDN의 await을 참고하세요.
이제 사용자가 서비스 워커를 등록할 수 있으므로 서비스 워커 등록 객체에 대한 참조를 가져올 수 있습니다. public/index.js에서 getRegistration 함수를 다음 코드로 바꿉니다.
```
// Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}
```
위 함수는 Service Worker API를 사용하여 현재 서비스 워커 등록을 가져옵니다(있는 경우). 서비스 워커 등록을 더 편리하게 참조할 수 있습니다.

서비스 워커 등록 기능을 완료하려면 서비스 워커를 등록 취소하는 코드를 추가합니다. unRegisterServiceWorker 함수를 다음 코드로 바꿉니다.

// Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

라이브 앱을 보고 있는 탭에서 페이지를 새로고침합니다. 이제 서비스 워커 등록 및 서비스 워커 등록 취소 버튼이 작동합니다.

서비스 워커에 알림 보내기

이 단계에서는 사용자가 앱 UI에서 알림 보내기를 클릭할 때 실행되는 코드를 작성합니다. 이 코드는 알림을 만들고, 서비스 워커가 등록되었는지 확인한 다음, 서비스 워커의 postMessage 메서드를 사용하여 서비스 워커에 알림을 보냅니다.

public/index.js를 열고 sendNotification 함수를 다음 코드로 바꿉니다.

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

이 코드는 다음 작업을 실행합니다.

sendNotification는 비동기 함수이므로 await를 사용하여 서비스 워커 등록에 대한 참조를 가져올 수 있습니다.
서비스 워커의 postMessage 메서드는 앱에서 서비스 워커로 데이터를 전송합니다. 자세한 내용은 postMessage에 관한 MDN 문서를 참고하세요.
코드는 postMessage 함수에 액세스하기 전에 navigator.serviceWorker.controller 속성이 있는지 확인합니다. 활성 서비스 워커가 없거나 페이지가 강제 새로고침된 경우 (Shift+새로고침) navigator.serviceWorker.controller는 null가 됩니다. 자세한 내용은 MDN의 ServiceWorker 컨트롤러 문서를 참고하세요.

서비스 워커에서 알림 처리

이 단계에서는 서비스 워커에 게시된 메시지를 처리하고 사용자에게 알림을 표시하는 코드를 작성합니다.

public/service-worker.js를 엽니다. 파일 끝에 아래 코드를 추가합니다.

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

간단히 설명하면 다음과 같습니다.

self는 서비스 워커 자체에 대한 참조입니다.
이제 서비스 워커가 알림 표시를 처리하지만 기본 앱 UI는 여전히 사용자로부터 알림 권한을 가져와야 합니다. 권한이 부여되지 않으면 showNotification에서 반환된 프로미스가 거부됩니다. 위 코드는 포착되지 않은 Promise 거부 오류를 방지하고 이 오류를 좀 더 원활하게 처리하기 위해 catch 블록을 사용합니다.

이 시리즈의 다음 Codelab인 푸시 알림 서버 빌드로 이동합니다.