먼저 제목이 좋지 않은 점에 대해 사과드리며, 그럴 수 없었습니다.
Chrome 44 Notfication.data ServiceWorkerRegistration.getNotifications() 문제 해결 시 일반적으로 사용되는 몇 가지 사용 사례를 단순화하기 위해 알림을 설정할 수 있습니다.
알림 데이터
Notification.data를 사용하면 JavaScript 객체를 알림.
간단히 말하자면 푸시 메시지를 받으면 일부 데이터가 포함된 알림을 만든 다음 알림 클릭 이벤트에서 클릭된 알림을 받고 관련 데이터를 가져올 수 있습니다.
예를 들어 데이터 객체를 만들어 알림 옵션에 추가합니다. 다음과 같습니다.
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
var data = {
doge: {
wow: 'such amaze notification data'
}
};
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag,
data: data
})
);
});
즉, notificationclick 이벤트에서 정보를 가져올 수 있습니다.
self.addEventListener('notificationclick', function(event) {
var doge = event.notification.data.doge;
console.log(doge.wow);
});
이전에는 IndexDB에 데이터를 보관하거나 데이터의 끝에 무언가를 추가해야 했습니다. 아이콘 URL - eek.
ServiceWorkerRegistration.getNotifications()
푸시 알림을 개발하는 개발자의 일반적인 요청 중 하나는 표시되는 알림을 더 세밀하게 관리할 수 있습니다
채팅 애플리케이션을 예로 들 수 있습니다. 채팅 애플리케이션은 사용자가 수신자에게 여러 알림이 표시됩니다. 웹 앱 권장 아직 조회되지 않은 알림이 여러 개 있는 것을 확인하실 수 있을 것입니다. 하나의 알림으로 축소할 수 있습니다.
getNotifications()가 없다면 이전 알림을 교체하는 것이 가장 좋습니다. 최신 메시지로 알림을 전송합니다. getNotifications()를 사용하여 다음과 같은 작업을 수행할 수 있습니다. "접기" 알림이 이미 표시되어 있는 경우 훨씬 더 나은 사용자 환경을 제공할 수 있습니다.
이를 위한 코드는 비교적 간단합니다. 푸시 이벤트 내에서 ServiceWorkerRegistration.getNotifications()를 사용하여 현재 알림의 알림을 받은 다음 적절한 행동이 무엇인지, 아니면 모든 알림 축소 또는 Notification.tag 사용
function showNotification(title, body, icon, data) {
var notificationOptions = {
body: body,
icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png',
tag: 'simple-push-demo-notification',
data: data
};
self.registration.showNotification(title, notificationOptions);
return;
}
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
// Since this is no payload data with the first version
// of Push notifications, here we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
// Throw an error so the promise is rejected and catch() is executed
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
var title = 'You have a new message';
var message = data.message;
var icon = 'images/notification-icon.png';
var notificationTag = 'chat-message';
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
.then(function(notifications) {
if (notifications && notifications.length > 0) {
// Start with one to account for the new notification
// we are adding
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data &&
existingNotification.data.notificationCount) {
notificationCount +=
existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
message = 'You have ' + notificationCount +
' weather updates.';
notificationData.notificationCount = notificationCount;
}
return showNotification(title, message, icon, notificationData);
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this ' +
'push message';
return showNotification(title, message);
})
);
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event);
if (Notification.prototype.hasOwnProperty('data')) {
console.log('Using Data');
var url = event.notification.data.url;
event.waitUntil(clients.openWindow(url));
} else {
event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME,
event.notification.tag).then(function(url) {
// At the moment you cannot open third party URL's, a simple trick
// is to redirect to the desired URL from a URL on your domain
var redirectUrl = '/redirect.html?redirect=' +
url;
return clients.openWindow(redirectUrl);
}));
}
});
이 코드 스니펫으로 강조할 첫 번째 사항은 getNotifications()에 필터 객체를 전달하여 알림을 확인할 수 있습니다. 즉, 특정 태그에 대한 알림 목록을 가져올 수 있습니다 (이 예에서는 특정 대화)
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
그런 다음 표시되는 알림을 살펴보고 해당 알림과 연결된 알림 개수이며 있습니다. 이렇게 하면 사용자에게 읽지 않은 메시지가 세 개라는 것을 알 수 있습니다. 새로운 푸시가 도착할 때
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data && existingNotification.data.notificationCount) {
notificationCount += existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
주의할 점은 알림에서 close()를 호출해야 한다는 것입니다.
알림이 알림 목록에서 삭제되었는지 확인합니다. 버그
Chrome에 표시됩니다. 동일한 태그가 있기 때문에 각 알림이 다음 알림으로 대체됩니다.
사용됩니다. 지금은 이 대체 항목이 반환된 배열에 반영되지 않습니다.
최저가: getNotifications()
이것은 getNotifications()의 한 예일 뿐이며, 상상할 수 있는 것처럼 이 API는 다른 다양한 사용 사례를 활용할 수 있습니다.
NotificationOptions.vibrate
Chrome 45부터 맞춤 URL을 만들 때 진동 패턴을 지정할 수 있습니다. 있습니다. Vibration API - 현재만 해당 Android용 Chrome - 사용자가 앱을 실행할 때 알림이 표시될 때 사용됩니다.
진동 패턴은 일련의 숫자일 수도 있고 는 숫자 한 개의 배열로 처리됩니다. 배열의 값은 짝수 지수 (0, 2, 4, ...)는 진동할 시간을 나타내며, 홀수 지수는 다음 진동 전에 일시중지해야 하는 시간입니다.
self.registration.showNotification('Buzz!', {
body: 'Bzzz bzzzz',
vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});
나머지 일반 기능 요청
개발자들이 가장 많이 요청하는 한 가지 기능은 알림을 보내는 기능이 있는 경우 닫는 것이 목적인 알림으로 보냅니다.
현재로서는 이렇게 할 수 있는 방법이 없으며 허용될 것입니다 :( 하지만 Chrome 엔지니어링팀은 이 사용 사례를 알고 있습니다.
Android 알림
데스크톱에서는 다음 코드를 사용하여 알림을 만들 수 있습니다.
new Notification('Hello', {body: 'Yay!'});
플랫폼의 제한으로 인해 Android에서는 지원되지 않았습니다. 특히 Chrome은 알림 객체에서 콜백을 지원할 수 없습니다. 예: 온클릭 하지만 데스크톱에서 웹용 알림을 표시하는 데 사용됩니다. 열려 있을 수 있는 앱을 표시합니다.
제가 언급하는 유일한 이유는 원래 단순한 특성 감지가 데스크톱을 지원하는 데 도움이 되고 Android:
if (!'Notification' in window) {
// Notifications aren't supported
return;
}
하지만 이제 Android용 Chrome에서 푸시 알림이 지원되면서 ServiceWorker에서는 생성할 수 있지만 웹페이지에서는 생성할 수 없습니다. 즉, 특성 감지가 더 이상 적절하지 않습니다. 새 계정에서 알림을 만들려고 하면 Android용 Chrome을 사용할 경우 다음과 같은 오류 메시지가 표시됩니다.
_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_
현재 Android 및 데스크톱용 기능 감지를 위한 가장 좋은 방법은 다음과 같습니다.
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
다음과 같이 사용할 수 있습니다.
if (window.Notification && Notification.permission == 'granted') {
// We would only have prompted the user for permission if new
// Notification was supported (see below), so assume it is supported.
doStuffThatUsesNewNotification();
} else if (isNewNotificationSupported()) {
// new Notification is supported, so prompt the user for permission.
showOptInUIForNotifications();
}