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

크롬 푸시 알림 배워보기 – 11. 알림 기능 끄기

청담개발자
추천 수 381

크롬 푸시 알림 배워보기 – 11. 알림 기능 끄기

순서

  • 1. 푸시 서비스 구독/취소 버튼 추가
  • 2. 구독/취소 함수를 main.js에 추가

    • 사용자가 구독/취소를 할 수 있도록 PushSubscription 객체로부터 unsubscribe() 함수를 불러 옵니다.

    1. 푸시 서비스 구독/취소 버튼 추가

    index.html에 아래 코드를 추가 합니다.

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

    2. 구독/취소 함수를 main.js에 추가

    main.js파일을 아래와 같이 수정 합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    var reg;
    var sub;
    var isSubscribed = false;
    var subscribeButton = document.querySelector('button');
    if ('serviceWorker' in navigator) {
      console.log('Service Worker is supported');
      navigator.serviceWorker.register('sw.js').then(function() {
        return navigator.serviceWorker.ready;
      }).then(function(serviceWorkerRegistration) {
        reg = serviceWorkerRegistration;
        subscribeButton.disabled = false;
        console.log('Service Worker is ready :^)', reg);
      }).catch(function(error) {
        console.log('Service Worker Error :^(', error);
      });
    }
    subscribeButton.addEventListener('click', function() {
      if (isSubscribed) {
        unsubscribe();
      } else {
        subscribe();
      }
    });
    function subscribe() {
      reg.pushManager.subscribe({userVisibleOnly: true}).
      then(function(pushSubscription){
        sub = pushSubscription;
        console.log('Subscribed! Endpoint:', sub.endpoint);
        subscribeButton.textContent = 'Unsubscribe';
        isSubscribed = true;
      });
    }
    function unsubscribe() {
      sub.unsubscribe().then(function(event) {
        subscribeButton.textContent = 'Subscribe';
        console.log('Unsubscribed!', event);
        isSubscribed = false;
      }).catch(function(error) {
        console.log('Error unsubscribing', error);
        subscribeButton.textContent = 'Subscribe';
      });
    }

    이 코드는 ServiceWorkerRegistration 객채 reg의 값을 service worker가 설치 될때에 설정하고 subscribe() 함수를 이용하여 푸시 메시지를 구독하게 합니다.

    subscribe()함수는 PushSubscription 객체 sub을 생성하고 이는 unsubscribe() 함수를 통해 사용됩니다.

    주의: 사용자가 구독신청/취소 할 때에 매번 새로운 registration ID를 생성하므로 GCM에서 그에 맞게 대응해 줘야 합니다.