Bildirim Tetikleyicileri API'si

Bildirim Tetikleyicileri, ağ bağlantısı gerektirmeyen yerel bildirimleri planlamanıza olanak tanır. Böylece, takvim uygulamaları gibi kullanım alanları için bu bildirimler idealdir.

Bildirim Tetikleyicileri nelerdir?

Web geliştiricileri, Web Notifications API'yi kullanarak bildirimleri gösterebilir. Bu özellik genellikle son dakika haberleri veya alınan mesajlar gibi zaman açısından hassas bilgileri kullanıcıyı bilgilendirmek için Push API ile birlikte kullanılır. Bildirimler, kullanıcının cihazında JavaScript çalıştırılarak gösterilir.

Push API'deki sorun, zaman veya konum gibi belirli bir koşul karşılandığında gösterilmesi gereken bildirimleri tetiklemek için güvenilir olmamasıdır. Zamana dayalı koşula örnek olarak, patronunuzla saat 14:00'te önemli bir toplantıyı hatırlatan bir takvim bildirimi verilebilir. Konuma dayalı durum koşuluna örnek olarak, marketinizin yakınına girdiğinizde süt satın almanızı hatırlatan bir bildirim verilebilir. Ağ bağlantısı veya doz modu gibi pili koruyan özellikler, push tabanlı bildirimlerin iletilmesini geciktirebilir.

Bildirim tetikleyicileri, bildirimleri tetikleme durumlarıyla önceden planlamanızı sağlayarak bu sorunu çözer. Böylece, ağ bağlantısı olmasa veya cihaz pil tasarrufu modunda olsa bile işletim sistemi bildirimi doğru zamanda gönderir.

Kullanım alanları

Takvim uygulamaları, kullanıcıya yaklaşan toplantıları hatırlatmak için zamana dayalı bildirim tetikleyicileri kullanabilir. Bir takvim uygulaması için varsayılan bildirim şeması, toplantıdan bir saat önce ilk uyarı bildirimi ve ardından beş dakika önce başka bir acil bildirim göstermek olabilir.

Bir TV ağı, kullanıcılara en sevdikleri TV programının başlamak üzere olduğunu veya bir konferans canlı yayınının başlamak üzere olduğunu hatırlatabilir.

Saat dilimi dönüştürme siteleri, kullanıcılarının telefon konferansları veya görüntülü görüşmeler için alarmlar planlamalarına olanak tanımak için zamana dayalı bildirim tetikleyicileri kullanabilir.

Mevcut durum

Adım Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturma Başlatılmadı
3. Geri bildirim alın ve tasarımı tekrarlayın. Devam ediyor
4. Kaynak denemesi Eksiksiz
5. Başlatın Başlatılmadı

Bildirim tetikleyicileri nasıl kullanılır?

about://flags aracılığıyla etkinleştirme

Kaynak deneme jetonu olmadan Notification Triggers API ile yerel olarak deneme yapmak için about://flags üzerinde #enable-experimental-web-platform-features işaretini etkinleştirin.

Özellik algılama

showTrigger özelliğinin varlığını kontrol ederek tarayıcının Bildirim Tetikleyicilerini destekleyip desteklemediğini öğrenebilirsiniz:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Bildirim planlama

Bildirim zamanlama, normal push bildirimi göstermeye benzer. Tek fark, bildirimin options nesnesine değer olarak TimestampTrigger nesnesine sahip bir showTrigger koşul özelliğini iletmenizin gerekmesidir.

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

Planlanmış bir bildirimi iptal etme

Planlanmış bildirimleri iptal etmek için önce ServiceWorkerRegistration.getNotifications() üzerinden belirli bir etiketle eşleşen tüm bildirimlerin listesini isteyin. Planlanmış bildirimlerin listeye dahil edilmesi için includeTriggered işaretini iletmeniz gerektiğini unutmayın:

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

Hata ayıklama

Bildirim hatalarını ayıklamak için Chrome Geliştirici Araçları Bildirimler panelini kullanabilirsiniz. Hata ayıklamayı başlatmak için Etkinlik kaydetmeyi başlat Etkinlikleri kaydetmeye başla veya Control+E (Mac'te Command+E) tuşlarına basın. Chrome Geliştirici Araçları; planlanmış, görüntülenen ve kapatılan bildirimler dahil olmak üzere, Geliştirici Araçları kapalı olsa bile tüm bildirim etkinliklerini üç gün boyunca kaydeder.

Uygulama panelinde bulunan Chrome DevTools'un Bildirimler bölmesine planlanmış bir bildirim etkinliği kaydedildi.
Planlanmış bir bildirim.
Chrome Geliştirici Araçları'nın Bildirimler bölmesine, görüntülenen bir bildirim etkinliği kaydedildi.
Görüntülenen bildirim.

Demo

Bildirim Tetikleyicileri'nin işleyiş şeklini demoda görebilirsiniz. Bu bölüm bildirimleri planlamanıza, planlanmış bildirimleri listelemenize ve iptal etmenize olanak tanır. Kaynak kodu Glitch'te mevcuttur.

Bildirim Tetikleyicileri demo web uygulamasının ekran görüntüsü.
Bildirim Tetikleyicileri demo.

Güvenlik ve izinler

Chrome ekibi; kullanıcı denetimi, şeffaflık ve ergonomik dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme bölümünde tanımlanan temel ilkeleri kullanarak Bildirim Tetikleyicileri API'sini tasarladı ve uygulamaya koymuştur. Bu API, Service Worker'lar gerektirdiği için güvenli bir bağlam da gerektirir. API'yi kullanmak için normal push bildirimleriyle aynı iznin kullanılması gerekir.

Kullanıcı denetimi

Bu API yalnızca ServiceWorkerRegistration bağlamında kullanılabilir. Bu, gerekli tüm verilerin aynı bağlamda depolandığı ve hizmet çalışanı silindiğinde veya kullanıcı kaynak için tüm site verilerini sildiğinde otomatik olarak da silineceği anlamına gelir. Çerezlerin engellenmesi, hizmet çalışanlarının Chrome'a yüklenmesini ve dolayısıyla bu API'nin kullanılmasını da engeller. Kullanıcı, siteyle ilgili bildirimler her zaman site ayarlarından devre dışı bırakabilir.

Şeffaflık

Push API'nin aksine bu API ağa bağlı değildir. Yani, planlanmış bildirimler için badge, icon ve image özellikleri tarafından başvurulan resim kaynakları da dahil olmak üzere tüm gerekli veriler önceden gerekir. Yani, planlanmış bir bildirimin gösterilmesi geliştirici tarafından gözlemlenemez ve kullanıcı bildirimle etkileşime geçene kadar hizmet çalışanını uyandırmayı içermez. Dolayısıyla şu anda geliştiricinin, IP adresi coğrafi konum araması gibi gizliliği ihlal edebilecek yaklaşımlarla kullanıcı hakkında bilgi edinebileceği bilinen bir yol yoktur. Bu tasarım, özelliğin isteğe bağlı olarak işletim sistemi tarafından sağlanan zamanlama mekanizmalarından (ör. Android'in AlarmManager) yararlanmasına da olanak tanır. Böylece pil tasarrufu sağlanır.

Geri bildirim

Chrome ekibi, Bildirim Tetikleyicileri ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımından bahsedin

API'nin beklediğiniz gibi çalışmayan bir yönü var mı? Ya da fikrinizi uygulamak için gereken eksik yöntemler veya özellikler var mı? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var? Bildirim Tetikleyicileri GitHub deposuna özellik sorunu bildirin veya mevcut bir sorun hakkında düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok ayrıntı eklediğinizden, yeniden oluşturma ile ilgili basit talimatları eklediğinizden ve Bileşenler'i UI>Notifications olarak ayarladığınızdan emin olun. Glitch, hızlı ve kolay hata yeniden oluşturmaları paylaşmak için çok işe yarar.

API'yi kullanmayı mı planlıyorsunuz?

Sitenizde Bildirim Tetikleyicileri kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, özellikleri önceliklendirmemize yardımcı olur ve diğer tarayıcı satıcılarına destek vermenin ne kadar kritik olduğunu gösterir. #NotificationTriggers hashtag'ini kullanarak @ChromiumDev adresine bir tweet gönderin ve bunu nerede ve nasıl kullandığınızı bize bildirin.

Yararlı Bağlantılar

Teşekkür

Bildirim Tetikleyicileri, Richard Knoll tarafından ve açıklayıcı Peter Beverloo tarafından, Richard'ın katkılarıyla tarafından uygulandı. Şu kullanıcılar makaleyi incelediler: Joe Medley, Pete LePage ve Richard ve Peter. Lukas Blazek'in Unsplash'teki hero resmi.