Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys

Kayce Basques

Bu codelab'de, adım adım push bildirimi sunucusunun nasıl oluşturulacağı 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 odaklanmıştı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 istemcisinin nasıl uygulanacağını öğrenmek için Codelab: Push bildirimi istemcisi oluşturma başlıklı makaleyi inceleyin.

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'in aşağıdaki işletim sistemleriyle (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışmadığı bilinmektedir:

• 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

Kimlik doğrulama ayarlama

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. Terminali açın.
2. Terminalde npx web-push generate-vapid-keys komutunu çalıştırın. Özel anahtar ve ortak anahtar değerlerini kopyalayın.
3. .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"

1. public/index.js adlı kişiyi aç.
2. VAPID_PUBLIC_KEY_VALUE_HERE yerine ortak anahtarınızın değerini girin.

Abonelikleri yönet

Abonelik sürecinin büyük bir kısmını müşteriniz yönetir. Sunucunuzun yapması gereken temel işlemler, yeni push bildirimi 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 İstemciyi 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

1. 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 sorar. İzin ver'i (veya tarayıcınızın/işletim sisteminizin kullandığı eşdeğer ifadeyi) tıklayın. Durum kutusunda aşağıdakine benzer bir mesaj görmeniz gerekir:

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

1. 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.
2. server.js adlı kişiyi aç.
3. /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 kodla 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 bildirim gönderme başlıklı makalede açıklandığı gibi, sunucunuz anlık bildirimleri doğrudan istemcilere göndermez. Bunun için 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);
});

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

function sendNotifications(subscriptions) {
  // TODO
  // 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} `);
      });
  });
}

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

1. Uygulama sekmesine geri dönün.
2. 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.
3. Uygulamanızı diğer tarayıcılarda veya cihazlarda açın ve bunları push bildirimlerine abone etmeyi deneyin. Ardından Tümüne bildir düğmesini tıklayın. Abone olduğunuz tüm cihazlarda aynı bildirimi alırsınız (ör. push bildiriminin gövdesindeki kimlik aynı olmalıdır).

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.