Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques

Bu codelab'de, push bildirimi istemcisinin nasıl oluşturulacağı adım adım anlatılmaktadır. Codelab'in sonunda şu özelliklere sahip bir istemciniz olacak:

  • Kullanıcının push bildirimlerine abone olmasını sağlar.
  • Push mesajlarını alır ve bildirim olarak görüntüler.
  • Kullanıcıyı push bildirimlerine olan aboneliği iptal eder.

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

Bu codelab'in sunucu kodu zaten tamamlanmış. Sadece istemcinin uygulanmasıyla ilgili daha fazla bilgi edinin. Bir push bildirimi sunucusu hakkında daha fazla bilgi için Codelab: Push bildirimi oluşturma sunucu değerleridir.

push-notifications-client-codelab-complete adresine 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

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.
ziyaret edin.

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. Glitch Kullanıcı Arayüzünde Araçlar'ı, ardından Terminal'i tıklayarak Glitch Terminal'i açın.
  2. Glitch Terminal'de 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. Glitch kullanıcı arayüzünde .env uygulamasını açıp VAPID_PUBLIC_KEY ve VAPID_PRIVATE_KEY öğelerini güncelleyin. Ayarla VAPID_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"
  1. Glitch Terminal'i kapatın.
ziyaret edin.
  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.

Hizmet çalışanı kaydedin

İstemcinizin sonuçta verileri almak ve göstermek için bir hizmet çalışanına ihtiyacı olacaktır bildirimleri etkinleştirebilirsiniz. Hizmet çalışanının mümkün olduğunca erken kaydedilmesi en iyisidir. Bkz. Aktarılan iletileri şu şekilde alma ve görüntüleme bildirimlerine bakın.

  1. // TODO add startup logic here yorumunu aşağıdaki kodla değiştirin:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.
ziyaret edin.
  1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Konsol sekmesini tıklayın. Şu mesajı görüyor olmanız gerekir: Service worker was registered. Console'a giriş yaptı.
ziyaret edin.

Push bildirimi izni isteme

Sayfa yüklendiğinde push bildirimleri göndermek için hiçbir zaman izin istememelisiniz. Bunun yerine kullanıcı arayüzünüz, kullanıcıya push bildirimleri almak isteyip istemediğini sormalıdır. Açıkça onayladıktan sonra (örneğin, bir düğmeyi tıklayarak) o zaman tarayıcıdan push bildirimi izni almak için resmi süreci başlatma.

  1. Glitch kullanıcı arayüzünde kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.
  2. public/index.js içindeki // TODO yorumu şurada değiştirin: Şu kodu içeren subscribeButtonHandler():
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  1. Uygulama sekmesine geri dönün ve Aktarmak için abone ol'u tıklayın. Tarayıcınız veya işletim sistemi, web sitesinin sitelere izin vermek isteyip istemediğinizi size push bildirimleri gönderir. İzin ver'i (veya eşdeğer herhangi bir ifadeyi) tıklayın (tarayıcı/işletim sistemi kullanımları). Console'da sitenizin kabul edilip edilmediğini gösterir.
ziyaret edin.

Push bildirimlerine abone ol

Abonelik işlemi, kontrol edilen bir web hizmetiyle etkileşimde bulunmayı push hizmeti adı verilen tarayıcı tedarikçisi. Google Haberler'i sunucuya göndermek için gereken push bildirimi abonelik bilgileri ve sunucunun bunu bir veritabanında uzun süre saklamasını sağlamak. İstemcinin push bildirimlerine abone olmasını sağlama konusuna bakın. ziyaret edin.

  1. Aşağıdaki vurgulanan kodu subscribeButtonHandler() hesabına ekleyin:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

userVisibleOnly seçeneği true olmalıdır. Bir gün içinde kullanıcıların görebileceği bildirimler göstermeden mesajları push etmek için (sessiz itmeler) ancak tarayıcılar şu anda bu özelliğe izin vermemektedir gizlilikle ilgili endişelerinden kaynaklanır.

applicationServerKey değeri, şu işleve dayanır: bir base64 dizesini Uint8Array'e dönüştürür. Bu değer şunun için kullanılır: .

Push bildirimleri listesinden çık

Kullanıcı push bildirimlerine abone olduktan sonra kullanıcı adınızın şunları yapması gerekir: kullanıcının fikrini değiştirmesi durumunda e-posta listesinden çıkma yöntemi sağlama ve artık push bildirimleri almak istemiyor.

  1. unsubscribeButtonHandler() içindeki // TODO yorumunu değiştirin aşağıdaki kodla değiştirin:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Push mesajı alma ve bildirim olarak görüntüleme

Daha önce de belirtildiği gibi, bu sorunu çözmek için bir hizmet çalışanı istemciye aktarılan iletileri alma ve görüntüleme kaldırın. Bkz. Aktarılan iletileri şu şekilde alma ve görüntüleme bildirimlerini inceleyebilirsiniz.

  1. public/service-worker.js sayfasını aç ve // TODO yorumunu değiştir aşağıdaki kodla Service Worker'ın push etkinlik işleyicisinde:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Uygulama sekmesine geri dönün.
  2. Bana bildir'i tıklayın. Push bildirimi alırsınız.
  3. Uygulama sekmenizin URL'sini diğer tarayıcılarda (hatta abonelik iş akışını takip edebilir ve ardından Tümünü bildir'i tıklayın. Aynı push bildirimini alırsınız. . Bu bölümde Tarayıcı/işletim sisteminin listesini görmek için tarayıcı uyumluluğu kombinasyonlarını test etmek amacıyla kullanılır.

Bildirimi birçok şekilde özelleştirebilirsiniz. Şu parametreleri inceleyin: Daha fazla bilgi edinmek için ServiceWorkerRegistration.showNotification().

Kullanıcı bir bildirimi tıkladığında URL açma

Gerçek dünyada bildirimi, bir satın alma işlemi için ve sitenizi ziyaret etmelerini istemek üzere harekete geçirici bir mesaj ekleyin. Bunun için Service Worker'ınızı biraz daha yapılandırmanız gerekir.

  1. Hizmet çalışanının notificationclick öğesindeki // TODO yorumunu değiştirin olay işleyicisi olarak kullanabilirsiniz:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Uygulama sekmesine geri dönün, kendinize başka bir bildirim gönderin ve ardından bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp https://web.dev

Sonraki adımlar