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 gösterilmektedir. Codelab'in sonunda, aşağıdakileri yapabilen bir müşteriniz olacak:

  • Kullanıcıyı push bildirimlerine abone eder.
  • Push mesajlarını alır ve bildirim olarak görüntüler.
  • Kullanıcının push bildirimlerinin aboneliğini iptal eder.

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 sunucu kodu zaten tamamlanmış. Bu codelab'de yalnızca istemciyi uygulayacaksınız. Push bildirim sunucusunu nasıl uygulayacağınızı öğrenmek için Codelab: Push bildirim sunucusu oluşturma başlıklı makaleyi inceleyin.

Kodun tamamını görmek için push-notifications-client-codelab-complete (kaynak) dosyasını inceleyin.

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

Kurulum

Kodun düzenlenebilir bir kopyasını alın

Bu talimatların sağ tarafında göreceğiniz kod düzenleyici, bu codelab boyunca Glitch UI 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. Glitch kullanıcı arayüzünde Araçlar'ı ve 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ı ve ortak anahtar değerlerini kopyalayın.
  3. Glitch kullanıcı arayüzünde .env'ü açın ve VAPID_PUBLIC_KEY ile 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 şu şekilde görünmelidir:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Glitch Terminal'i 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.

Hizmet çalışanı kaydetme

Sonuç olarak istemcinizin bildirimleri almak ve görüntülemek için bir hizmet çalışanına ihtiyacı olacaktır. Hizmet işçisini mümkün olduğunca erken kaydettirmeniz önerilir. Daha fazla bağlam için Aktarılan mesajları bildirim olarak alma ve görüntüleme bölümüne 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 düğmesine basın.
  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. Service worker was registered. mesajının Konsola kaydedildiğini görürsünüz.

Push bildirimi izni isteme

Sayfa yüklenirken push bildirimi göndermek için hiçbir zaman izin istememelisiniz. Bunun yerine kullanıcı arayüzünüzde kullanıcıya push bildirimi almak isteyip istemediğini sormalısınız. Kullanıcılar açıkça onayladıktan sonra (ör. bir düğmeyi tıklayarak) tarayıcıdan push bildirimi izni almayla ilgili resmi süreci başlatabilirsiniz.

  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 dosyasında subscribeButtonHandler() içindeki // TODO yorumunu aşağıdaki kodla değiştirin:
// 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 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 sisteminin kullandığı herhangi bir eşdeğer ifadeyi) tıklayın. Konsolda, isteğin kabul edilip edilmediğini belirten bir mesaj görürsünüz.

Push bildirimlerine abone olma

Abonelik işlemi, tarayıcı sağlayıcısı tarafından kontrol edilen ve push hizmeti adı verilen bir web hizmetiyle etkileşimde bulunmayı içerir. Push bildirimi aboneliği bilgilerini aldıktan sonra bir sunucuya göndermeniz ve sunucunun bu bilgileri uzun süreli bir veritabanında depolamasını sağlamanız gerekir. Abonelik işlemi hakkında daha fazla bilgi için İstemcinin push bildirimlerine abone olmasını sağlama bölümüne bakın.

  1. Vurgulanan aşağıdaki kodu subscribeButtonHandler() dosyası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. Kullanıcıya görünür bildirimler göstermeden mesaj yayınlamak (sessiz yayınlama) bir gün mümkün olabilir ancak tarayıcılar şu anda gizlilik endişeleri nedeniyle bu özelliğe izin vermez.

applicationServerKey değeri, bir base64 dizesini Uint8Array'a dönüştüren bir yardımcı program işlevini kullanır. Bu değer, sunucunuz ile push hizmeti arasında kimlik doğrulama için kullanılır.

Push bildirimlerinin aboneliğinden çıkma

Kullanıcı push bildirimlerine abone olduktan sonra, kullanıcının fikrini değiştirip artık push bildirimi almak istememesi ihtimaline karşı kullanıcı arayüzünüzde aboneliği iptal etme seçeneği sunulması gerekir.

  1. unsubscribeButtonHandler() içindeki // TODO yorumunu 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, sunucunuzdan istemciye gönderilen mesajların alınması ve gösterilmesi için bir hizmet çalışanına ihtiyacınız vardır. Daha fazla bilgi için İtilen iletileri bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

  1. public/service-worker.js dosyasını açın ve hizmet çalışanının push olay işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:
// 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. Beni bilgilendir'i tıklayın. Bir push bildirimi alırsınız.
  3. Uygulama sekmenizin URL'sini diğer tarayıcılarda (veya başka cihazlarda) açmayı, abonelik iş akışını tamamlamayı ve ardından Tümünü bilgilendir'i tıklamayı deneyin. Abone olduğunuz tüm tarayıcılarda aynı push bildirimini alırsınız. Çalıştığı veya çalışmadığı bilinen tarayıcı/işletim sistemi kombinasyonlarının listesini görmek için Tarayıcı uyumluluğu başlıklı makaleyi inceleyin.

Bildirimi birçok şekilde özelleştirebilirsiniz. Daha fazla bilgi edinmek için ServiceWorkerRegistration.showNotification() parametrelerine bakın.

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

Gerçek hayatta, bildirimi muhtemelen kullanıcınızla yeniden etkileşime geçmek ve kullanıcınızı sitenizi ziyaret etmeye teşvik etmek için kullanırsınız. Bunun için hizmet çalışanınızı biraz daha yapılandırmanız gerekir.

  1. Hizmet çalışanının notificationclick etkinlik işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:
// 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 dosyasını yükler.

Sonraki adımlar