Push bildirimleri neden kullanılır?
Bildirimler, kullanıcılara küçük bilgi parçaları sunar. Web uygulamaları, kullanıcılara önemli ve zamana duyarlı etkinlikler veya kullanıcının yapması gereken işlemler hakkında bilgi vermek için bildirimler kullanabilir.
Bildirimlerin görünümü ve hissi platformlar arasında farklılık gösterir. Örneğin:
Geleneksel olarak, web tarayıcıların sunucu ile istemci arasında bilgi alışverişini başlatmak için istek göndermesi gerekirdi. Öte yandan web push teknolojisi, sunucunuzu uygulamanız için uygun olduğunda bildirim gönderecek şekilde yapılandırmanıza olanak tanır. Push hizmeti, abone olan her servis çalışanı için benzersiz URL'ler oluşturur. Bir hizmet çalışanının URL'sine mesaj göndermek, ilgili hizmet çalışanında etkinlik oluşturur ve bildirim göstermesini ister.
Push bildirimleri, kullanıcıları uygulamanızı yeniden açmaya ve en son bilgilere göre kullanmaya teşvik ederek uygulamanızdan en iyi şekilde yararlanmalarına yardımcı olabilir.
Bildirim oluşturma ve gönderme
Notifications API'yi kullanarak bildirim oluşturun. Notification
nesnesinde bir title
dizesi ve bir options
nesnesi bulunur. Örneğin:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
Bildirim etkinken title
kalın harflerle gösterilir. body
ise ek metin içerir.
Bildirim gönderme izni alma
Uygulamanızın bildirim göstermesi için kullanıcıdan izin alması gerekir:
Notification.requestPermission();
Push bildirimleri nasıl çalışır?
Bildirimlerin asıl gücü, hizmet çalışanları ile push teknolojisinin birleşmesinden gelir:
Hizmet çalışanları arka planda çalışabilir ve uygulamanız ekranda görünmediğinde bile bildirimler gösterebilir.
Anında bildirim teknolojisi, sunucunuzu uygulamanız için uygun olduğunda bildirim gönderecek şekilde yapılandırmanıza olanak tanır. Anında bildirim hizmeti, abone olan her servis çalışanı için benzersiz URL'ler oluşturur. Bir hizmet çalışanının URL'sine mesaj göndermek, ilgili hizmet çalışanında etkinlik oluşturur ve bildirim göstermesini ister.
Aşağıdaki örnek akışta, bir istemci bir hizmet çalışanı kaydeder ve push bildirimlerine abone olur. Ardından sunucu, abonelik uç noktasına bir bildirim gönderir.
İstemci ve hizmet çalışanı, ek kitaplık olmadan standart JavaScript kullanır. Sunucu, Node.js üzerinde express
npm paketiyle oluşturulur ve bildirimleri göndermek için web-push
npm paketini kullanır. İstemci, sunucuya bilgi göndermek için sunucunun kullanıma sunduğu bir POST URL'sine çağrı yapar.
1. Bölüm: Hizmet çalışanı kaydedin ve Push'a abone olun
İstemci uygulaması, bir hizmet çalışanını
ServiceWorkerContainer.register()
ile kaydeder. Kayıtlı hizmet çalışanı, istemci etkin olmadığında arka planda çalışmaya devam eder.Müşteri kodu:
navigator.serviceWorker.register('sw.js');
İstemci, bildirim göndermek için kullanıcıdan izin ister.
Müşteri kodu:
Notification.requestPermission();
Hizmet çalışanı, push bildirimlerini etkinleştirmek için push aboneliği oluşturmak üzere
PushManager.subscribe()
'ü kullanır. Hizmet çalışanı,PushManager.subscribe()
çağrısında tanımlayıcı olarak uygulamanın API anahtarını sağlar.Müşteri kodu:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});Firebase Cloud Messaging gibi push hizmetleri abonelik modeliyle çalışır. Bir hizmet çalışanı,
PushManager.subscribe()
çağrısı yaparak bir push hizmetine abone olduğunda push hizmeti, söz konusu hizmet çalışanına özgü bir URL oluşturur. URL, abonelik uç noktası olarak bilinir.İstemci, abonelik uç noktasını uygulama sunucusuna gönderir.
Müşteri kodu:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
sendToServer(subscription, '/new-subscription', 'POST');
});
});Sunucu kodu:
app.post('/new-subscription', (request, response) => {
// extract subscription from request
// send 'OK' response
});
2. Bölüm: Bildirim gönderme
Web sunucusu, abonelik uç noktasına bir bildirim gönderir.
Sunucu kodu:
const webpush = require('web-push');
let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };
webpush.sendNotification(subscription, payload, options);Abonelik uç noktasına gönderilen bildirimler, hedef olarak servis çalışanını kullanan push etkinlikleri tetikler. Hizmet çalışanı iletiyi alır ve kullanıcıya bildirim olarak gösterir.
Hizmet çalışanı kodu:
self.addEventListener('push', (event) => {
let title = { /* get notification title from event data */ }
let options = { /* get notification options from event data */ }
showNotification(title, options);
})Kullanıcı bildirimle etkileşime geçerek web uygulamasını etkinleştirir (henüz etkin değilse).
Sonraki adımlar
Bir sonraki adım olarak push bildirimleri uygulayın.
Sürecin her adımında size rehberlik edecek bir dizi kod laboratuvarı hazırladık.