Öncelikle, bu korkunç başlık için özür dilerim.
Chrome 44'te Notfication.data ve ServiceWorkerRegistration.getNotifications() eklendi. Bu özellikler, push mesajlarıyla bildirimler konusunda bazı yaygın kullanım alanlarını açıyor veya basitleştiriyor.
Bildirim verileri
Notification.data, bir JavaScript nesnesini Notification ile ilişkilendirmenize olanak tanır.
Özetle, bir push mesajı aldığınızda bazı veriler içeren bir bildirim oluşturabilir, ardından bildirim tıklama etkinliğinde tıklanan bildirimi ve verilerini alabilirsiniz.
Örneğin, bir veri nesnesi oluşturup aşağıdaki gibi bildirim seçeneklerinize ekleyebilirsiniz:
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
})
);
});
Bu, notificationclick etkinliğindeki bilgileri alabileceğimiz anlamına gelir:
self.addEventListener('notificationclick', function(event) {
var doge = event.notification.data.doge;
console.log(doge.wow);
});
Bundan önce, verileri IndexDB'ye saklamanız veya simge URL'sinin sonuna bir şey eklemeniz gerekiyordu.
ServiceWorkerRegistration.getNotifications()
Push bildirimleri üzerinde çalışan geliştiricilerin sıklıkla istediği özelliklerden biri, gösterdikleri bildirimler üzerinde daha fazla kontrole sahip olmaktır.
Kullanıcının birden fazla mesaj gönderdiği ve alıcının birden fazla bildirim gördüğü bir sohbet uygulaması buna örnek gösterilebilir. İdeal olarak web uygulaması, görüntülenmemiş birkaç bildiriminiz olduğunu fark edip bunları tek bir bildirime sığdırabilir.
getNotifications() olmadan yapabileceğiniz en iyi şey, önceki bildirimi en son mesajla değiştirmektir. getNotifications() işlevini kullanarak, halihazırda görüntülenen bildirimleri "daraltabilir" ve çok daha iyi bir kullanıcı deneyimi elde edebilirsiniz.
Bunu yapmak için kullanacağınız kod oldukça basittir. Mevcut bildirim dizisini almak için push etkinliğinizin içinde ServiceWorkerRegistration.getNotifications() işlevini çağırın ve buradan tüm bildirimleri daraltma veya Notification.tag'i kullanma gibi doğru davranışa karar verin.
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);
}));
}
});
Bu kod snippet'inde vurgulanabilecek ilk nokta, getNotifications() işlevine bir filtre nesnesi ileterek bildirimlerimizi filtrelememizdir. Bu, belirli bir etikete (bu örnekte belirli bir ileti dizisine) ait bildirimlerin listesini alabileceğimiz anlamına gelir.
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
Ardından, görünür bildirimleri inceler ve bu bildirimle ilişkili bir bildirim sayısı olup olmadığını kontrol ederiz. Varsa buna göre artırırız. Bu şekilde, kullanıcıya iki okunmamış mesaj olduğunu söyleyen bir bildirim varsa yeni bir push geldiğinde üç okunmamış mesaj olduğunu belirtmek isteriz.
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();
}
Bildirimin bildirim listesinden kaldırılmasını sağlamak için bildirimde close() işlevini çağırmanız gerektiğini belirtmek isteriz. Aynı etiket kullanıldığı için her bildirim bir sonrakiyle değiştirildiğinden bu, Chrome'daki bir hatadır. Şu anda bu değiştirme işlemi, getNotifications() kaynağından döndürülen dizeye yansıtılmıyor.
Bu, getBildirim() işlevinden yalnızca bir örnektir. Tahmin edebileceğiniz gibi bu API, bir dizi başka kullanım alanı yaratır.
NotificationOptions.vibrate
Chrome 45'ten itibaren bildirim oluştururken titreşim ritmi belirtebilirsiniz. Vibration API'yi destekleyen cihazlarda (şu anda yalnızca Android için Chrome) bu seçenek, bildirim gösterilirken kullanılacak titreşim desenini özelleştirmenize olanak tanır.
Titreşim ritmi, bir sayı dizisi veya tek bir sayı dizisi olarak değerlendirilen tek bir sayı olabilir. Dizideki değerler, zamanları milisaniye cinsinden temsil eder. Çift dizinler (0, 2, 4, ...) titreşimin süresini belirtirken tuhaf dizinler bir sonraki titreşimden önce duraklama süresini belirtir.
self.registration.showNotification('Buzz!', {
body: 'Bzzz bzzzz',
vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});
Sık istenen diğer özellikler
Geliştiricilerin en çok istediği özelliklerden biri, belirli bir sürenin ardından bildirimleri kapatma veya görünür durumdaki bildirimleri kapatmak için push bildirimi gönderme özelliğidir.
Şu anda bunu yapmanın bir yolu yok ve spesifikasyonda buna izin verecek bir şey yok :( ancak Chrome mühendislik ekibi bu kullanım alanından haberdar.
Android Bildirimleri
Masaüstünde aşağıdaki kodu kullanarak bildirim oluşturabilirsiniz:
new Notification('Hello', {body: 'Yay!'});
Bu özellik, platformun kısıtlamaları nedeniyle Android'de hiçbir zaman desteklenmiyordu: Özellikle de Chrome, "click" gibi Bildirim nesnesindeki geri çağırmaları destekleyemez. Ancak, masaüstünde şu anda açık olabilecek web uygulamalarının bildirimlerini görüntülemek için kullanılır.
Bununla ilgili tek neden, başlangıçta aşağıdaki gibi basit bir özellik algılamanın masaüstü sürümünü desteklemenize yardımcı olması ve Android'de hatalara neden olmamasıdır:
if (!'Notification' in window) {
// Notifications aren't supported
return;
}
Ancak Android için Chrome'da artık push bildirimi desteği bulunduğundan bildirimler bir web sayfasından değil, ServiceWorker'dan oluşturulabilir. Bu da bu özellik algılamanın artık uygun olmadığı anlamına gelir. Android için Chrome'da bildirim oluşturmaya çalışırsanız şu hata mesajını alırsınız:
_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_
Android ve masaüstü için özellik algılamanın şu anda en iyi yolu aşağıdakileri yapmaktır:
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;
}
Bunu şu şekilde kullanabilirsiniz:
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();
}