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

Bildirimler ve Push Mesajları Chrome'a eklendikten sonra çok şey öğrendik. Masaüstü sınıfı cihazlarla ilgili olarak aldığımız bir geri bildirim, bildirimlerin kullanıcı tarafından etkin bir şekilde kapatılana kadar kullanıcının ekranında görünmeye devam etmesiydi.

Sayfa açıkken bildirimi otomatik olarak kapatacak basit bir JavaScript zamanlayıcı oluşturabilirsiniz. Ancak artık hizmet işçilerinin bulunduğu bir dünyada yaşıyoruz: Web uygulamaları, bir pencerenin ömrünü aşabilir ve hizmet işçileri, kaynaklardan tasarruf etmek için mümkün olduğunca hızlı bir şekilde uykuya yatırılır. Bu nedenle, kullanıcılara iyi bir deneyim sunmanın başka bir yoluna ihtiyacımız var.

Bildirim spesifikasyonu, geliştiricinin bildirimin sistem tarafından otomatik olarak kapatılmaması gerektiğini belirtmesine olanak tanımak için kısa süre önce güncellendi.

Bildirimlerde, başlangıçta ayarlanmamış olan ilişkili bir etkileşim gerektirme tercihi işareti bulunur. Bu ayar etkinleştirildiğinde, ekranı yeterince büyük olan cihazlarda bildirim, kullanıcı bildirimi etkinleştirene veya kapatana kadar hazır durumda kalır.

Bu durum tuhaf görünebilir ancak aksi belirtilmediği sürece bildirimin kısa bir süre sonra görünümden kaldırılacağı anlamına gelir.

Chrome 47 (Ekim 2015'te beta sürümünde) artık requireInteraction seçeneğini destekliyor. Açıkça sağlanmadığı ve true olarak ayarlanmadığı sürece masaüstündeki tüm bildirimler yaklaşık 20 saniye sonra kapatılır. Ancak ilginç olan, Chrome'un kısa süre önce Bildirim Merkezi'ni tüm masaüstü platformlarından (ChromeOS hariç) kaldırmış olmasıdır. Bu, simge durumuna küçültülmüş bildirimlerin kapatılmış olarak kabul edildiği ve bir hizmet çalışanında getNotifications çağrısında bulunulduğunda erişilemediği anlamına gelir.

Android için Chrome'da bildirimler bildirim tepsisi alanında küçültüldüğü için 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.