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.
- 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.
- Araçlar'ı ve ardından Terminal'i tıklayarak Glitch terminalini açın.
- 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. .env
uygulamasını açıpVAPID_PUBLIC_KEY
veVAPID_PRIVATE_KEY
uygulamalarını güncelleyin. AyarlaVAPID_SUBJECT
-mailto:test@test.test
. 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:test@test.test"
- Glitch terminalini kapatın.
public/index.js
adlı kişiyi aç.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
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
- 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/
- 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/…
- Glitch kullanıcı arayüzünde Kaynağı Görüntüle'yi tıklayarak kodunuza geri dönün.
- 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. server.js
adlı kişiyi aç./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
- Uygulama sekmesine geri dönün.
- Push e-posta listesinden çık'ı tıklayın.
- Arıza Günlükleri'ne tekrar bakın.
/remove-subscription
takip ediliyor müşterinin abonelik bilgilerine göre. /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.
/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);
});
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} `);
});
});
}
/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);
}
});
- Uygulama sekmesine geri dönün.
- 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.
- Bana bildir'i tıklayın. Push bildirimi alırsınız. Başlık
<ID>
birHello, Notifications!
olduğunda gövdeID: <ID>
olmalıdır rastgele sayı. - 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.