JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2016.10.13 / 18:09

크롬 푸시 알림 배워보기 – 3. 서비스 워커(Service Worker) 시작하기

청담개발자
추천 수 325

크롬 푸시 알림 배워보기 – 3. 서비스 워커(Service Worker) 시작하기

이곳에서 다뤄지는 내용의 완성본은 다운로드 받은 폴더 아래 위치한completed/step3 폴더안에 저장되어 있습니다.

내용

  • 1.Index.html 생성
  • 2.Service Worker 추가
  • 3.Service Worker 등록 & 설치
  • 4.localhost에서 동작
  • 5.serviceworker-internals 해보기
  • 6.Service Worker에 이벤트 리스너 추가

    • 1. Index.html 생성

    app폴더 안에 index.html파일을 생성하고 아래 코드를 추가합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
      <title>Push Notification codelab</title>
    </head>
    <body>
      <h1>Push Notification codelab</h1>
      <p>This page must be accessed using HTTPS or via localhost.</p>
      <script src="js/main.js"></script>
    </body>
    </html>

    크롬 브라우저를 이용하여 index.html을 로컬에서 동작시켜 봅니다. URL은 http://localhost/push-notifications/app/index.html과 같은 형식이어야 합니다.

    2.Service Worker 추가

    app폴더 안에 sw.js파일을 생성합니다. 안에 내용은 나중에 추가하도록 하겠습니다.

    service worker를 사용 해본 적이 없다고 걱정하지 않아도 됩니다. service worker란 백그라운드에서 네트워크 요청을 기다리고 있다가 가로채고, 푸시 메시지를 처리하는 등의 작업을 하는 worker 스크립트를 말합니다.

    보다 더 자세한 정보를 원하신다면 HTML5 Rocks의 Introduction to Service Worker를 참조하십시오.

    3.Service Worker 등록 & 설치

    이번에는 index.html에서 사용되는 main.js 자바스크립트 파일을 생성해보도록 하겠습니다. 이 것은 service worker 스크립트에 접근할 수 있게 해줍니다. app폴더 아래 js폴더를 생성하고 그 안에 main.js파일을 생성하여 아래 코드를 입력합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if ('serviceWorker' in navigator) {
     console.log('Service Worker is supported');
     navigator.serviceWorker.register('sw.js').then(function(reg) {
       console.log(':^)', reg);
       // TODO
     }).catch(function(err) {
       console.log(':^(', err);
     });
    }

    이 코드는 사용자의 브라우저가 service worker를 지원하는지를 확인하고 sw.js에서 만들어진 service worker를 등록하고 설치합니다.
    — 하지만 아직까지는 아무것도 작동하지 않습니다.

    4.localhost에서 동작

    index.html을 localhost에서 실행하고 크롬 개발자 툴을 이용하여 확인하면 아래 그림과 같이 나타납니다.
    localhost_try

    5.serviceworker-internals 해보기

    service worker들이 잘 동작하고 있는지 확인 하기 위해 크롬 브라우저URL에 chrome://serviceworker-internals를 입력하여 진단 페이지를 엽니다.
    serviceworker_internal

    6.Service Worker에 이벤트 리스너 추가

    아래 코드를 sw.js에 추가하세요.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    console.log('Started', self);
    self.addEventListener('install', function(event) {
      self.skipWaiting();
      console.log('Installed', event);
    });
    self.addEventListener('activate', function(event) {
      console.log('Activated', event);
    });
    self.addEventListener('push', function(event) {
      console.log('Push message received', event);
      // TODO
    });

    service worker에서 self는 ServiceWorkerGlobalScope 오브젝트 servicer worker 자신을 뜻합니다.

    유용한 팁!
    기본설정으로 이전에 실행된 service worker들은 닫기 전까지 계속 실행됩니다. 따라서 새로 생성된 service worker는 대기 상태가 됩니다.
    하지만 skipWaiting() 함수가 불러지게 되면(위의 코드에 있는 함수) 대기상태를 건너뛰고 바로 활성화됩니다.

    이는 디버깅 하기에 편리합니다.

    chrome://serviceworker-internals 페이지에서 inspect 버튼을 클릭하면 다음과 같은 화면이 나타납니다.
    inspect

    주의사항: service worker 코드를 파싱하는데 에러가 발생한다면 service worker는 설치되지 않고 에러를 던지게 됩니다.
    이렇게?을때 service worker가 업데이트 되지 않는 희한한 경우가 발생할 수가 있으므로 코드변경시 항상 확인을 하셔야 합니다.

    이전 단계 바로가기
    다음 단계 바로가기