Push bildirimlerini neden kullanmalısınız?
Bildirimler kullanıcıya küçük bilgi parçacıkları sunar. Web uygulamaları, kullanıcılara önemli, zamana duyarlı etkinlikler veya kullanıcının yapması gereken işlemler hakkında bilgi vermek için bildirimleri kullanabilir.
Bildirimlerin görünümü ve tarzı platformlar arasında farklılık gösterir. Örneğin:
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/3wEi4F7iuNrg2kL85aMI.png?hl=tr)
![](https://web.dev/static/articles/use-push-notifications-to-engage-users/image/Ho6Nf5CcftL4AmLzoHZ8.png?hl=tr)
Geleneksel olarak, web tarayıcılarının bir istekte bulunarak sunucu ve istemci arasında bilgi alışverişini başlatması gerekiyordu. Diğer 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 olunan her hizmet çalışanı için benzersiz URL'ler oluşturur. Service Worker'ın URL'sine mesaj gönderildiğinde, Service Worker'da etkinlikler başlatılarak bir bildirim gösterilir.
Push bildirimleri, kullanıcılardan uygulamanızı yeniden açıp en güncel bilgilere göre kullanmalarını isteyerek uygulamanızdan en iyi şekilde yararlanmalarına yardımcı olabilir.
Bildirim oluşturma ve gönderme
Bildirimler API'sini kullanarak bildirim oluşturun. Bir Notification
nesnesinin title
dizesi ve options
nesnesi var. Örneğin:
let title = 'Hi!';
let options = {
body: 'Very Important Message',
/* other options can go here */
};
let notification = new Notification(title, options);
Bildirim etkin olduğunda title
kalın harflerle görüntülenirken body
, ek metin içerir.
Bildirim gönderme izni alma
Bildirim gösterebilmek için uygulamanızın kullanıcıdan izin alması gerekir:
Notification.requestPermission();
Push bildirimlerinin işleyiş şekli
Bildirimlerin gerçek gücü, Service Worker'lar ile push teknolojisinin birleşmesinden gelir:
Service Worker'lar, uygulamanız ekranda görünmese bile arka planda çalışabilir ve bildirim gösterebilir.
Push teknolojisi, sunucunuzu uygulamanız için uygun olduğunda bildirim gönderecek şekilde yapılandırmanıza olanak tanır. Push hizmetleri, abone olduğunuz her hizmet çalışanı için benzersiz URL'ler oluşturur. Service Worker'ın URL'sine mesaj gönderildiğinde, Service Worker'da etkinlikler başlatılarak bir bildirim gösterilir.
Aşağıdaki örnek akışta, bir istemci Service Worker'ı kaydeder ve push bildirimlerine abone olur. Ardından sunucu, abonelik uç noktasına bir bildirim gönderir.
İstemci ve hizmet çalışanı, fazladan kitaplık olmadan vanilla JavaScript kullanıyor. Sunucu Node.js'de express
npm paketi ile oluşturulmuştur ve bildirim göndermek için web-push
npm paketini kullanır. Sunucuya bilgi göndermek için istemci, sunucunun açığa çıkardığı bir POST URL'sine çağrı yapar.
1. Bölüm: Service Worker kaydı ve Push'a abone olun
Bir istemci uygulaması,
ServiceWorkerContainer.register()
ile hizmet çalışanı kaydediyor. İstemci etkin olmadığında kayıtlı hizmet çalışanı 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();
Push bildirimlerini etkinleştirmek için Service Worker
PushManager.subscribe()
kullanarak push aboneliği oluşturur.PushManager.subscribe()
çağrısında, hizmet çalışanı 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()
yöntemini çağırarak bir push hizmetine abone olduğunda push hizmeti, söz konusu hizmet çalışanına özel 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, hizmet çalışanı hedef olarak push etkinliklerini tetikler. Service Worker mesajı 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şimde bulunur ve web uygulaması henüz etkinleştirilmemişse etkin hale gelir.
Sonraki adımlar
Bir sonraki adım olarak push bildirimlerini uygulayın.
Bu sürecin her adımında size rehberlik etmek için bir dizi codelab'i oluşturduk.