Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Baskçaları
Kayce Baskçalar
X GitHub Nostaljik

Bu codelab'de push bildirimi sunucusunun nasıl oluşturulacağı adım adım açıklanmıştır. Codelab'in sonunda şu şartları karşılayan bir sunucunuz olacak:

  • Push bildirimi aboneliklerini takip eder (ör. bir istemci push bildirimlerini etkinleştirdiğinde sunucu yeni bir veritabanı kaydı oluşturur ve istemci 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 fazla bahsetmez. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimlerinin işleyiş şekli nasıldır? başlıklı makaleye göz atın.

Bu codelab'in istemci kodu zaten tamamlanmış. Sunucuyu yalnızca bu codelab'de uygulayacaksınız. Push bildirimi istemcisini nasıl uygulayacağınızı öğrenmek için Codelab: Push bildirimi istemcisi oluşturma bölümüne göz atın.

Kodun tamamını görmek için push-notifications-server-codelab-complete(kaynak) bölümüne 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: Brave, Edge, Safari
  • iOS

Uygulama yığını

  • Sunucu Express.js'nin üzerine kuruludur.
  • 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ı alma

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

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

Kimlik doğrulamayı ayarlayın

Push bildirimlerini çalıştırabilmek için önce sunucunuzu ve istemcinizi kimlik doğrulama anahtarlarıyla kurmanı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 öğelerini 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 olacaktır:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Arıza 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 işleminin büyük kısmını müşteriniz halleder. Sunucunuzun yapması gereken asıl işlem, yeni push bildirimi aboneliklerini kaydetmek ve eski abonelikleri silmektir. Bu abonelikler gelecekte müşterilere mesajlar iletmenizi sağlar. Abonelik süreci hakkında daha fazla bilgi için İstemcinin push bildirimlerine abone olma bölümüne bakın.

Yeni abonelik bilgilerini kaydet

  1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran 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 Push için abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz büyük olasılıkla, web sitesinin size push bildirimleri 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 ş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 ifadesini ve ardından bazı verileri görürsünüz. /add-subscription, istemcinin push bildirimlerine abone olmak istediğinde POST isteği gönderdiği URL'dir. Sonraki 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üklerine tekrar bakın. Müşterinin abonelik bilgilerini ve ardından /remove-subscription ifadesini 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ı aslında doğrudan istemcilere göndermez. Bunun yerine, bir push hizmetinden yararlanır. Sunucunuz, kullanıcınızın kullandığı tarayıcı satıcısının sahip olduğu 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. Push aboneliğinden çık'ı, ardından tekrar Push için abone ol'u tıklayın. Bu sadece daha önce de belirtildiği gibi, kodu her düzenlediğinizde projeyi yeniden başlatması ve projenin başlangıçta veritabanını silecek şekilde yapılandırılmış olması nedeniyle gereklidir.
  3. 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.
  4. Uygulamanızı diğer tarayıcılarda veya cihazlarda açıp push bildirimlerine abone olmayı ve ardından Tümünü bildir düğmesini tıklamayı deneyin. Abone olduğunuz tüm cihazlarda aynı bildirimi alırsınız (yani push bildiriminin gövdesindeki kimlik aynı olmalıdır).

Sonraki adımlar

  • Push bildirimlerinin işleyişiyle ilgili daha ayrıntılı ve kavramsal bir anlayış için Push bildirimlerine genel bakış bölümünü okuyun.
  • Bildirim izni isteyen, cihazın push bildirimleri alması için cihaza abone olan, push mesajları almak ve mesajları bildirim olarak görüntülemek için bir 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.