Web App: Service Workers Nedir?

PWA’nın yapısal olarak parçası olan ve önemli bir görev üstlenen JavaScript Service Workers için ayrı bir yazı yazmaya karar verdim. O halde, vakit kaybetmeden, service worker’ın ne olduğu ve ne amaçla kullanıldığına dair detaylara geçelim.

JavaScript Service Workers

Service Worker, tarayıcının görüntülenen web sitesinden bağımsız olarak arka planda çalıştırabildiği JavaScript komutudur. Client side proxy olarak da ifade edilebilir. Tarayıcı (modern tarayıcılar) arka planında ve web sitesinden bağımsız olması web sitesine erişebileceği yeni yetenekler (service worker API¹) sağlar. Bir service worker adından da anlaşılacağı üzere bir JavaScript Worker² ve yetenekleri belirli bir çerçeve dahilinde tanımlıdır. Örneğin, DOM‘a erişemezler, doğrudan kullanıcı etkinliklerine müdahil olamazlar. Yukarıdaki anlatımı maddelerle ifade etmek gerekirse;

• Tarayıcı üzerinden işler (Chrome³, Firefox⁴, Opera⁵ ve Microsoft Edge⁶ tarafından desteklenmektedir),
• Bir dizi JavaScript işleminden oluşur,
• Https bağlantısı gerektirir (localhost kullanımında gerekmez).

Gelelim Service Worker ile neler yapabileceğimize.

Bir websitesinin internet bağlantısının kesildiği (offline) bir durumda ziyaretçinin web sayfası deneyiminin kesintiye uğramadan devam etmesi, web sayfasında gerçekleştirdiği etkinliklerin kayıt altına alınması ve internet bağlantısının sağlandığı (online) durumda sunucuya bu işlemlerin iletilmesi (arkaplan senkronizasyonu / background sync) sağlanabilir. Anlık bildirimler (push notification) ile browser üzerinden kullanıcılara bildirimler gönderilebilir. Sunulan güçlü caching yapısı ile performans iyileştirmeleri gerçekleştirilebilir.

Service Worker’ın Yaşam Döngüsü

Service Worker’ın görüntülenen web sayfasından bağımsız bir şekilde işlediğinin ve bu sayede sunulan yeteneklerin web sayfasında kullanılabildiğinin tekrar altını çizmek istiyorum. Çünkü, sunulan bu yetenekleri web sayfasında kullanabilmemiz için bazı tanımlamalar yapmamız gerekiyor.

Öncelikli işlemimiz, web sayfasının bir service worker ile işbirliği içerisinde olduğunun belirtilmesi. Bu amaçla service worker’ı kayıt (register()) etmeliyiz. Bu sayede tarayıcı tarafındaki yeteneklere erişebiliriz. Kayıt işlemi yenilenen bir durum değildir, ziyaretçinin bir sonraki ziyaretinde service worker aktifleşmiş olacaktır.

Service Worker olarak işleme alınacak bir JavaScript dosyası oluşturmamız gerekmekte. Adına serviceworker diyelim.

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

Yukarıdaki kodu entry point’e (app.js, main.js veya index.js vb.) eklediğimizde, ilk olarak tarayıcının service worker desteği sunup sunmadığı kontrol edilir. Destek sunuluyor ise register işlemi gerçekleştirilir. Register sonucunda console üzerinden Service Worker registered! mesajı iletilir.

Bir sonraki süreç service worker’ın kurulum (install) aşamasından oluşuyor. Bu süreçte veriler önbelleğe (cache) alınır. İnternet erişiminin sağlanamaması durumunda işlemler tarayıcı tarafından önbelleğe alınan bu veriler aracılığıyla sürdürülür.

self.addEventListener("install", function(event) {
    console.log("[Service Worker] Installing Service Worker...");
});

Önbellekleme tekrarlanan bir süreçten oluşur ve bağlantı kontrolü sağlandığında yenilenir, bağlantı sağlanana kadar kontroller tekrarlanır. Bu süreçte farklı işlemler yürütmek amacıyla Listener kullanılabilir. Unutmadan, service worker dosyasındaki bir değişiklik ziyaretçilerin tarayıcıları tarafından fark edilir ve bu değişikliğe istinaden service worker güncellemesi (update) yapılır.

Install sonrasında Activate işlemi gerçekleştirilir. Artık service worker çalışır haldedir. Listener ile bu süreçte farklı işlemler ele alınabilir.

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

Eğer service worker herhangi bir işlem yapmıyor ise Idle durumuna geçer. Service worker işleyişini maddelerle özetleyelim:

• Service worker tanımlanır ve tarayıcı tarafından algılanır.
• Tarayıcı yükleme işlemini yapar, verileri bellekler ve bir hata oluşmamışsa service worker’ı aktifleştirir (activate).
• İşlem yapılmıyor ise Idle durumuna geçer ve ihtiyaç duyulduğunda tekrar başlatılır.

Bu işlemlerin ardından istersek service worker’ı sonlandırabilir ve/veya postMessage (postMessage()) ile gönderilmiş mesajları yanıtlayarak, kontrol edilen sayfalarla iletişime geçilebilir. Bu sayfalar da gerektiğinde DOM‘u değiştirebilir.

Service Worker Kullanımı

Farklı bölümlerde de ifade ettiğim üzere, bağlantı kesilmesi gibi durumlarda kullanıcıyı deneyiminin sekteye uğramaması service worker’ın sunduğu en önemli avantaj. Sonrasında, tercihlere göre bildirim gönderimi ve performans artışı ifade edilebilir. Diğer yandan, service worker desteği sunan bir web sayfası bir uygulama gibi hareket edebilir. Bir bildirim ile (install banner) akıllı telefon ekranına (Add to Home Screen) icon olarak eklenebilir ve bu icon tıklandığında tıpkı bir mobil uygulama gibi adres barı olmaksızın (fullscreen) gösterebilir ve ekranlar (splash screen) arasında geçiş imkanı sunabilirsiniz. Aşağıda tüm bu süreci özetleyen, Google Chrome Developers tarafından yayınlanmış bir videoyu iletiyorum.

Ayrıca, internet bağlantısı kontrolü farklı süreçler için de kullanılabilir ve bu sayede ziyaretçilere özelleştirilmiş mesajlar (veya önbelleğe alınmış farklı içerikler) iletilebilir. Gelecekte service worker’ların, periyodik senkronizasyon veya coğrafi sınır çizme gibi diğer özellikleri de destekleyeceği belirtilmektedir.

Dikkat Edilmesi Gerekenler

Service worker’lar web uygulamaları geliştirilirken bazı ek gereksinimlerin de sürece dahil edilmesini gerektirirler. Bu nedenle, uygulamanın tamamını bir HTML dizesine sığdırmak yerine Ajax stili işlemler tercih edilebilir. Böylelikle, sürekli önbelleğe alınan ve internet bağlantısının kesildiği durumlarda da başlatılabilen bir kabuğa ve düzenli olarak yenilenip ayrı olarak yönetilebilen içeriğe sahip olunabilir.

PWA ve service worker ile ilgili gelişmeler için aşağıdaki kaynaklara göz atabilirsiniz.

• Service Workers: an Introduction
• The Basics of Web Workers
• Service Worker’lara giriş
• Service Worker API