Service worker란? 사용법

참고: 웹 앱에 푸시 알림 추가

 

service worker

Javascript assets이다.

web server와 web browser 사이에서 프록시처럼 동작한다.

service worker의 목적은 offline access 제공을 위한 신뢰성을 높이기 위함이다.

앱과 유사하게 동작시키게 하기 위해서 점진적으로 웹사이트를 향상시킨다.

 

사용자 구독 브라우저 알림 동의 받기

 app/index.html 에서 호출하는 javascript 파일( script/main.js )에 서비스 워커를 등록하는 스크립트를 작성합니다.

 

 script/main.js 

if ('serviceworker' in navigator && 'PushManager' in window) {
  console.log('Service Worker ad Push is supported');
  navigator.serviceWorker.register('sw,js')
  .then(function(swReg) {
    console.log('Servuce Worker is registered', swReg);
    
    swRegisteration = swReg;
    // 서비스 워커를 등록할 때 호출
    initialliseUI();
   }).catch(function(error) {
     console.error('Service Worker Error', error);
   });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

위의 코드에서 현재 브라우저가 서비스 워커와 푸시 메시지를 지원하는지 확인하며, 지원한다면,  sw.js  파일을 등록합니다.

 

애플리케이션 서버 키를 등록.. 비공개 키를 웹 앱에 두면 안 됨.

 

상태 초기화

 script/main.js 

function initialiseUI() {
  //
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });
  // Set the initail subscription vallue
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);
    
    if (isSubscribed) {
      console.log('User IS subscribed');
    } else {
      console.log('User is NOT subscribed.');
    }
    
    updateBtn();
  }
}


function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }
  
  pushButton.disabled = false;

}

사용자가 푸시 버튼을 누를 때, 푸시를 구독하는 데 시간이 걸리 수 있으므로, 먼저 버튼을 비활성화 시켜 구독하는 동안 사용자가 버튼을 클릭 못하게 막음. 

 

구독 상태가 아닌 경우, 다음 로직을 호출하도록 함.

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({})
}

 getSubscription() 은 구독이 있는 경우 현재 구독으로 확인되는 프라미스를 반환하고, 그렇지 않으면, null을 반환하는 메서드임.

이 메서드로, 구독 상태를 확인하고,  updateBtn() 

을 호출해서, 도움말 역할을 하는 텍스트와 함께 버튼을 활성화 할 수 있다.

 

 

서비스 워커 푸시 메시지 처리

브라우저가 푸시 메시지를 수신 -> 푸시의 대상이 되는 서비스워커를 찾기 -> 서비스 워커를 깨워서 푸시 이벤트를 발생시킴.

그니까, 브라우저 컨텍스트가 이벤트를 받기를 항상 대기하고 있어야 하고, 수신했을 때, 알림으로 표시해야 합니다.

 

 sw.js 

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
   
  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  } 
  
  event.waitUntil(self.registration.showNotification(title, options));
})

 

self는 서비스 워커 자체를 참조합니다.

 

 showNotification(알림 타이틀, 옵션 객체) 

푸시 메시지가 수신되면 이벤트 리스너가 실행됩니다. 이 때,  showNotification() 이 호출되어서 알림을 생성합니다.

두 번째 파라미터는 옵션을 넣습니다. 위 코드에서 보면, badge가 있는데, Android OS에서만 작동합니다.

 

 

 event.waitUntil() 

이 메서드는 프라미스를 취하며, 브라우저는 전달된 프라미스가 확인될 때까지 서비스 워커를 활성화 및 실행 상태로 유지할 것입니다.

 

 

위의 코드를 더 쉽게 작성하면 다음과 같습니다.

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);