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ıya küçük bilgiler sunar. Web uygulamaları, önemli ve zamana duyarlı etkinlikleri ya da kullanıcının yapması gereken işlemleri kullanıcılara bildirmek için bildirimleri kullanabilir.

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

Android cihazda bildirim gösteriliyor.
ziyaret edin.
MacBook'ta bir bildirim.

Eskiden web tarayıcılarının, sunucu ile istemci arasındaki bilgi alışverişini bir istekte bulunarak başlatması gerekiyordu. Öte yandan web push teknolojisi, sunucunuzu uygulamanız için mantıklı 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 Service Worker'ın URL'sine mesaj gönderildiğinde ilgili hizmet çalışanı üzerinde etkinlikler yükseltilir ve bu hizmet çalışanının bir bildirim göstermesi istenir.

Push bildirimleri, kullanıcılardan uygulamayı yeniden açıp en son 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 bildirimler oluşturun. Notification nesnesi, title dizesi ve options nesnesi içeriyor. Örneğin:

let title = 'Hi!';
let options
= {
  body
: 'Very Important Message',
 
/* other options can go here */
};
let notification
= new Notification(title, options);

Bildirim etkinleştirildiğinde title kalın harflerle gösterilirken body ek metin içerir.

Bildirim gönderme izni alma

Uygulamanızın bir bildirim göstermesi için kullanıcıdan izin alması gerekir:

Notification.requestPermission();

Push bildirimleri nasıl çalışır?

Bildirimlerin gerçek gücü, Service Worker'lar ile push teknolojisinin birlikte kullanılmasından gelir:

  • Hizmet çalışanları, uygulamanız ekranda görünmese bile arka planda çalışabilir ve bildirim gösterebilir.

  • Push teknolojisi, sunucunuzu, uygulamanız için mantıklı 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 Service Worker'ın URL'sine mesaj gönderildiğinde ilgili hizmet çalışanı üzerinde etkinlikler yükseltilir ve bu hizmet çalışanının bir bildirim göstermesi istenir.

Aşağıdaki örnek akışta, bir istemci 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ıklar olmadan normal JavaScript kullanır. Sunucu, Node.js üzerinde 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'ı kaydettirme ve Push'a abone olma

  1. Bir istemci uygulaması, ServiceWorkerContainer.register() hizmetine hizmet çalışanı kaydeder. Kayıtlı hizmet çalışanı, istemci etkin olmadığında arka planda çalışmaya devam eder.

    İstemci kodu:

    navigator.serviceWorker.register('sw.js');
  2. İstemci, bildirim göndermek için kullanıcıdan izin ister.

    İstemci kodu:

    Notification.requestPermission();
  3. Hizmet çalışanı, push bildirimlerini etkinleştirmek için PushManager.subscribe() kullanarak push aboneliği oluşturur. Service Worker, PushManager.subscribe() çağrısında uygulamanın API anahtarını tanımlayıcı olarak sağlar.

    İstemci kodu:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Firebase Cloud Messaging gibi push hizmetleri, abonelik modeli üzerinde çalışır. Bir hizmet çalışanı PushManager.subscribe() çağırarak bir push hizmetine abone olduğunda push hizmeti bu 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.

    İstemci 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 ayarlanmış push etkinliklerini tetikler. Service Worker mesajı alır ve bildirim olarak kullanıcıya 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 önceden etkinleştirilmemişse web uygulaması etkin hale gelir.

Sonraki adımlar

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

Sürecin her adımında size yol gösterecek bir dizi codelab'ler oluşturduk.