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.