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 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
- Web Push Bildirimine Genel Bakış
- Push'un İşleyiş Şekli
- Kullanıcıya abone olma
- Kullanıcı deneyimine izin verme
- Web Push Kitaplıklarıyla İleti Gönderme
- Web Push Protokolü
- Push Etkinliklerini Yönetme
- Bildirim Görüntüleme
- Bildirim Davranışı
- Yaygın Bildirim Kalıpları
- Push Bildirimleri ile ilgili SSS
- Yaygın Sorunlar ve Hata Bildirme