Bildirimleri yönetmek için Service Worker kullanma

Kate Jeffreys
Kate Jeffreys

Bu codelab'de, bildirimleri yönetmek için bir service worker kullanacaksınız. Buradaki talimatlarda, hizmet çalışanları ile bildirim izni isteme ve bildirim göndermenin temelleri hakkında bilgi sahibi olduğunuz varsayılmaktadır. Bildirimler hakkında bilgi edinmek için Bildirimler API'sini kullanmaya başlama başlıklı codelab'i inceleyin. Hizmet çalışanları hakkında daha fazla bilgi edinmek için Matt Gaunt'un Introduction to service workers (Hizmet çalışanlarına giriş) başlıklı makalesini inceleyin.

Örnek uygulama ve başlangıç kodu hakkında bilgi edinme

Yeni Chrome sekmesinde canlı uygulamaya bakarak başlayın:

  1. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.

  2. Konsol sekmesini tıklayın.

  3. Filtre kutusunun yanındaki Düzeyler açılır listesinde Bilgi seçeneğinin belirlendiğinden emin olun.

  4. Canlı uygulamanızın Geliştirici Araçları konsolunda şu konsol mesajını görmeniz gerekir:

    TODO: Implement getRegistration().

    Bu, bu codelab'de uygulayacağınız bir işlev saplamasından gelen bir mesajdır.

Şimdi örnek uygulamanın koduna göz atalım.

  1. public/index.js adresine göz atın:

    • Uygulayacağınız işlevler için dört saplama vardır: registerServiceWorker, getRegistration, unRegisterServiceWorker ve sendNotification.

    • requestPermission işlevi, bildirim göndermek için kullanıcının iznini ister. Get started with the Notifications API codelab'i (Bildirimler API'si ile Başlarken codelab'i) tamamladıysanız buradaki requestPermission işlevinin kullanıldığını fark edeceksiniz. Tek fark, artık izin isteği çözüldükten sonra kullanıcı arayüzünü de güncellemesidir.

    • updateUI işlevi, uygulamanın tüm düğmelerini ve mesajlarını yeniler.

    • initializePage işlevi, tarayıcıdaki hizmet çalışanı özelliği algılamasını gerçekleştirir ve uygulama kullanıcı arayüzünü günceller.

    • Komut dosyası, sayfa yüklenene kadar bekler ve ardından sayfayı başlatır.

  2. public/service-worker.js adlı kişiyi aç.

    Adından da anlaşılacağı gibi, bu dosyayı service worker olarak kaydetmek için uygulamaya kod eklersiniz.

    Dosya henüz uygulama tarafından kullanılmıyor olsa da, hizmet çalışanı etkinleştirildiğinde konsola bir mesaj yazdıracak bazı başlangıç kodları içeriyor.

    Service worker bildirim aldığında bunları işlemek için public/service-worker.js dosyasına kod ekleyeceksiniz.

Hizmet çalışanını kaydetme

Bu adımda, kullanıcı uygulama kullanıcı arayüzünde Register service worker'ı tıkladığında çalışacak kodu yazacaksınız. Bu kod, public/service-worker.js hizmet çalışanını kaydeder.

  1. public/index.js adlı kişiyi aç. registerServiceWorker işlevini aşağıdaki kodla değiştirin:

    // Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}

    registerServiceWorker, sözlerin işlenmesini daha kolay hale getirmek için async function bildirimini kullanır. Bu sayede Promise değerinin çözümlenmiş değerini await. Örneğin, yukarıdaki işlev, kullanıcı arayüzünü güncellemeden önce bir hizmet çalışanını kaydetme işleminin sonucunu bekler. Daha fazla bilgi için await başlıklı MDN makalesine bakın.

  2. Kullanıcı artık bir hizmet çalışanı kaydedebildiğine göre, hizmet çalışanı kayıt nesnesine referans alabilirsiniz. public/index.js içinde getRegistration işlevini aşağıdaki kodla değiştirin:

    // Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}

    Yukarıdaki işlev, varsa mevcut Service Worker kaydını almak için Service Worker API'yi kullanır. Bu, hizmet çalışanı kaydına referans almayı biraz daha kolaylaştırır.

  • Hizmet çalışanı kaydı işlevini tamamlamak için hizmet çalışanının kaydını iptal edecek kodu ekleyin. unRegisterServiceWorker işlevini aşağıdaki kodla değiştirin:

    // Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

Canlı uygulamayı görüntülediğiniz sekmede sayfayı yeniden yükleyin. Hizmet çalışanı kaydet ve Hizmet çalışanı kaydını iptal et düğmeleri artık çalışıyor olmalıdır.

Service worker'a bildirim gönderme

Bu adımda, kullanıcı uygulama kullanıcı arayüzünde Bildirim gönder'i tıkladığında çalışacak kodu yazacaksınız. Bu kod bir bildirim oluşturur, hizmet çalışanının kayıtlı olup olmadığını kontrol eder ve ardından postMessage yöntemini kullanarak bildirimi hizmet çalışanına gönderir.

public/index.js bağlantısını açın ve sendNotification işlevini aşağıdaki kodla değiştirin:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Bu kodun yaptığı işlemler:

  • sendNotification, eşzamansız bir işlev olduğundan hizmet çalışanı kaydına referans almak için await işlevini kullanabilirsiniz.

  • Service worker'ın postMessage yöntemi, uygulamadan service worker'a veri gönderir. Daha fazla bilgi için postMessage ile ilgili MDN dokümanlarına bakın.

  • Kod, postMessage işlevine erişmeye çalışmadan önce navigator.serviceWorker.controller özelliğinin varlığını kontrol eder. Etkin bir hizmet çalışanı yoksa veya sayfa zorunlu olarak yenilenmişse (Shift+Yeniden yükle) navigator.serviceWorker.controller, null olur. Daha fazla bilgi için MDN'deki ServiceWorker denetleyici dokümanlarına bakın.

Service worker'daki bildirimleri işleme

Bu adımda, hizmet çalışanında kendisine gönderilen iletileri işleyecek ve kullanıcıya bildirimler gösterecek kodu yazacaksınız.

public/service-worker.js adlı kişiyi aç. Dosyanın sonuna aşağıdaki kodu ekleyin:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Kısaca açıklayalım:

  • self, hizmet çalışanın kendisini ifade eder.

  • Bildirimlerin gösterilmesi artık hizmet çalışanı tarafından yapılsa da bildirim izninin kullanıcıdan alınması için ana uygulama kullanıcı arayüzü sorumludur. İzin verilmezse showNotification tarafından döndürülen söz reddedilir. Yukarıdaki kod, yakalanmamış bir Promise reddetme hatasını önlemek ve bu hatayı biraz daha zarif bir şekilde işlemek için bir catch bloğu kullanır.

Bu serideki bir sonraki codelab olan Build a push notifications server (Push bildirimleri sunucusu oluşturma) başlıklı codelab'e geçin.