Notifications API ve İzin Yönetimi

Notification.permission, mevcut izin durumunu yansıtan statik bir dizedir. "granted" (kullanıcı izin verdi), "denied" (kullanıcı engelledi) veya "default" (henüz sorulmadı) olabilir. Gereksiz hatalardan kaçınmak için bildirimleri göstermeyi denemeden önce bu özelliği denetleyin.

Notification.requestPermission(), yeni izin dizesiyle sonuçlanan bir vaat döndürür. Bu yöntemi yalnızca açık bir kullanıcı eylemine yanıt olarak çağırın; sayfa yüklenirken çağırmayın. Tarayıcılar sayfa yüklenir yüklenmez açılan izin istemlerini yok sayar veya bastırır; kullanıcılar da bağlam olmadan görünen bu istemleri rahatsız edici bulur.

En etkili yaklaşım, avantajı açıklayan uygulama içi bir istem göstermek ve ardından requestPermission() çağrılmadan önce kullanıcının "Bildirimleri etkinleştir" düğmesine tıklamasına izin vermektir. Bu yöntem bağlam sağlar, kabul oranlarını artırır ve tarayıcının sitenizi istenmeyen içerik gönderiyor olarak işaretlemesini önler. Sayfa yüklenirken hiçbir zaman izin istemeyin.

new Notification(title, options), bir sistem bildirimi oluşturur ve görüntüler. İlk bağımsız değişken başlık dizesidir. İkinci bağımsız değişken olan options nesnesi, body (alt başlık metni), icon (görsel URL'si) ve yinelenen bildirimleri önlemek için tag gibi özellikleri kabul eder. Bu işlem yalnızca izin "granted" olduğunda çalışır.

Temel bildirim seçenekleri şunlardır: başlığın altında açıklayıcı metin için body, küçük bir görsel için icon, OS bildirim alanında gösterilen küçük tek renkli simge için badge, büyük satır içi görsel için image, aynı etikete sahip önceki bildirimin yerine yenisini koymak için tag ve bildirimi kullanıcı işlem yapana kadar tutmak için requireInteraction: true.

Notification örneği birkaç olay tetikler: Kullanıcı bildirime tıkladığında onclick çalışır; bunu pencereyi öne getirmek ve yönlendirme yapmak için kullanabilirsiniz. Bildirim kapatıldığında onclose, oluşturulurken bir sorun yaşandığında ise onerror çalışır. İşleyicileri new Notification() çağrısından sonra döndürülen örneğe ekleyin.

Döndürülen Notification örneğini bir değişkende saklayın ve programlı olarak kapatmak için notification.close() çağrısı yapın. Bu yöntem, belirli bir süre sonra önemini yitiren zamana duyarlı bildirimler için kullanışlıdır. Birkaç saniye sonra otomatik olarak kapatmak için setTimeout ile birlikte kullanın.

Bildirimler API'si güvenli bir bağlam gerektirir. HTTP sayfalarında tarayıcıya bağlı olarak typeof Notification === 'undefined' sonucu alınır veya API tamamen devre dışı bırakılır. Bu, kötü amaçlı sitelerin kullanıcıları sahte sistem mesajlarıyla bombardımana tutmasını önleyen bir güvenlik önlemidir. Kullanmadan önce kullanılabilirliği her zaman denetleyin.

Bir useNotifications kancası iki yöntem sunabilir: requestPermission() ve showNotification(title, options). Kanca, mevcut izin durumunu kendi içinde izler ve izin istedikten sonra bu durumu günceller. Kanca bu denetimleri kendi içinde gerçekleştirdiği için bileşenler izin denetimleriyle uğraşmadan showNotification çağrısı yapabilir.

Sayfa Görünürlüğü API'si, document.hidden özelliğini ve visibilitychange olayını sunar. Kullanıcı sekmeyi zaten görüntülemiyorsa bildirimler daha anlamlıdır. Sayfa zaten ön plandayken gereksiz uyarılardan kaçınmak için bildirim göstermeden önce document.hidden === true koşulunu denetleyin.

Burada gösterilen Bildirimler API'si, sayfanın kendisi tarafından yerel olarak tetiklenen bildirimler içindir. Sayfa kapalıyken bile ulaşan anlık bildirimler için Push API'sini bir hizmet çalışanıyla birlikte kullanmanız gerekir. Hizmet çalışanı push olayını alır ve arka planda self.registration.showNotification() çağrısını yapar.

Notification.permission değeri granted, denied veya default olabilir. İzni her zaman sayfa yüklenirken değil, bir kullanıcı eylemiyle isteyin. Bildirim oluşturmak için new Notification(title, options) kullanın ve pencereyi öne getirmek için onclick olayını ele alın. Bildirimleri yalnızca sekme gizliyken göstermek için bunu Görünürlük API'siyle birleştirin.