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

크롬 푸시 알림 배워보기 – 6. 푸시 알림 등록하기

청담개발자
추천 수 311

크롬 푸시 알림 배워보기 – 6. 푸시 알림 등록하기

순서

  • 1. 등록 코드 추가하기
  • 2. 로컬호스트에서 실행해보기
  • 3. 등록 ID 찾기

    • 1. 등록 코드 추가하기

    main.js 파일에서 //TODO 코멘트를 아래 코드로 대체합니다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    if ('serviceWorker' in navigator) {
        console.log('Service Worker is supported');
        navigator.serviceWorker.register('sw.js').then(function(reg) {
            console.log(':^)', reg);
            reg.pushManager.subscribe({
                userVisibleOnly: true
            }).then(function(sub) {
                console.log('endpoint:', sub.endpoint);
            });
        }).catch(function(error) {
            console.log(':^(', error);
        });
    }

    위의 코드는 ServiceWorkerRegistration 객체의 pushManager에게 메시지를 보낼 수 있도록 메니페스트에 등록된 gcm_sender_id를 확인합니다.

    반드시 subscribe() 함수에 {userVisibleOnly: true} 인수를 포함시켜야 합니다. 이는 브라우저에게 메시지를 받으면 알림이 항상 보여지게 합니다. 현재 이를 가리는것은 불법입니다.

    2. 로컬호스트에서 실행해보기

    로컬호스트에서 크롬 개발자 툴을 이용하여 index.html을 실행합니다.

    그러면 다음과 같은 메시지를 볼 수 있습니다.
    notification

    중요: 크롬은 현재 익명모드에서 Push API를 지원하지 않습니다. 푸시 알림 권한을 변경하시려면 URL 좌측의 아이콘을 클릭하시면 됩니다.
    pushsetting

    3. 등록 ID 찾기

    크롬 개발자 툴에서 endpoint 값을 우클릭하여 Copy Link Address를 복사합니다.

    이는 아래 형식과 같습니다.
    https://android.googleapis.com/gcm/send/fZZvTAi-Sbo:APA91bEKDUzeUBlZZWPl-8_7vO_st7TM5pYjVlxpreXsNtFY2yXu6R2iPDuqA4_6G9FwTHE7wqkcl-iJgnA3PIuQ96t5pn_o_H78Z7JP-0jrD4-Rr5ILLsplU08xOvSYVBxmYDkEkrN5

    URL의 마지막 부분(굵게 표현된 부분), 등록 ID를 확인합니다.
    이 값은 나중에 gcm에서 어디로 메시지를 보낼지 확인할때 사용됩니다.
    subscriptionid