Codelab: Push bildirim sunucusu oluşturma

Kate Jeffreys

Kayce Basques

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

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 izler (yani sunucu, push bildirimleri etkinleştirdiğinde kaydedilen yeni bir veri tabanı kaydı Kullanıcı devre dışı bıraktığında mevcut veritabanı kaydını siler)
• Tek bir istemciye push bildirimi gönderir
• Abone olunan tüm istemcilere push bildirimi gönderir

Bu codelab'in amacı, uygulama ve oyun geliştirmeyi biraz konuşacağız. Ödeme yap Push bildirimleri nasıl çalışır? .

Bu codelab'in istemci kodu zaten tamamlanmış. Sadece sunucu uygulama hakkında daha fazla bilgi edineceksiniz. Bir push bildirimi istemcisi için Codelab: Push bildirimi oluşturma gerekir.

push-notifications-server-codelab-complete sayfasına göz atın (kaynak) tıklayı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 çalışmadığı bilinmektedir (veya işletim sistemi ve tarayıcı kombinasyonları):

• 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 bildirimleri mantığını yerine getirebilir.
• 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ğ tarafında gördüğünüz kod düzenleyici Glitch UI'sını inceleyelim.

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ırabilmek için ayarlarınızı yapmanız gerekir. istemcinize kimlik doğrulama anahtarlarıyla erişebilirsiniz. Web push protokolü isteklerinizi imzalama başlıklı makaleye göz atın. bunun nedenini öğrenebilirsiniz.

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ı kopyalayın ve ortak anahtar/değer çiftlerine değer olmasıdır.
3. .env uygulamasını açıp VAPID_PUBLIC_KEY ve VAPID_PRIVATE_KEY uygulamalarını güncelleyin. Ayarla VAPID_SUBJECT - mailto:[e-mail]. Bu değerlerin tümü sarmalanmalıdır kullanabilirsiniz. Güncellemelerinizi yaptıktan sonra .env dosyanız şuna benzer:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:[e-mail]"

1. Glitch terminalini kapatın.

ziyaret edin.

Ortam değişkeni değerleri (.env öğesindekiler) tek bir Glitch projesine özgüdür. Projenizi remikslerseniz .env içindeki değerler kopyalanmaz.

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. Ana sunucunuzun yapması gereken şey yeni push bildirimi abonelikleri kaydetmektir. ve eski abonelikleri silebilirsiniz. Bu abonelikler, sağlamak için büyük çaba harcıyoruz. İstemcinin push bildirimlerine abone olmasını sağlama konusuna bakın. ziyaret edin.

Yeni abonelik bilgilerini kaydet

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

ziyaret edin.

Anahtar terim: Yeni açtığınız sekmeyi uygulama sekmesi olarak ele alacağız.

1. Uygulama sekmesinde Hizmet çalışanını kaydet'i tıklayın. Durum kutusunda şuna benzer bir mesaj görür:

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 bildirimleri göndermesine izin vermek isteyip istemediğinizi sormak. İzin ver'i tıklayın (veya (tarayıcınızın/işletim sisteminizin kullandığı eşdeğer ifade). Durum kutusunda, buna benzer bir mesaj görürsünüz. şu şekilde değiştir:

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

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

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. Siz /add-subscription ve ardından bazı veriler görmelidir. /add-subscription gönderdiği URL'yi YAYINLA Push bildirimlerine abone olmak istediğinde isteği gönderir. Projenin gidişatı boyunca müşterinin abonelik bilgilerini içerir.
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 üzerine yazar. Bu dosyayı Glitch'te incelemek için Araçlar'ı, ardından Terminal'i tıklayın ve Terminal'de cat .data/db.json komutunu ç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 içinde 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 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 takip ediliyor müşterinin abonelik bilgilerine göre.
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, müşterilere ileti gönderme sürecini başlatırken web'deki kullanıcılara bir web hizmetine (push hizmeti) yapılan hizmet istekleri (web push protokolü istekleri) tarayıcı sağlayıcısına ait olanları gösterir.

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 yalnızca daha önce de belirtildiği gibi Glitch, projeyi yeniden başlattığı için gereklidir Projeyi her düzenlediğinizde ve proje başlangıçta veritabanını silecek şekilde yapılandırıldığında.
3. Bana bildir'i tıklayın. Push bildirimi alırsınız. Başlık <ID> bir Hello, Notifications! olduğunda gövde ID: <ID> olmalıdır rastgele sayı.
4. Uygulamanızı diğer tarayıcılarda veya cihazlarda açın ve push bildirimleri için abone olmayı deneyin ve ardından Tümünü bildir düğmesini tıklamaktır. Aynı bildirimi abone olduğunuz tüm cihazlarınıza (örneğin, push bildiriminin gövdesindeki kimlik, aynı olacaktır).

Sonraki adımlar

• Push bildirimlerine genel bakış başlıklı makaleyi inceleyin. .
• Codelab: Push bildirimi istemcisi oluşturma başlıklı makaleye göz atın bildirim izni isteyen ve abone olan bir istemci oluşturmayı öğrenmek için cihazın push bildirimlerini alması ve geri bildirimleri almak için bir Service Worker ve mesajları bildirim olarak görüntüleyebilirsiniz.