Kullanıcılarla etkileşime geçmek ve kullanıcılarla yeniden etkileşime geçmek için push bildirimlerini kullanma

Kate Jeffreys

Push bildirimlerini neden kullanmalısınız?

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 bildirimleri kullanabilir.

Bildirimlerin görünümü ve tarzı platformlar arasında farklılık gösterir. Örneğin:

Geleneksel olarak, web tarayıcılarının sunucu ile istemci arasındaki bilgi alışverişini bir istekte bulunarak 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. Bir hizmet çalışanının URL'sine mesaj göndermek, bu hizmet çalışanında etkinlikler oluşturarak bildirim göstermesini sağlar.

Push bildirimleri, kullanıcıları en son bilgilere göre uygulamanızı yeniden açmaya ve kullanmaya yönlendirerek uygulamanızdan en iyi şekilde yararlanmalarına yardımcı olabilir.

Bildirim oluşturma ve gönderme

Bildirim API'sini kullanarak bildirimler 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 etkin olduğunda title simgesi kalın, body simgesi 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 gerçek gücü, hizmet çalışanları ile push teknolojisinin birleşiminden gelir:

Service worker'lar, uygulamanız ekranda görünmüyorken 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 hizmeti, abone olunan her hizmet çalışanı için benzersiz URL'ler oluşturur. Bir hizmet çalışanının URL'sine mesaj göndermek, bu hizmet çalışanında etkinlikler oluşturarak bildirim göstermesini sağlar.

Aşağıdaki örnek akışta, bir istemci hizmet çalışanı kaydeder ve anlık bildirimlere abone olur. Ardından sunucu, abonelik uç noktasına bir bildirim gönderir.

İstemci ve hizmet çalışanı, ek kitaplıklar olmadan düz JavaScript kullanır. Sunucu, Node.js üzerinde express npm paketi ile oluşturulur ve bildirim 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ı kaydetme ve Push'a abone olma

İstemci uygulaması, ServiceWorkerContainer.register() ile bir hizmet çalışanı 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();
```
Service worker, push bildirimlerini etkinleştirmek için push aboneliği oluşturmak üzere PushManager.subscribe() kullanır. PushManager.subscribe() çağrısında, hizmet çalışanı uygulamanın API anahtarını tanımlayıcı olarak 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() işlevini çağırarak anlık bildirim hizmetine abone olduğunda anlık bildirim hizmeti, bu 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, hedef olarak hizmet çalışanıyla push etkinliklerini tetikler. Service worker, 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 girer. Bu sayede, henüz etkin değilse web uygulaması etkin hale gelir.

Sonraki adımlar

Bir sonraki adım olarak push bildirimlerini uygulayın.

Sürecin her adımında size rehberlik edecek bir dizi codelab hazırladık.