Codelab: Push bildirimi istemcisi oluşturma

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Bu codelab'de, push bildirimi istemcisini nasıl oluşturacağınız adım adım gösterilmektedir. Codelab'in sonunda aşağıdaki özelliklere sahip bir istemciniz olacak:

  • Kullanıcıyı push bildirimlerine abone yapar.
  • Push mesajları alır ve bunları 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ı öğrenmek için Push bildirimlerinin işleyiş şekli başlıklı makaleyi okuyun.

Bu codelab'in sunucu kodu zaten tamamlanmıştır. 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ı makaleyi 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 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

Kimlik doğrulamayı ayarlama

Push bildirimlerini kullanabilmek 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. Gizli anahtarları genellikle 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 değerini ortak anahtarınızın değeriyle değiştirin.

Hizmet çalışanını kaydetme

İstemcinizin bildirimleri alıp görüntülemek için bir hizmet çalışanına ihtiyacı vardır. Hizmet çalışanını mümkün olduğunca erken kaydetmek en iyisidir. Daha fazla bilgi için Push mesajlarını 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:

    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. Konsol'da Service worker was registered. mesajını görmeniz gerekir.

Push bildirimi izni isteyin

Sayfa yüklenirken hiçbir zaman push bildirimi gönderme izni istememelisiniz. Bunun yerine, kullanıcı arayüzünüz kullanıcıya push bildirimleri almak isteyip istemediğini sormalıdır. Kullanıcılar açıkça onay verdikten sonra (ör. bir düğmeyi tıklayarak) tarayıcıdan push bildirimi izni alma resmi sürecini başlatabilirsiniz.

  1. public/index.js dosyasında, subscribeButtonHandler() içindeki // TODO yorumunu aşağıdaki kodla değiştirin:

    // 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 Subscribe to push'u (Push bildirimlerine abone ol) tıklayın. Tarayıcınız veya işletim sisteminiz, web sitesinin size push bildirimleri 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üreci, tarayıcı tedarikçisi tarafından kontrol edilen ve push hizmeti olarak adlandırılan bir web hizmetiyle etkileşim kurmayı içerir. Push bildirimi abonelik bilgilerini aldıktan sonra bunları bir sunucuya göndermeniz ve sunucunun bu bilgileri uzun süreli olarak bir veritabanında depolamasını sağlamanız 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. Gelecekte, kullanıcıya bildirim göstermeden mesaj göndermek (sessiz push) mümkün olabilir ancak tarayıcılar, gizlilikle ilgili endişeler nedeniyle bu özelliğe izin vermez.

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

Push bildirimleri aboneliğinden çıkma

Kullanıcı push bildirimlerine abone olduktan sonra, kullanıcı fikrini değiştirirse ve artık push bildirimleri almak istemezse kullanıcı arayüzünüzün abonelikten çıkma yöntemi sunması gerekir.

  • unsubscribeButtonHandler() dosyasındaki // 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österme

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 Push mesajlarını bildirim olarak alma ve görüntüleme bölümüne bakın.

  1. public/service-worker.js dosyası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. Bana bildir'i tıklayın. Bir 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ı push bildirimini almanız gerekir.

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 dünyada, bildirimi muhtemelen kullanıcınızla yeniden etkileşim kurmak ve sitenizi ziyaret etmesini sağlamak 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:

    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 sayfasını yüklemelidir.

Sonraki adımlar