PWA: Service Worker Nedir?

Selam,

Bir önceki yazımda Manifest’ten bahsetmiştim. Hemen şuradan ulaşabilirsiniz:

Bu yazıda ise PWA’nın ikinci olmazsa olmazlarından olan Service Worker’dan bahsedeceğim.

Ne ola bu Service Worker?

Service Worker Javascript ile yazılmış bir script’tir. Tarayıcının arkaplanında çalışır. DOM elemanlarına herhangi bir şekilde erişemez. Service Worker’ı kullanmak için uygulamanın bulunduğu serverda HTTPS kurulu olmalıdır. PWA’ya kattığı başlıca özellikler şunlardır:

  • PWA artık internet olmasa bile çalışır.
  • Server’dan gelen Push Notification’ları dinler.
  • Kullanıcının notification ile etkileşimi sonucu ne olacağını belirler.
  • Arkaplanda senkronizasyon yapar. Mesela internet yokken yollamaya çalıştığınız veriyi saklar, internet bağlantısı olduğu an yollar.
  • Uygulamadan yollanan bütün HTTP isteklerini kontrol edebilirsiniz.

Bu saydığım özelliklerin, kullandığınız tarayıcı tarafından desteklenip desteklenmediğini kontrol etmek isterseniz, şu siteyi ziyaret edebilirsiniz:


Service Worker’ın kısaca ne olduğundan bahsettik, şimdi sırada nasıl çalıştığı var.

İlk olarak, elimizde Service Worker dosyası olarak sw.js dosyası var. Bu Service Worker’ı, App’e eklememiz, diğer bir deyiş ile “Register” etmek gerekiyor. Bu yüzden aşağıdaki kodu app.js dosyasına ekliyoruz.

if("serviceWorker" in navigator) {
navigator.serviceWorker.register('/sw.js').then(function() {
console.log("Service Worker registered!");
});
} else {
console.log("Browser not supported!");
}

Bu kodun kısaca ne yaptığını anlatmak gerekirse, ilk olarak kullandığımız tarayıcının Service Worker’ı destekleyip desteklemediğini kontrol ediyoruz. Eğer destekliyor ise “Register” işlemini gerçekleştiriyoruz. Bu işlem tamamlanınca da konsola bu işlemin başarılı olduğuna dair bir mesaj yazdırıyoruz.

Register işlemi tamamlandıktan sonra gerçekleşek olan 2 adet işlem vardır:

  1. Install: Register’dan sonra ilk olarak Install işlemi yapılır. PWA’yı her açtığımızda bu işlem her defasında gerçekleşmez, son Install yapıldıktan sonra Service Worker’da değişiklik varsa Install işlemi yeniden gerçekleşir. Eğer Install işlemi ile çalıştırmak istediğiniz herhangi bir kod var ise bu işlem için bir Listener koyabiliriz:
self.addEventListener("install", function(event) {
console.log("[Service Worker] Installing Service Worker...");
});

2. Active: Install işleminden hemen sonra gerçekleşir. Bu aşama ise artık Service Worker çalışır bir haldedir. Bu aşamada çalıştırmak istediğiniz herhangi bir kod var ise bu işlem için bir Listener koyabiliriz:

self.addEventListener("activate", function(event) {
console.log("[Service Worker] Activating Service Worker...");
return self.clients.claim();
});

Bu aşamalar ile Service Worker, PWA’yı aktif bir şekilde kontrol edebilecek durumdadır. Aktif olarak herhangi bir iş yapmıyor ise “Idle” durumuna geçer.


An itibari ile elimizde Manifest ve Service Worker var. O halde “Install Banner” konusundan bahsedebiliriz.

Ekranın alt kısmında “Add To Home Screen” şeklinde bir yazı çıkıyor. Bazı tarayıcılarda(Chrome 68'den öncesi) bu yazı otomatik olarak çıkmakta iken, bazı tarayıcılarda Service Worker’a eklenen bir Listener ile manuel bir şekilde gösterilmektedir.

Yazmamız gereken Listener ise şu şekildedir:

window.addEventListener("beforeinstallprompt", function(event) {
    event.prompt();
});

Bu sayede Install Banner yazısını ekranda göstermiş olduk.


Bu konu hakkında yazacaklarım bu kadar. Umarım sizlere yardımcı olmuşumdur :)