Push etkinlikleri

Matt Gaunt
X Ana sayfa

Bu noktaya kadar, bir kullanıcının abone olma ve push mesajı gönderme konularını ele aldık. Bir sonraki adım kullanıcının cihazına bu push mesajını alır ve bir bildirim görüntüler (ayrıca belirli işlemler yapabiliriz.

Push Etkinliği

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

Push etkinliği işleyicisi oluşturma kodu, diğer herhangi bir etkinliğe oldukça benzer olmalıdır. işleyiciyi örnek olarak verebiliriz:

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.');
    }
});

Service Worker'larda yeni olan çoğu geliştirici için bu kodun en tuhaf kısmı self değişkenine eklenmelidir. self, hizmet çalışanı olan web çalışanlarında yaygın olarak kullanılır. self şu anlama gelir: örneğin bir web sayfasındaki window gibi global kapsam. Ancak web çalışanları ve hizmet çalışanları self, çalışanın kendisini ifade eder.

Yukarıdaki örnekte, self.addEventListener(), hizmet çalışanının kendisidir.

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

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. eksik olan iki önemli işlevi vardır. Bildirim gösterilmiyor ve event.waitUntil() kullanılmıyor.

Şu saate kadar bekle:

Service Worker'lar hakkında bilmeniz gereken şeylerden biri de, ne zaman hizmet çalışanı kodu çalışır. Cihazı ne zaman uyandıracağına ve ne zaman uyandıracağına tarayıcı karar verir feshedebilir. Tarayıcıya "Merhaba, ben önemli işlerle çok meşgulüm ", event.waitUntil() yöntemine bir söz vermek anlamına gelir. Bu durumda, tarayıcı verdiğiniz söz gerçekleşene kadar hizmet çalışanının çalışmaya devam etmesini sağlayın.

Push etkinliklerinde, reklamdan önce bir bildirim göstermeniz gerekir. verdiği sözü yerine getirmiştir.

Aşağıda, bildirim göstermeyle ilgili temel bir örnek verilmiştir:

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

    event.waitUntil(promiseChain);
});

self.registration.showNotification() çağrısı, şuna bir bildirim gösterme yöntemidir: ve bildirim görüntülendikten sonra sonlandırılacak bir söz verir.

Bu örneği mümkün olduğunca açık tutabilmek amacıyla, promiseChain adlı değişkeni kullanabilirsiniz. Bu veriler daha sonra event.waitUntil() bölümüne iletilir. Biliyorum ancak bunların sonucunda sonuçlanmış bazı sorunlar gördüm. waitUntil() öğesine nelerin aktarılması gerektiğinin yanlış anlaşılması veya verilen sözlerin yerine getirilmemesi zincirler.

Veri için ağ isteği ve push etkinliğini Analytics şö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, pushReceivedTracking() değerini döndüren bir işlevi çağırıyoruz. örnek olarak, eğer bir ağ isteği yapacak aktarıyoruz. Ayrıca, ağ bilgilerinin girilmesini başlığın yanıt verilerini kullanan bir bildirim göstererek ve mesajı gösterilir.

Service Worker'ın aktif kalmasını sağlayabiliriz. Bununla birlikte, bu görevlerin her ikisi de verdiğiniz sözleri Promise.all() ile paylaşın. Sonuçta ortaya çıkan vaat event.waitUntil() ağına aktarılır Yani tarayıcı, bir bildirimin olup olmadığını kontrol etmeden önce her iki sözün de bitmesini bekleyecektir. gösteriliyor ve hizmet çalışanı feshediliyor.

waitUntil() konusunda endişe duymamızın nedeni ve nasıl kullanılacağının nedeni, geliştiricilerin karşılaştığı yaygın sorunlar, taahhüt zinciri yanlış / bozuk olduğunda Chrome'un bunu göster bildirim:

Chrome'daki varsayılan bildirimin resmi

Chrome yalnızca "Bu site arka planda güncellendi" mesajını gösterir. bir push mesajı alınıyor ve hizmet çalışanındaki push etkinliği göstermiyor. bildirim (event.waitUntil() adlı kullanıcıya iletilen taahhüt tamamlandıktan sonra).

Geliştiricilerin buna yakalanmalarının başlıca nedeni, kodların sıklıkla self.registration.showNotification() adlı kişiyi arıyor ancak bunu yapmıyor her şeye sahip olması gerekir. Bu durumda aralıklı olarak varsayılan bildirim gösterilir. gösterilir. Örneğin, her bir anahtar kelime için self.registration.showNotification() olduğunu varsayalım. Böyle bir durumda, bildirimi görürsünü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);
});

Ne kadar kolay gözünüzden kaçabilecek bir şey olduğunu görebilirsiniz.

Unutmayın. Bu bildirimi görürseniz taahhüt zincirlerinizi ve event.waitUntil()'i kontrol edin.

Sonraki bölümde, bildirimlerin stilini belirlemek ve yeni kullanıcı bağlantıları oluşturmak için hangi içerikleri gösterebileceğimizle ilgili sorular sorun.

Yakında gidilecek yerler

Kod laboratuvarları