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

크롬 푸시 알림 배워보기 – 9. 알림 보여주기

청담개발자
추천 수 336

크롬 푸시 알림 배워보기 – 9. 알림 보여주기

순서

  • 1. shownotification()코스 추가
  • 2. GCM에게 알림 요청 하기

    • 1. shownotification()코스 추가

    sw.js의 코드를 아래와 같이 변경합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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', event);
      var title = 'Push message';
      event.waitUntil(
        self.registration.showNotification(title, {
          body: 'The Message',
          icon: 'images/icon.png',
          tag: 'my-tag'
        }));
    });
    // TODO

    event.waitUntil() 함수는 이벤트 핸들러의 라이프 타임을 showNotification()함수가 확인될때까지 연장시킵니다.

    각 태그 값마다 하나의 알림이 보여집니다. 만약 새로운 메시지를 받게되면 이전 알림은 대체됩니다. 여러개의 알림을 동시에 보여지게 하려면 다른 태그 값을 각각의 showNotification() 함수로 호출하여야 합니다.

    2. GCM에게 알림 요청 하기

    cURL 커맨드 혹은 XHR 요청을 실행합니다.

    그러면 아래와 같은 매시지를 받을 수 있습니다.
    push message