JavaScript

Web App: Service Workers Nedir?

Güncelleme:
Single Page Application (SPA) başlıklı yazının ardından, mobil uygulamalardan aşina olduğumuz performans ve kullanıcı deneyimi yaklaşımlarını bir adım daha öteye götüren Progressive Web App (PWA) ...
GÖRSEL
Single Page Application (SPA) başlıklı yazının ardından, mobil uygulamalardan aşina olduğumuz performans ve kullanıcı deneyimi yaklaşımlarını bir adım daha öteye götüren Progressive Web App (PWA) kullanımlarına değinmek istiyorum. Ancak, konu öncesinde, 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.Service Worker

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/ya 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.

Neden Service Worker Kullanmalıyız?

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.

Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.