Bildirimleri yönetmek için Service Worker kullanma

Kate Jeffreys
Kate Jeffreys

Bu codelab'de, bildirimleri yönetmek için bir servis çalışanı kullanacaksınız. Buradaki talimatlarda, hizmet işçilerine ve bildirim izni isteme ve bildirim göndermeyle ilgili temel bilgilere aşina olduğunuz varsayılmaktadır. Bildirimler hakkında bilgi edinmek istiyorsanız Notifications API'yi kullanmaya başlama codelab'ine göz atın. Hizmet çalışanları hakkında daha fazla bilgi edinmek için Matt Gaunt'ın Hizmet çalışanlarına giriş başlıklı makalesine göz atın.

Yerleşik Glitch uygulamasında bildirimler otomatik olarak engellenir. Bu nedenle, uygulamayı bu sayfada önizleyemezsiniz. Bunun yerine aşağıdakileri yapmanız gerekir:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  2. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

Glitch yeni bir Chrome sekmesinde açılır.

Bu codelab'i tamamlarken bu sayfadaki yerleşik Glitch'teki kodda değişiklikler yapın. Değişiklikleri görmek için canlı uygulamanızın bulunduğu yeni sekmeyi yenileyin.

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

Yeni Chrome sekmesinde canlı uygulamaya göz atarak başlayın:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. Konsol sekmesini tıklayın.

  3. Filtre kutusunun yanındaki Düzeyler açılır menüsünde Bilgi seçeneğinin seçili olduğundan emin olun.

  4. Canlı uygulamanızın Geliştirici Araçları konsolunda bir konsol mesajı görürsünüz:

    TODO: Implement getRegistration().

    Bu, bu codelab'de uygulayacağınız bir işlev taslağı mesajıdır.

Şimdi bu sayfada yerleşik Glitch'teki örnek uygulamanın koduna göz atalım.

  1. Yerleştirilmiş Glitch'te public/index.js bölümüne göz atın:

    • Uygulamanız gereken işlevler için dört yoksunluk örneği vardır: registerServiceWorker, getRegistration, unRegisterServiceWorker ve sendNotification.

    • requestPermission işlevi, bildirim göndermek için kullanıcıdan izin ister. Notifications API codelab'i tamamladıysanız burada requestPermission işlevinin kullanıldığını fark edeceksiniz. Tek fark, artık izin isteği çözüldükten sonra kullanıcı arayüzünün de güncellenmesidir.

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

    • initializePage işlevi, tarayıcıda hizmet çalışanı özelliği için özellik algılama işlemi 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. Yerleşik Glitch'te public/service-worker.js öğesini açın.

    Adından da anlaşılacağı gibi, bu dosyayı hizmet çalışanı olarak kaydettirmek için uygulamaya kod eklersiniz.

    Dosya henüz uygulama tarafından kullanılmasa da hizmet çalışanı etkinleştirildiğinde konsola bir mesaj yazdıracak başlangıç kodu içerir.

    Hizmet çalışanı bildirim aldığında bunları işlemek için public/service-worker.js dosyasına kod eklersiniz.

Hizmet çalışanını kaydetme

Bu adımda, kullanıcı uygulama kullanıcı arayüzünde Hizmet çalışanını kaydet'i tıkladığında çalışan kodunu yazacaksınız. Bu kod, public/service-worker.js hizmet işçisi olarak kaydeder.

  1. Yerleşik Glitch düzenleyicisinde public/index.js öğesini açın. 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'ün, vaatleri daha kolay işlemek için async function beyanını kullandığını unutmayın. Bu sayede, Promise değerinin çözüldüğü await değerini alabilirsiniz. Örneğin, yukarıdaki işlev kullanıcı arayüzünü güncellemeden önce bir service worker kaydının sonucunu bekler. Daha fazla bilgi için MDN'deki await sayfasına bakın.

  2. Kullanıcı artık bir hizmet işçisi kaydedebildiğinden, hizmet işçisi kayıt nesnesinin referansını 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 almanın biraz daha kolay olmasını sağlar.

  • Hizmet çalışanı kaydı işlevini tamamlamak için hizmet çalışanının kaydını iptal edecek kod 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.

Hizmet çalışanına bildirim gönderme

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

Yerleşik Glitch düzenleyicisinde public/index.js dosyası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 kod şu işlemleri yapar:

  • sendNotification asynkron bir işlev olduğundan hizmet çalışanı kaydına referans almak için await'u kullanabilirsiniz.

  • Servis çalışanının postMessage yöntemi, uygulamadan servis çalışanına veri gönderir. Daha fazla bilgi için postMessage ile ilgili MDN belgelerine bakın.

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

Hizmet çalışanında bildirimleri işleme

Bu adımda, hizmet çalışanına gönderilen mesajları işleyen ve kullanıcıya bildirim gösteren kod yazarsınız.

Yerleşik Glitch düzenleyicisinde public/service-worker.js öğesini açın. 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);
  });
});

Aşağıda kısa bir açıklama verilmiştir:

  • self, hizmet çalışanının kendisine bir referanstır.

  • Bildirimlerin gösterilmesi artık hizmet çalışanı tarafından yönetiliyor olsa da kullanıcıdan bildirim izni almak ana uygulama kullanıcı arayüzünün sorumluluğundadır. İzin verilmezse showNotification tarafından döndürülen söz reddedilir. Yukarıdaki kodda, yakalanmayan Promise ret hatasını önlemek ve bu hatayı biraz daha düzgün bir şekilde işlemek için bir catch bloğu kullanılmaktadır.

Sorun yaşıyorsanız tamamlanmış kod için glitch.com/edit/#!/codelab-notifications-service-worker-completed adresine bakın.

Bu serinin bir sonraki codelab'ine geçin: Push bildirim sunucusu oluşturma.