Push etkinlikleri

Matt Gaunt
X Ana sayfa

Bu aşamada, kullanıcının abone olmasını ve push mesajı göndermeyi ele aldık. Sonraki adımda, bu push mesajını kullanıcının cihazında almak ve bir bildirim göstermek (ayrıca yapmak isteyebileceğimiz diğer işlemleri yapmak) gerekir.

Push Etkinliği

Bir mesaj alındığında hizmet çalışanınıza bir push etkinliği gönderilir.

Push etkinliği işleyicisi ayarlama kodu, JavaScript'te yazacağınız diğer tüm etkinlik işleyicilere oldukça benzer olmalıdır:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

Hizmet işçilerine yeni başlayan çoğu geliştirici için bu kodun en tuhaf kısmı self değişkenidir. self, bir hizmet çalışanı olan Web Çalışanlarında yaygın olarak kullanılır. self, bir web sayfasındaki window gibi global kapsamı ifade eder. Web çalışanları ve hizmet çalışanları için self, çalışanın kendisini ifade eder.

Yukarıdaki örnekte, self.addEventListener()'ün hizmet işçisine bir etkinlik dinleyici eklediği düşünülebilir.

Push etkinliği örneğinde, veri olup olmadığını kontrol edip konsola bir şeyler yazdırıyoruz.

Bir push etkinliğindeki verileri ayrıştırmanın başka yolları da vardır:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

Çoğu kişi, uygulamadan ne beklediğine bağlı olarak json() veya text() kullanır.

Bu örnekte, push etkinliği işleyicinin nasıl ekleneceği ve verilere nasıl erişileceği gösterilmektedir, ancak çok önemli iki işlev eksiktir. Bildirim gösterilmiyor ve event.waitUntil() kullanılmıyor.

Bekle Until

Service Worker'lar hakkında bilinmesi gereken noktalardan biri, Service Worker kodunun ne zaman çalışacağı üzerinde çok az kontrol sahibi olmanızdır. Alarmın ne zaman uyandırılacağına ve ne zaman sonlandırılacağına tarayıcı karar verir. Tarayıcıya "Hey, önemli işlerle çok meşgulüm" demenin tek yolu, event.waitUntil() yöntemine söz vermektir. Böylece tarayıcı, ilettiğiniz söz yerine gelene kadar hizmet çalışanını çalıştırmaya devam eder.

Push etkinliklerinde, ilettiğiniz promise yerleşmeden önce bir bildirim göstermeniz gereken ek bir şart vardır.

Bildirim göstermeyle ilgili temel bir örneği aşağıda bulabilirsiniz:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

self.registration.showNotification() çağrısı, kullanıcıya bildirim gösteren bir yöntemdir ve bildirim gösterildikten sonra çözülecek bir promise döndürür.

Bu örneği mümkün olduğunca net tutmak için bu vaadi promiseChain adlı bir değişkene atadım. Bu değer daha sonra event.waitUntil() alanına aktarılır. Bunun çok ayrıntılı olduğunun farkındayım ancak waitUntil() içine nelerin aktarılması gerektiğinin yanlış anlaşılması veya bozuk söz zincirleri nedeniyle ortaya çıkan bir dizi sorun gördüm.

Veriler için ağ isteği içeren ve push etkinliğini Analytics ile izleyen daha karmaşık bir örnek şöyle görünebilir:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Burada, bir promise pushReceivedTracking() döndüren bir işlev çağırıyoruz. Bu işlevin, örnek olması amacıyla analiz sağlayıcımıza bir ağ isteği gönderdiğini varsayabiliriz. Ayrıca, bir ağ isteğinde bulunarak yanıtı alıyor ve bildirimin başlığı ile mesajı için yanıt verilerini kullanarak bir bildirim gösteriyoruz.

Bu taahhütleri Promise.all() ile birleştirerek Service Worker'ın aktif kalmasını sağlayabiliriz. Elde edilen söz, event.waitUntil() içine aktarılır. Bu, tarayıcının bir bildirimin gösterilip gösterilmediğini kontrol edip hizmet çalışanını sonlandırmadan önce her iki sözün de tamamlanmasını bekleyeceği anlamına gelir.

waitUntil() ile ilgili endişe duymamızın nedeni, geliştiricilerin karşılaştığı en yaygın sorunlardan biri, taahhüt zinciri yanlış / bozuk olduğunda Chrome'un bu "varsayılan" bildirimi göstermesidir:

Chrome'daki varsayılan bildirimin resmi

Chrome, yalnızca bir push mesajı alındığında ve event.waitUntil()'ye iletilen promise tamamlandıktan sonra hizmet çalışanındaki push etkinliği bildirim göstermediğinde "Bu site arka planda güncellendi." bildirimini gösterir.

Geliştiricilerin bu duruma yakalanmalarının başlıca nedeni, kodların genellikle self.registration.showNotification()'yi çağırması ancak verdiği söz ile hiçbir şey yapmamasıdır. Bu durum, varsayılan bildirimin ara sıra gösterilmesine neden olur. Örneğin, yukarıdaki örnekte self.registration.showNotification() için döndürme işlevini kaldırabiliriz ve bu bildirimi görme riskini alırız.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Bu durumun gözden kaçmasının ne kadar kolay olduğunu anlayabilirsiniz.

Bu bildirimi görürseniz söz zincirlerinizi ve event.waitUntil() öğelerinizi kontrol etmeyi unutmayın.

Sonraki bölümde, bildirimleri biçimlendirmek için neler yapabileceğimize ve hangi içerikleri gösterebileceğimize göz atacağız.

Sonraki adımlar

Codelab uygulamaları