Bildirimleri yönetmek için Service Worker kullanma

Kate Jeffreys
Kate Jeffreys

Bu codelab'de hizmet çalışanı kullanacaksınız bildirimleri yönetin. Buradaki talimatlarda hizmet çalışanları ile bildirim izni isteme ve bildirim göndermeyle ilgili temel bilgiler Bildirimler hakkında bilgilerinizi tazelemek isterseniz bkz. Bildirimler API'sini kullanmaya başlama codelab'e göz atın. Service Worker'lar hakkında daha fazla bilgi için Matt Gaunt'un Service Worker'lara giriş başlıklı çalışmasına bakın.

Örnek uygulamayı remiksleyip yeni bir sekmede görüntüleyin

Bildirimler, yerleşik Glitch uygulamasından otomatik olarak engellendiği için bu sayfada uygulamayı önizleyemezsiniz. Bunun yerine aşağıdakileri yapmanız gerekir:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
  2. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.

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

Bu codelab'de çalışırken bu sayfadaki yerleştirilmiş Glitch'te yer alan kodda değişiklik yapın. Değişiklikleri görmek için yeni sekmeyi yayındaki uygulamanızla yenileyin.

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

Yeni Chrome sekmesinde yayındaki uygulamaya bakarak başlayı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.

  3. Düzeyler açılır menüsünde Bilgi seçeneğinin belirlendiğinden emin olun Filtre kutusunun işaretini kaldırın.

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

    TODO: Implement getRegistration().

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

Şimdi bu sayfadaki yerleşik Parazit'te bulunan örnek uygulamanın koduna bakalım.

  1. Yerleştirilmiş Glitch'te public/index.js şuna bakın:

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

    • requestPermission işlevi, bildirim göndermek için kullanıcıdan izin ister. Bildirimler API'sini kullanmaya başlayın codelab'ini uyguladıysanız requestPermission işlevinin burada kullanıldığını fark edeceksiniz. Tek fark, 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 Service Worker özelliklerini tespit edip uygulama kullanıcı arayüzünü günceller.

    • Komut dosyası, sayfa yüklenip ardından başlatılıncaya kadar bekler.

  2. Yerleşik Parazit'te public/service-worker.js öğesini açın.

    Adından da anlaşılacağı gibi bu dosyayı service Worker'a ekleyin.

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

    Hizmet çalışanı bildirimleri aldığında, bildirimleri işlemek için public/service-worker.js uygulamasına kod eklersiniz.

Hizmet çalışanını kaydedin

Bu adımda, 2024 yılı boyunca Kullanıcı, uygulamanın kullanıcı arayüzünde Hizmet çalışanını kaydet'i tıkladığında. Bu kod, public/service-worker.js adresini hizmet çalışanı olarak kaydeder.

  1. Yerleşik Glitch düzenleyicide public/index.js dosyasını 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 hesabının, vaatlerin işlenmesini daha kolay hale getirmek için async function beyanını kullandığını unutmayın. Bu, Promise öğesinin çözümlenen değerini await yapmanıza olanak tanır. Örneğin, yukarıdaki işlev, kullanıcı arayüzünü güncellemeden önce bir hizmet çalışanının kaydedilmesinin sonucunu bekler. Daha fazla bilgi için MDN'de await sayfasına göz atın.

  2. Kullanıcı artık bir hizmet çalışanı kaydedebilir. Bu durumda, hizmet çalışanı kayıt nesnesine yönelik bir 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, Hizmet Çalışanı API'si için geçerli hizmet çalışanı kaydını (varsa) alın. Bu sayede Service Worker kaydı için referans alma işlemi daha kolay hale gelir.

  • Service Worker kayıt 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ını kaydet ve Hizmet çalışanının kaydını iptal et düğmeleri artık çalışıyor olmalıdır.

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

Bu adımda, kullanıcı uygulamanın kullanıcı arayüzünde Bildirim gönder'i tıkladığında çalışacak kodu yazacaksınız. Bu kod bildirim oluşturur, bir 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.

Yerleşik Glitch düzenleyicide 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 şekilde işe yarar:

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

  • Hizmet çalışanının postMessage yöntemi, verileri uygulamadan hizmet çalışanına gönderir. Daha fazla bilgi için postMessage ile ilgili MDN dokümanlarına göz atın.

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

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

Bu adımda, Service Worker'a gönderilen iletileri işleyecek ve kullanıcıya bildirimler gösterecek bir kod yazacaksınız.

Yerleşik Glitch düzenleyicide public/service-worker.js dosyasını açın. Dosyanın sonuna şu 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ısa bir açıklamayı aşağıda bulabilirsiniz:

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

  • Hizmet çalışanı artık bildirimleri görüntülemeyi yönetse de kullanıcıdan bildirim izni almaktan ana uygulamanın kullanıcı arayüzü sorumludur. İzin verilmezse showNotification tarafından döndürülen taahhüt reddedilir. Yukarıdaki kod, yakalanmamış Promise reddetme hatasını önlemek ve bu hatayı biraz daha incelikle ele almak için bir catch bloku kullanır.

Takılırsanız tamamlanan kodu görmek için glitch.com/edit/#!/codelab-notifications-service-worker-completed adresine bakın.

Bu serideki bir sonraki codelab'e geçin: Push bildirimi sunucusu oluşturma.