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'de, kavramlardan pek bahsetmek yerine, yaparak öğrenmenize yardımcı olmak amaçlanmaktadır. Push bildirimi kavramları hakkında bilgi edinmek için Push bildirimleri nasıl çalışır? başlıklı makaleye göz atın.

Bu codelab'in sunucu kodu zaten tamamlanmış. Bu codelab'de yalnızca istemciyi uygulayacaksınız. Push bildirimi sunucusunun nasıl uygulanacağını öğrenmek için Codelab: Push bildirimi sunucusu oluşturma başlıklı makaleye göz atın.

Kodun tamamını görmek için push-notifications-client-codelab-complete (kaynak) sayfasına bakı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 (veya işletim sistemi ve tarayıcı kombinasyonlarıyla) çalışamadığı bilinmektedir:

  • macOS: Cesur, Edge, Safari
  • iOS

Kurulum

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

Bu talimatların sağı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'i tıklayın.

Kimlik doğrulamayı ayarlayın

Push bildirimlerini çalıştırmadan önce sunucu ve istemcinizi kimlik doğrulama anahtarlarıyla ayarlamanız gerekir. Nedenini öğrenmek için Web push protokolü isteklerinizi imzalama bölümüne bakın.

  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ı ve ortak anahtar değerlerini kopyalayın.
  3. Glitch kullanıcı arayüzünde .env uygulamasını açıp VAPID_PUBLIC_KEY ve 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 şuna benzer görünecektir:
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ı kaydedin

Sonuç olarak müşterinizin bildirimleri almak ve görüntülemek için bir hizmet çalışanına ihtiyacı olacaktır. Hizmet çalışanının mümkün olduğunca erken kaydedilmesi en iyisidir. 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. Play Console'a Service worker was registered. mesajının kaydedildiğini göreceksiniz.

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 bir şekilde onayladıktan sonra (örneğin, bir düğmeyi tıklayarak) tarayıcıdan push bildirimi izni almak için 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 içindeki // TODO yorumunu subscribeButtonHandler() şu 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 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 soracaktır. İzin ver'i (veya tarayıcınızın/işletim sisteminin kullandığı herhangi bir eşdeğer ifadeyi) tıklayın. Console'da isteğin kabul edildiğini veya reddedildiğini belirten bir mesaj görürsünüz.

Push bildirimlerine abone ol

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 abonelik bilgilerini aldıktan sonra, bu bilgileri bir sunucuya göndermeniz ve sunucunun uzun süre 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. 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, kullanıcının görebildiği bildirimler göstermeden mesaj göndermek mümkün olabilir (sessiz push'lar) ancak tarayıcılar, gizlilikle ilgili endişeler nedeniyle şu anda bu özelliğe izin vermemektedir.

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

Push bildirimleri listesinden çık

Bir kullanıcı push bildirimlerine abone olduktan sonra, kullanıcının fikrini değiştirmesi ve artık push bildirimleri almak istememesi ihtimaline karşı kullanıcı arayüzünüzün abonelikten çıkma yöntemi sağlaması 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 aktarılan mesajları alma ve görüntüleme işlemlerini yürütecek bir hizmet çalışanına ihtiyacınız vardır. Daha fazla ayrıntı için Aktarılan mesajları bildirim olarak alma ve görüntüleme bölümüne bakın.

  1. public/service-worker.js öğesini açın ve Service Worker'ın push etkinlik 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. Bana bildir'i tıklayın. 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ü bildir'i tıklamayı deneyin. Abone olduğunuz tüm tarayıcılarda aynı push bildirimini alırsınız. Çalıştığı bilinen veya çalışmayan tarayıcı/işletim sistemi kombinasyonlarının bir listesini görmek için Tarayıcı uyumluluğu bölümüne bakın.

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

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

Gerçek dünyada bildirimi, kullanıcınızla yeniden etkileşimde bulunmak ve sitenizi ziyaret etmesini sağlamak için kullanabilirsiniz. Bunun için Service Worker'ınızı biraz daha yapılandırmanız gerekir.

  1. Service Worker'ı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 dönün, kendinize başka bir bildirim gönderin ve sonra bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp https://web.dev dosyasını yükleyecektir.

Sonraki adımlar