Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques

Bu codelab'de, push bildirim sunucusunun nasıl oluşturulacağı adım adım gösterilmektedir. Codelab'in sonunda, aşağıdakileri yapabilen bir sunucunuz olacak:

  • Push bildirimi aboneliklerini izler (ör. istemci push bildirimlerini etkinleştirdiğinde sunucu yeni bir veritabanı kaydı oluşturur ve istemci bildirimlerini 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 kod laboratuvarı, yaparak öğrenmenize yardımcı olmaya odaklanır ve kavramlardan çok 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ış. 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ı makaleyi inceleyin.

Kodun tamamını görmek için push-notifications-server-codelab-complete (source) dosyasına 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 kod laboratuvarının 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ığı, push bildirimi mantığının tamamını yönetir.
  • Abonelik verileri, lowdb kullanılarak bir JSON dosyasına yazılır.

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

Kurulum

Kodun düzenlenebilir bir kopyasını alma

Bu talimatların sağ tarafında gördüğünüz kod düzenleyici, bu kod laboratuvarının tamamında Glitch kullanıcı arayüzü olarak adlandırılacaktır.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

Kimlik doğrulamayı ayarlama

Push bildirimlerini çalıştırmadan önce sunucu 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. Araçlar'ı ve ardından Terminal'i tıklayarak Glitch terminalini 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çıp VAPID_PUBLIC_KEY ve 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. Glitch terminalini kapatın.
  1. public/index.js adlı kişiyi aç.
  2. VAPID_PUBLIC_KEY_VALUE_HERE değerini ortak anahtarınızın değeriyle değiştirin.

Abonelikleri yönet

Abonelik sürecinin büyük bir kısmı müşteriniz tarafından yönetilir. Sunucunuzun yapması gereken en önemli 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 Müşteriyi push bildirimlerine abone etme başlıklı makaleyi inceleyin.

Yeni abonelik bilgilerini kaydet

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran düğmesine basın.
  1. Uygulama sekmesinde Hizmet çalışanını kaydet'i tıklayın. Durum kutusunda aşağıdakine benzer bir mesaj görürsünüz:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Uygulama sekmesinde Push'e 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 soracaktır. İzin ver'i (veya tarayıcınızın/işletim sisteminizin kullandığı eşdeğer ifadeyi) tıklayın. Durum kutusunda şuna benzer bir mesaj görürsünüz:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Glitch kullanıcı arayüzünde Kaynak Kodu Görüntüle'yi tıklayarak kodunuza geri dönün.
  2. Araçlar'ı ve ardından Günlükler'i tıklayarak Glitch günlüklerini açın. /add-subscription ve ardından bazı veriler görürsünüz. /add-subscription, istemcinin push bildirimlerine abone olmak istediğinde POST isteği gönderdiği URL'dir. Aşağıdaki veriler, kaydetmeniz gereken müşterinin abonelik bilgileridir.
  3. server.js adlı kişiyi aç.
  4. /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. Push aboneliğinden çık'ı tıklayın.
  3. Arıza Günlükleri'ne tekrar bakın. /remove-subscription ve ardından istemcinin abonelik bilgilerini görürsünüz.
  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

Push mesajı gönderme bölümünde açıklandığı gibi, sunucunuz push mesajlarını doğrudan istemcilere göndermez. Bunun yerine, bunu yapmak için bir push hizmetine ihtiyaç duyar. Sunucunuz temel olarak, kullanıcınızın kullandığı tarayıcı tedarikçi firmasının sahip olduğu bir web hizmetine (push hizmeti) web hizmeti istekleri (web push protokolü istekleri) yaparak mesajları istemcilere aktarma işlemini 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. Push'ten çık'ı ve ardından Push'e abone ol'u tekrar tıklayın. Bunun nedeni, daha önce de belirtildiği gibi Glitch'in kodu her düzenlediğinizde projeyi yeniden başlatması ve projenin, başlatılırken veritabanını silecek şekilde yapılandırılmış olmasıdır.
  3. Beni bilgilendir'i tıklayın. Bir push bildirimi alırsınız. Başlık Hello, Notifications!, gövde ise ID: <ID> olmalıdır. <ID> rastgele bir sayıdır.
  4. Uygulamanızı diğer tarayıcılarda veya cihazlarda açın ve bunları push bildirimlerine abone etmeyi deneyin. Ardından Tümünü bildir düğmesini tıklayın. Abone olduğunuz tüm cihazlarda aynı bildirimi alırsınız (push bildiriminin gövdesindeki kimlik aynı olmalıdır).

Sonraki adımlar

  • Push bildirimlerin işleyiş şekli hakkında daha ayrıntılı bilgi edinmek için Push bildirimlerine genel bakış başlıklı makaleyi okuyun.
  • Bildirim izni isteyen, cihazı push bildirimleri almaya abone eden ve push mesajlarını alıp bildirimler olarak görüntülemek için bir hizmet çalışanı kullanan bir istemci oluşturmayı öğrenmek üzere Codelab: Push bildirimi istemcisi oluşturma başlıklı makaleyi inceleyin.