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

Kate Jeffreys
Kate Jeffreys

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:

Android cihazda bir bildirim.
MacBook'ta bir bildirim.

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

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

  2. İstemci, bildirim göndermek için kullanıcıdan izin ister.

    Müşteri kodu:

    Notification.requestPermission();

  3. 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.

  4. İ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

  1. 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);

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

  3. 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.