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 anlatılmaktadır. Codelab'in sonunda şu özelliklere sahip bir sunucunuz olacak:

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

Bu codelab'de, kavramlardan pek bahsetmek yerine, yaparak öğrenmenize yardımcı olmak amaçlanmaktadır. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimleri nasıl çalışır? başlıklı makaleye göz atın.

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

Kodun tamamını görmek için push-notifications-server-codelab-complete (kaynak) sayfası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 codelab'in aşağıdaki işletim sistemleriyle (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışamadığı bilinmektedir:

  • macOS: Cesur, Edge, Safari
  • iOS

Uygulama yığını

  • Sunucu, Express.js temel alınarak oluşturulmuş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.

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

Kurulum

Kodun düzenlenebilir bir kopyasını alın

Bu talimatların sağında göreceğiniz kod düzenleyici, bu codelab boyunca Glitch UI olarak adlandırılacaktır.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.

Kimlik doğrulamayı ayarlayın

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 bölümüne bakın.

  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 uygulamasını açıp VAPID_PUBLIC_KEY ve VAPID_PRIVATE_KEY uygulamaları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 şuna benzer görünecektir:
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 kısmını müşteriniz halleder. Sunucunuzun yapması gereken ana işlemler, yeni push bildirimi abonelikleri kaydetmek ve eski abonelikleri silmektir. Bu abonelikler, gelecekte müşterilere mesaj aktarmanıza olanak tanır. Abonelik işlemi hakkında daha fazla bilgi için İstemcinin push bildirimlerine abone olmasını sağlama bölümüne bakın.

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 şuna benzer bir mesaj görürsünüz:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Uygulama sekmesinde Aktarmak için abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz muhtemelen web sitesinin size push bildirimi göndermesini isteyip istemediğinizi sorar. İzin ver'i (veya tarayıcınızın/OS'nizin 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 Kaynağı Görüntüle'yi tıklayarak kodunuza geri dönün.
  2. Araçlar'ı ve ardından Günlükler'i tıklayarak Arıza Günlükleri'ni açın. /add-subscription ve ardından bazı veriler göreceksiniz. /add-subscription, istemcinin push bildirimlerine abone olmak istediğinde POST isteği gönderdiği URL'dir. Aşağıdaki veriler, müşterinin kaydetmeniz gereken 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 silin

  1. Uygulama sekmesine geri dönün.
  2. Push e-posta listesinden çık'ı tıklayın.
  3. Arıza Günlükleri'ne tekrar bakın. /remove-subscription simgesini ve ardından müşterinin 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önder

Push mesajı gönderme bölümünde açıklandığı gibi, sunucunuz push mesajlarını doğrudan istemcilere göndermez. Bunun için bir push hizmetinden yararlanılır. 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 aboneliğinden çık'ı ve ardından tekrar Push için abone ol'u tıklayın. Bu işlem yalnızca daha önce belirtildiği gibi Glitch, kodu her düzenlediğinizde projeyi yeniden başlatır ve proje başlangıçta veritabanını silecek şekilde yapılandırıldığı için gereklidir.
  3. Bana bildir'i tıklayın. Push bildirimi alırsınız. Başlık Hello, Notifications! ve gövde ID: <ID> olmalıdır. Burada <ID> rastgele bir sayıdır.
  4. Uygulamanızı diğer tarayıcılarda veya cihazlarda açın, push bildirimlerine abone olmayı ve ardından Tümünü bildir düğmesini tıklamayı deneyin. Abone olduğunuz tüm cihazlarınızda aynı bildirimi alırsınız (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ış makalesini okuyun.
  • Bildirim izni isteyen, push bildirimleri almak için cihaza abone olan ve push mesajlarını almak ve mesajları bildirim olarak görüntülemek için hizmet çalışanı kullanan bir istemcinin nasıl oluşturulacağını öğrenmek için Codelab: Push bildirimi istemcisi oluşturma bölümüne göz atın.