Service Worker nedir?

Service Worker’lar web uygulamanızdan tamamen ayrı tarayıcının arka planda çalıştırdığı kod parçaları olarak tanımlanabilir. Biraz daha açacak olursak SW Uygulamanızın offline çalışabilmesi için gerekli kodları, notification göndermek için gerekli kodları veya uygulamanızın periyodik sync işlemlerinin yapılması için gerekli kodları barındırabilir. Yani Web uygulamanız, tarayıcı ve network arasındaki bir proxy server olarak düşünülebilir.

1. Service Worler’lar DOM’a erişebilir.
2. postMessage methodu ile veri alışverişi yapabilir.
3. Kullanılmadıklarında sonlandırılırlar.
4. Promises’ı destekler.

Service Worker aşağıdaki gibi tanımlanabilir. Tarayıcının service worker desteği var ise sayfa çalıştığında sw.js dosyası bir defa service worker olarak kayıt edilir.

// sw.js
self.addEventListener('install', function(event) {
  event.waitUntil(
    //...
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    // ...
  );
});
onmessage = function(event) {
  console.log(event.data);
};

Service worker da activate, sync, push eventlarınıda dinleyebilirsiniz. Tanımladığımız service worker’ı kayıt ediyoruz. Ve state değişimlerini takip edebiliyoruz. postMessage metodu ile service worker içerisinde bulunan onmessage metoduna veri gönderip alabiliriz.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js', {
        scope: './'
    }).then(function (registration) {
        var serviceWorker;
        if (registration.installing) {
            serviceWorker = registration.installing;
            document.querySelector('#kind').textContent = 'installing';
        } else if (registration.waiting) {
            serviceWorker = registration.waiting;
            document.querySelector('#kind').textContent = 'waiting';
        } else if (registration.active) {
            serviceWorker = registration.active;
            document.querySelector('#kind').textContent = 'active';
        }
        if (serviceWorker) {
            serviceWorker.postMessage(true);
            serviceWorker.addEventListener('statechange', function (e) {
                // logState(e.target.state);
            });
        }
    }).catch (function (error) {
        // Something went wrong during registration. The service-worker.js file
        // might be unavailable or contain a syntax error.
    });
} else {
    // The current browser doesn't support service workers.
}

Ben şimdiki projemde Service workerları kullanıcı projelerininin Client-side compile ve dependency management işlemlerini yapmada kullanıyorum.