Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Bu codelab'de, adım adım push bildirimi sunucusu oluşturma işlemi gösterilmektedir. Bu codelab'i tamamladığınızda aşağıdaki özelliklere sahip bir sunucunuz olacak:

  • Anlık bildirim aboneliklerini takip eder (ör.bir istemci anlık bildirimleri etkinleştirdiğinde sunucu yeni bir veritabanı kaydı oluşturur ve bir istemci anlık bildirimleri devre dışı bıraktığında mevcut bir veritabanı kaydını siler).
  • Tek bir istemciye push bildirimi gönderir.
  • Abone olan tüm istemcilere push bildirimi gönderir.

Bu codelab, yaparak öğrenmenize yardımcı olmaya odaklanır ve kavramlardan pek bahsetmez. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimleri nasıl çalışır? başlıklı makaleyi inceleyin.

Bu codelab'in istemci kodu zaten tamamlanmış durumda. Bu codelab'de yalnızca sunucuyu uygulayacaksınız. Push bildirimi istemcisini nasıl uygulayacağınızı öğrenmek için Codelab: Push bildirimi istemcisi oluşturma başlıklı makaleye göz atın.

Tarayıcı uyumluluğu

Bu codelab'in aşağıdaki işletim sistemi ve tarayıcı kombinasyonlarıyla çalıştığı bilinmektedir:

  • Windows: Chrome, Edge
  • macOS: Chrome, Firefox
  • Android: Chrome, Firefox

Bu codelab, aşağıdaki işletim sistemleriyle (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışmaz:

  • macOS: Brave, Edge, Safari
  • iOS

Uygulama yığını

  • Sunucu, Express.js üzerine kurulmuştur.
  • web-push Node.js kitaplığı, tüm push bildirimi mantığını işler.
  • Abonelik verileri, lowdb kullanılarak bir JSON dosyasına yazılır.

Anlık bildirimleri uygulamak için bu teknolojilerden herhangi birini kullanmanız gerekmez. Bu teknolojileri, güvenilir bir codelab deneyimi sundukları için seçtik.

Kurulum

Anlık bildirimlerin çalışması için sunucunuzu ve istemcinizi kimlik doğrulama anahtarlarıyla ayarlamanız gerekir. Nedenini öğrenmek için Web push protokolü isteklerinizi imzalama başlıklı makaleyi inceleyin.

  1. Terminalde npx web-push generate-vapid-keys komutunu çalıştırın. Özel anahtar ve ortak anahtar değerlerini kopyalayın.

  2. .env dosyasını açın ve VAPID_PUBLIC_KEY ile VAPID_PRIVATE_KEY dosyalarını güncelleyin. VAPID_SUBJECT değerini mailto:test@test.test olarak ayarlayın. Bu değerlerin tümü çift tırnak içine alınmalıdır. Güncellemelerinizi yaptıktan sonra .env dosyanız şu şekilde görünmelidir:

    VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

  3. public/index.js adlı kişiyi aç.

  4. VAPID_PUBLIC_KEY_VALUE_HERE kısmını ortak anahtarınızın değeriyle değiştirin.

Abonelikleri yönet

Abonelik sürecinin büyük bir kısmını müşteriniz yönetir. Sunucunuzun yapması gereken temel işlemler, yeni anlık bildirim aboneliklerini kaydetmek ve eski abonelikleri silmektir. Bu abonelikler, gelecekte istemcilere mesaj göndermenizi sağlar.

Abonelik süreci hakkında daha fazla bilgi için Müşteriyi push bildirimlerine abone etme başlıklı makaleyi inceleyin.

Yeni abonelik bilgilerini kaydetme

  1. Uygulama sekmesinde Register service worker'ı (Hizmet çalışanı kaydet) tıklayın. Durum kutusunda şuna benzer bir mesaj görürsünüz:

    Service worker registered. Scope: https://example.com

  2. Uygulama sekmesinde Anlık bildirimlere abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz, web sitesinin size push bildirimi göndermesine izin vermek isteyip istemediğinizi sorabilir.

  3. İzin ver'i (veya tarayıcınız ya da işletim sisteminiz tarafından kullanılan eşdeğer ifadeyi) tıklayın. Durum kutusunda şuna benzer bir mesaj görmeniz gerekir:

    Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

  4. Günlükleri görmek için terminali açın. /add-subscription ve ardından bazı veriler görmelisiniz. /add-subscription, istemcinin push bildirimlerine abone olmak istediğinde POST isteği gönderdiği URL'dir. Aşağıdaki veriler, istemcinin kaydetmeniz gereken abonelik bilgileridir.

  5. server.js adlı kişiyi aç.

  6. /add-subscription rota işleyici mantığını aşağıdaki kodla güncelleyin:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Eski abonelik bilgilerini silme

  1. Uygulama sekmesine geri dönün.
  2. Anlık bildirim aboneliğinden çık'ı tıklayın.
  3. Günlüklere tekrar bakın. /remove-subscription simgesini ve ardından müşterinin abonelik bilgilerini görmelisiniz.

  4. /remove-subscription rota işleyici mantığını aşağıdaki şekilde güncelleyin:

    app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Bildirim gönderme

Anlık mesaj gönderme başlıklı makalede açıklandığı gibi, sunucunuz anlık mesajları doğrudan istemcilere göndermez. Bunun için bir push hizmetinden yararlanır. Sunucunuz, kullanıcınızın kullandığı tarayıcı satıcısına ait bir web hizmetine (push hizmeti) web hizmeti istekleri (web push protokolü istekleri) göndererek istemcilere mesaj gönderme sürecini başlatır.

  1. /notify-me rota işleyici mantığını aşağıdaki kodla güncelleyin:

    app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription =
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

  2. sendNotifications() işlevini aşağıdaki kodla güncelleyin:

    function sendNotifications(subscriptions) {
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

  3. /notify-all rota işleyici mantığını aşağıdaki kodla güncelleyin:

    app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

  4. Uygulama sekmesine geri dönün.

  5. Beni bilgilendir'i tıklayın. Push bildirimi alırsınız. Başlık Hello, Notifications!, gövde ise ID: <ID> olmalıdır. Burada <ID> rastgele bir sayıdır.

  6. Uygulamanızı desteklenen diğer tarayıcılarda veya cihazlarda açın. Anlık bildirimlere abone olmayı deneyin ve ardından Tümünü bildir düğmesini tıklayın. Abonelik oluşturduğunuz tüm cihazlarda aynı bildirimi alırsınız.

Sonraki adımlar

  • Push bildirimlerinin işleyiş şeklini daha iyi anlamak için Push bildirimlerine genel bakış başlıklı makaleyi okuyun.
  • Bildirim izni isteyen, cihazı push bildirimleri alacak şekilde kaydeden ve push mesajlarını alıp bildirim olarak görüntülemek için bir hizmet çalışanı kullanan bir istemci oluşturmayı öğrenmek için Codelab: Build a push notification client (Codelab: Push bildirimi istemcisi oluşturma) başlıklı makaleyi inceleyin.