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

크롬 푸시 알림 배워보기 – 10. 메시지 클릭 처리

청담개발자
추천 수 373

크롬 푸시 알림 배워보기 – 10. 메시지 클릭 처리

아래 코드를 sw.js에 추가 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
self.addEventListener('notificationclick', function(event) {
    console.log('Notification click: tag ', event.notification.tag);
    event.notification.close();
    var url = 'https://youtu.be/gYMkEMCHtJ4';
    event.waitUntil(
        clients.matchAll({
            type: 'window'
        })
        .then(function(windowClients) {
            for (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];
                if (client.url === url && 'focus' in client) {
                    return client.focus();
                }
            }
            if (clients.openWindow) {
                return clients.openWindow(url);
            }
        })
    );
});

이 코드는 알림의 클릭되면 새로운 페이지를 오픈합니다 — 이 예제에서는 YouTube 비디오를 오픈합니다.

이 코드는 모든 윈도우 사용자의 service worker를 확인합니다. 만약 URL이 이미 열려있다면 포커스 합니다 — 만약 열려있지 않다면 새로운 탭에서 실행합니다.

노트: 안드로이드는 알림이 클릭되어도 알림을 닫지 않습니다.

그러므로 event.notification.close()함수가 필요합니다.