Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys

Kayce Basques

Bu codelab'i takip etmek için ikinci bir sekmede bu Glitch'i açın.

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 müşteriye 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ığı, tüm push bildirimi mantığı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ırabilmeniz 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. 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:[e-mail] 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:[e-mail]"

1. Glitch terminalini kapatın.

Ortam değişkeni değerleri (.env içindeki öğeler), tek bir Glitch projesine özgüdür. Projenizi remiks olarak düzenlerseniz .env içindeki değerler kopyalanmaz.

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

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 kaydetme

1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.

Anahtar terim: Az önce açtığınız sekmeye uygulama sekmesi diyeceğiz.

1. Uygulama sekmesinde Hizmet çalışanı 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 aşağıdakine benzer bir mesaj görürsünüz:

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

Not: Uç nokta URL'si, kullandığınız tarayıcıya göre değişir. Örneğin, Firefox'ta URL https://updates.push.services.mozilla.com/… ile başlar.

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);
});

Not: Veritabanı .data/db.json'e yazar. Bu dosyayı Glitch'te incelemek için Araçlar'ı, ardından Terminal'i tıklayın ve Terminal'de cat .data/db.json dosyasını çalıştırın. .data/db.json, uygulamanızı her düzenlediğinizde silinir. Bunun nedeni, Glitch'in uygulamanızı her düzenlediğinizde package.json'de start komut dosyasını çalıştırması ve bu komut dosyasının rm .data/db.json çağrısı içermesidir.

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. /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çisinin 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'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çıp bunları push bildirimlerine abone etmeyi deneyin ve ardından Tümünü bildir düğmesini tıklayın. Abone olduğunuz tüm cihazlarda aynı bildirimi alırsınız (ör. push bildiriminin gövdesinde aynı kimlik 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.