Service Worker

Service Worker, web tarayıcısında arka planda çalışan bir JavaScript dosyasıdır. Ağ isteklerini önbelleğe alabilir, çevrimdışı içerik sunabilir ve kullanıcı web sitesine aktif olarak erişmese bile push bildirimleri alıp gösterebilir. Browser Push'un temel teknik bileşenidir.

Service Worker Nedir?

Service Worker, web uygulaması ile tarayıcı arasında bir proxy katmanı olarak çalışan bir JavaScript dosyasıdır. Ana sayfa JavaScript iş parçacığından bağımsız çalışır; bu nedenle web sitesi kapalıyken bile etkin kalabilir. İki temel amaç için kullanılır: ağ isteklerini önbelleğe almak (çevrimdışı destek) ve push bildirimleri işlemek.

Service Worker'ın Browser Push bağlamındaki rolü özellikle önemlidir: push hizmetinden gelen mesajları alır ve sistem bildirimi olarak gösterir; bu işlem kullanıcı web sitesini açmadan gerçekleşebilir.

Yaşam Döngüsü

Service Worker'ın üç temel durumu vardır.

  1. Kayıt (Registration): Web sitenizin JavaScript'i navigator.serviceWorker.register('/sw.js') ile Service Worker'ı kaydeder. Tarayıcı dosyayı indirir ve ayrıştırır.
  2. Kurulum (Installation): Service Worker yükleme olayını alır. Burada genellikle önbellek doldurmak için statik varlıklar indirilir.
  3. Aktivasyon (Activation): Service Worker eski sürümlerin yerini alır ve ağ isteklerini ve push olaylarını dinlemeye başlar.

Kayıtlı bir Service Worker arka planda uykuda kalır. Bir push olayı geldiğinde tarayıcı Service Worker'ı uyandırır, olayı işler ve ardından Service Worker tekrar uykuya geçer.

Push Olaylarını İşleme

Bir push bildirimi gönderildiğinde teknik süreç şöyle işler.

  1. Uygulama sunucusu (SendSeven altyapısı veya kendi REST API çağrınız) push hizmetine imzalı bir HTTP POST isteği gönderir.
  2. Push hizmeti (Google FCM, Mozilla autopush vb.) bildirimi kayıtlı cihaza iletir.
  3. Tarayıcı, etki alanınız için kayıtlı Service Worker'ı uyandırır ve bir push olayı ateşler.
  4. Service Worker olayı dinler, yükü ayrıştırır ve self.registration.showNotification() ile bildirimi gösterir.
  5. Kullanıcı bildirimi tıkladığında Service Worker bir notificationclick olayı alır ve hedef URL'yi açar.

Kapsam ve Güvenlik

Service Worker'ın kapsamı, kayıtlı olduğu URL yoluyla sınırlandırılır. Kök dizine (/sw.js) kaydedilmiş bir Service Worker tüm site üzerinde kontrol sahibi olurken, alt dizine (/app/sw.js) kayıtlı bir Service Worker yalnızca o alt dizini kontrol eder.

Service Worker'lar güvenlik nedeniyle yalnızca HTTPS üzerinden çalışır (localhost istisnadır). Bir web push altyapısı kurmak için HTTPS zorunludur.

Web Push ile Kullanım

Web Push API ile Service Worker birlikte çalışır. Service Worker olmadan push bildirimleri çalışmaz; çünkü web sitesi kapalıyken push olaylarını alacak bir sürecin varlığı gereklidir.

SendSeven, geliştirici kılavuzlarında push bildirimleri için referans Service Worker uygulaması sunar. Bu uygulama şunları kapsar:

  • Birden fazla bildirim alanını (başlık, gövde, ikon, URL) destekleyen push olay dinleyicisi
  • Bildirimleri gruplandıran ve gürültüyü azaltan bildirim birleştirme
  • Uygulamanızın URL yapısına göre özelleştirilmiş notificationclick işleme
  • Geçersiz abonelikleri temizlemek için pushsubscriptionchange yönetimi

Hata Ayıklama

Chrome DevTools, Service Worker hata ayıklaması için kapsamlı destek sunar. Application sekmesi altındaki Service Workers bölümünde kayıtlı çalışanları görüntüleyebilir, Push olaylarını simüle edebilir ve günlük çıktılarını inceleyebilirsiniz. Bu araçlar, SendSeven Push entegrasyonunuzu geliştirme ortamında test ederken oldukça kullanışlıdır.

SendSeven ve Service Worker

SendSeven, Browser Push entegrasyonu için gerekli Service Worker kodunu ve kurulum kılavuzlarını sağlar. Etki alanınıza uygun Service Worker dosyasını yerleştirirsiniz; SendSeven Web Push API iletişimini, VAPID kimlik doğrulamasını ve abonelik yönetimini üstlenir. Push'u Reach üzerinden gönderir ya da sisteminizden doğrudan REST API çağrısı yaparsınız. Push kanalı sayfasına bakın veya fiyatlandırma bilgisi için buraya tıklayın.