Giriş
Bildirimler API'si, hangi sekmeye odaklanıldığından bağımsız olarak belirli etkinlikler için kullanıcıya hem pasif olarak (yeni e-postalar, tweet'ler veya takvim etkinlikleri) hem de kullanıcı etkileşimlerinde bildirimler göstermenize olanak tanır. Taslak özellikleri mevcuttur ancak şu anda herhangi bir standartta değildir.
Aşağıdaki basit adımları uygulayarak bildirimleri yalnızca birkaç dakika içinde uygulayabilirsiniz:
1. Adım: Notifications API desteğini kontrol edin
webkitNotifications
hizmetinin desteklenip desteklenmediğini kontrol ederiz. webkitNotifications
adının, taslak spesifikasyonunun bir parçası olması nedeniyle gösterildiğini unutmayın. Son spesifikasyonda bunun yerine bir notifications() işlevi bulunur.
// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}
2. Adım: Kullanıcının, bildirimleri göstermek için bir web sitesine izin vermesine izin verin
Kullanıcı web sitesine bildirimlerin gösterilmesi için manuel olarak izin vermediyse, bahsettiğimiz kuruculardan herhangi biri güvenlik hatası verir.
İstisnayı işlemek için bir try-catch ifadesi kullanabilirsiniz ancak aynı amaç için checkPermission
yöntemini de kullanabilirsiniz.
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Web uygulamasının bildirimleri gösterme izni yoksa requestPermission
yöntemi bir bilgi çubuğu gösterir:
Bununla birlikte, istenmeyen bilgi çubuklarından kaçınmak için, requestPermission
yönteminin yalnızca fare veya klavye etkinlikleri gibi bir kullanıcı işlemi tarafından tetiklenen etkinlik işleyicilerde çalıştığını unutmamak çok önemlidir. Bu durumda, kullanıcı işlemi "show_button" kimliğine sahip düğmeyi tıklamadır.
Kullanıcı bir noktada requestPermission
işlemini tetikleyen bir düğmeyi veya bağlantıyı açıkça tıklamadıysa yukarıdaki snippet hiçbir zaman çalışmaz.
3. Adım: İşleyicileri ve diğer işlemleri ekleyin
document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
notification_test = window.webkitNotifications.createNotification(
'icon.png', 'Notification Title', 'Notification content...');
notification_test.ondisplay = function() { ... do something ... };
notification_test.onclose = function() { ... do something else ... };
notification_test.show();
} else {
window.webkitNotifications.requestPermission();
}
}, false);
Bu eğiticinin kapsamı dışında olsa da, kodun daha düzenli olmasını sağlamak için bu etkinlik ve işlemleri kendi Bildirim sınıfınızı oluşturarak ekleyebilirsiniz.