Bildirim gerekli etkileşim - Masaüstünde daha sorunsuz bir bildirim kullanıcı deneyimi

Bildirimler ve Push Messaging özelliği Chrome'da kullanıma sunulduğundan beri çok şey öğrendik. Masaüstü sınıfı cihazlarla ilgili geri bildirimlerden biri de bildirimlerin kullanıcı tarafından etkin bir şekilde kapatılana kadar ekranda görünmeye devam edeceği yönündeydi.

Sayfa açıkken, bildirimi otomatik olarak kapatacak basit bir JavaScript zamanlayıcısı oluşturulabilir. Ancak artık Service Worker'ların olduğu bir dünyada yaşıyoruz. Web uygulamaları bir pencerenin ömrü boyunca kullanılabiliyor ve hizmet çalışanlarının mümkün olduğunca hızlı bir şekilde uyku moduna geçirilerek kaynak tasarrufu sağlanıyor. Bu nedenle, kullanıcılara iyi bir deneyim sunmak için başka bir yönteme ihtiyacımız var.

Bildirim özelliği, geliştiriciye bildirimin sistem tarafından otomatik olarak kapatılmaması gerektiğini belirtme olanağı sunacak şekilde kısa süre önce güncellendi.

Bir bildirimin, başlangıçta ayarlanmamış olan ilişkili bir etkileşim gerekliliği tercihi işareti vardır. Ayarlandığında, yeterince büyük ekrana sahip cihazlarda bildirimin, kullanıcı etkinleştirene veya kapatana kadar erişilebilir durumda kalması gerektiğini belirtir.

Bu tuhaf görünebilir, ancak aksi belirtilmediği sürece bildirimin kısa bir süre sonra görüntüden kaldırılması gerektiği anlamına gelir.

Chrome 47 (Ekim 2015'teki beta sürüm) artık requireInteraction seçeneğini destekliyor. Açıkça sağlanmadığı ve true değerine ayarlanmadığı sürece masaüstündeki tüm bildirimler yaklaşık 20 saniye sonra kapatılır. İşin ilginç olan tarafı, Chrome'un Kısa süre önce Bildirim Merkezi'ni tüm masaüstü platformlarından (ancak ChromeOS) kaldırmış olmasıdır. Bu, küçültülmüş bildirimlerin kapatılmış olarak kabul edildiği ve bir Service Worker'daki getNotifications çağrısında buna erişilemeyeceği anlamına gelir.

Android için Chrome'da, bildirimler tepsisi alanındaki bildirimler küçültüldüğünden requireInteraction seçeneği yoksayılır.

navigator.serviceWorker.register('sw.js');

function showNotifications() {
    Notification.requestPermission(function(result) {
    if (result === 'granted') {
        navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('requireInteraction: true', {
            body: 'Requires interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: true,
            tag: 'require-interaction'
        });

        registration.showNotification('requireInteraction: false', {
            body: 'Does not require interaction',
            icon: '../images/touch/chrome-touch-icon-192x192.png',
            requireInteraction: false,
            tag: 'no-require-interaction'
        });
        });
    }
    });
}

Demoyu deneyin.