Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Bu codelab'de, adım adım push bildirimi istemcisi oluşturma işlemi gösterilmektedir. Bu codelab'in sonunda, aşağıdaki özelliklere sahip bir istemciniz olacak:

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

Bu codelab, yaparak öğrenmenize yardımcı olmaya odaklanır ve kavramlardan pek bahsetmez. Push bildirimleriyle ilgili kavramlar hakkında bilgi edinmek için Push bildirimlerinin işleyiş şekli başlıklı makaleyi okuyun.

Bu codelab'in sunucu kodu zaten tamamlanmış. Bu codelab'de yalnızca istemciyi uygulayacaksınız. Push bildirimi sunucusunu nasıl uygulayacağınızı öğrenmek için Codelab: Build a push notification server (Codelab: Push bildirimi sunucusu oluşturma) başlıklı makaleye göz atı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ışmadığı bilinmektedir:

  • macOS: Brave, Edge, Safari
  • iOS

Kurulum

Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remix'i tıklayın.

Kimlik doğrulama ayarlama

Anlık bildirimlerin çalışması 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. Genellikle sırları buna benzer bir .env dosyasında saklarsınız.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. public/index.js adlı kişiyi aç.
  2. VAPID_PUBLIC_KEY_VALUE_HERE kısmını ortak anahtarınızın değeriyle değiştirin.

Hizmet çalışanı kaydetme

Müşterinizin bildirimleri alıp görüntülemesi için bir hizmet çalışanı gerekir. Service worker'ı olabildiğince erken kaydetmeniz önerilir. Daha fazla bilgi için Anlık iletilen mesajları bildirim olarak alma ve görüntüleme başlıklı makaleyi inceleyin.

  1. // TODO add startup logic here yorumunu aşağıdaki kodla değiştirin:

    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);

  2. Chrome'da Geliştirici Araçları Konsolu'nu açın.

  3. Service worker was registered. logged to the Console mesajını görmeniz gerekir.

Push bildirimi izni isteme

Sayfa yüklemede push bildirimi gönderme izni istememelisiniz. Bunun yerine kullanıcı arayüzünüzde, kullanıcıya push bildirimi almak isteyip istemediği sorulmalıdır. Kullanıcılar açıkça onayladıktan sonra (ör. bir düğmeyi tıklayarak) tarayıcıdan anlık bildirim izni alma sürecini başlatabilirsiniz.

  1. public/index.js bölümünde, // TODO yorumunu aşağıdaki kodla değiştirin:subscribeButtonHandler()

    // 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.');
}

  2. Uygulama sekmesine geri dönün ve Anlık bildirimlere abone ol'u tıklayın. Tarayıcınız veya işletim sisteminiz, web sitesinin size anlık bildirim göndermesine izin vermek isteyip istemediğinizi sorar.

  3. İzin ver'i (veya tarayıcınız ya da işletim sisteminiz tarafından kullanılan eşdeğer ifadeyi) seçin. Konsolda, isteğin kabul edilip edilmediğini belirten bir mesaj görürsünüz.

Push bildirimlerine abone olma

Abonelik sürecinde, tarayıcı satıcısı tarafından kontrol edilen ve push hizmeti olarak adlandırılan bir web hizmetiyle etkileşim kurulur. Anlık bildirim aboneliği bilgilerini aldıktan sonra bunları bir sunucuya göndermeniz ve sunucunun bu bilgileri uzun vadeli olarak bir veritabanında saklaması gerekir.

  1. Aşağıdaki vurgulanmış 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ı tarafından görülebilen bildirimler gösterilmeden mesaj göndermek (sessiz gönderme) bir gün mümkün olabilir ancak gizlilik endişeleri nedeniyle tarayıcılar bu özelliğe izin vermez.

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

Push bildirimleri aboneliğinden çıkma

Bir kullanıcı anlık bildirimlere abone olduktan sonra fikrini değiştirip anlık bildirim almak istememesi durumunda kullanıcı arayüzünüzde aboneliği iptal etme seçeneği sunulmalıdır.

  • unsubscribeButtonHandler() içindeki // TODO yorumunu aşağıdaki kodla değiştirin:
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 iletilerin alınmasını ve görüntülenmesini sağlamak için bir hizmet çalışanı gerekir. Daha fazla bilgi için Anlık iletilen mesajları bildirim olarak alma ve görüntüleme başlıklı makaleye bakın.

  1. public/service-worker.js bağlantısını açın ve hizmet çalışanının push etkinlik işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Uygulama sekmesine geri dönün.

  3. Beni bilgilendir'i tıklayın. Push bildirimi alırsınız.

  4. Uygulama sekmenizin URL'sini desteklenen diğer tarayıcılarda açın. Abonelik iş akışını uygulayın ve Tümünü bilgilendir'i tıklayın. Her birinde aynı anlık bildirimi alırsınız.

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 kullanıcınızla yeniden etkileşim kurmak ve onu 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. Service worker'ın notificationclick etkinlik işleyicisindeki // TODO yorumunu aşağıdaki kodla değiştirin:

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. Uygulama sekmesine geri dönün, kendinize başka bir bildirim gönderin ve bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp https://web.dev adresini yüklemelidir.

Sonraki adımlar