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

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:

Android cihazda bildirim.
MacBook'ta bildirim.

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

  1. İ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');
  2. İstemci, bildirim göndermek için kullanıcıdan izin ister.

    Müşteri kodu:

    Notification.requestPermission();
  3. 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.

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