Push etkinlikleri

Matt Gaunt

Bu noktaya kadar bir kullanıcıya abone olmayı ve push mesajı göndermeyi ele aldık. Bir sonraki adım, bu push mesajını kullanıcının cihazına almak ve bir bildirim görüntülemek (ayrıca yapmak istediğimiz diğer işleri yapmak).

Push Etkinliği

Bir mesaj alındığında, Service Worker'ınızda push etkinliği gönderilir.

Push etkinliği işleyicisi ayarlama kodu, JavaScript'te yazdığınız diğer etkinlik işleyicilere çok 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.');
    }
});

Bu kodun, Service Worker'ları kullanmaya yeni başlayan çoğu geliştiriciye göre en tuhaf tarafı, self değişkenidir. self, Service Worker'lar (Service Worker) bölümünde yaygın olarak kullanılır. self, web sayfalarındaki window gibi genel kapsamı ifade eder. self, web çalışanları ve hizmet çalışanları için ise çalışanın kendisini ifade eder.

Yukarıdaki örnekte self.addEventListener(), Service Worker'ın kendisine bir etkinlik işleyici eklemek gibi düşünülebilir.

Push etkinliği örneğinde, herhangi bir veri olup olmadığını kontrol eder ve konsola bir şey yazdırırız.

Push etkinliğindeki verileri ayrıştırabileceğiniz başka yöntemler de 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 kullanıcı, uygulamasından ne beklediklerine bağlı olarak json() veya text() kullanıyor.

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östermiyor ve event.waitUntil() kullanılmıyor.

Şu saate kadar bekle:

Service Worker'larla ilgili bilinmesi gereken noktalardan biri, Service Worker kodunun ne zaman çalıştırılacağı üzerinde çok az kontrolünüzün olmasıdır. Ne zaman uyandırılacağına ve ne zaman sonlandırılacağına tarayıcı karar verir. Tarayıcıya "Hey, önemli işler yapmakla çok meşgulüm" demenin tek yolu, event.waitUntil() yöntemine bir söz vermektir. Böylece tarayıcı, verdiğiniz söz gerçekleştirilene kadar hizmet çalışanının çalışmaya devam etmesini sağlar.

Push etkinliklerinde, verdiğiniz söz verilmeden önce bir bildirim görüntülemeniz gerekir.

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() yöntemini çağırmak, kullanıcıya bildirim gösterme yöntemidir ve bildirim görüntülendiğinde çözümlenecek olan bir vaat döndürür.

Bu örneği mümkün olduğunca açık tutmak için bu sözü promiseChain adlı bir değişkene atadım. Bu, daha sonra event.waitUntil() öğesine iletilir. Bunun çok ayrıntılı bir konu olduğunu biliyorum ancak waitUntil() platformuna nelerin iletileceği yanlış anlaşıldığından veya vaat zincirlerinin kırılmasından kaynaklanan bir dizi sorunla karşılaştım.

Bir ağ veri isteğini ve push etkinliğini Analytics'le izlemeyi içeren daha karmaşık bir örnek şu şekilde 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 pushReceivedTracking() vaadi döndüren bir işlevi çağırıyoruz. Örnek olması açısından, bu işlevin analiz sağlayıcımıza bir ağ isteği gönderdiğini varsayabiliriz. Ayrıca bir ağ isteğinde de bulunuyoruz. Bildirimin başlığı ve mesajı için yanıt verileri kullanılarak yanıt alınıyor ve bildirim gösteriliyor.

Bu vaatleri Promise.all() ile birleştirerek her iki görev de tamamlanırken Service Worker'ın etkin kalmasını sağlayabiliriz. Sonuç vaadi event.waitUntil() öğesine iletilir. Yani tarayıcı, bir bildirimin görüntülendiğini kontrol etmeden ve hizmet çalışanını sonlandırmadan önce her iki taahhüt de tamamlanana kadar bekler.

waitUntil() ve bu özelliğin nasıl kullanılacağı konusunda endişe duymamızın nedeni, geliştiricilerin karşılaştığı en yaygın sorunlardan birinin, söz verme zinciri yanlış / bozuk olduğunda Chrome'un bu "varsayılan" bildirimi göstermesidir:

Chrome'daki varsayılan bildirimin resmi

Chrome yalnızca "Bu site arka planda güncellendi" bildirimini gösterir. Bir push mesajı alındığında ve hizmet çalışanındaki push etkinliğinde, event.waitUntil() hizmetine iletilen taahhüt tamamlandıktan sonra bildirim gösterilmediğinde.

Geliştiricilerin bu koda takılmalarının başlıca nedeni, kodlarının genellikle self.registration.showNotification() çağrısı yapması fakat verdiği sözle hiçbir şey yapmamasıdır. Bu durum, ara sıra varsayılan bildirimin gösterilmesine neden olur. Örneğin, yukarıdaki örnekte self.registration.showNotification() için dönüşü kaldırabiliriz ve bu bildirimi görme riskiyle karşı karşıya kalı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);
});

Kaçırılması kolay bir şey olduğunu görebilirsiniz.

Unutmayın: Bu bildirimi görürseniz söz verilen zincirleri ve event.waitUntil() bölümünü kontrol edin.

Sonraki bölümde, bildirimlerin stilini belirlemek için ne yapabileceğimize ve hangi içerikleri görüntüleyebileceğimize bakacağız.

Sonraki adımlar

Code Labs