Bazı web sitelerinin siz çevrimdışıyken bile nasıl çalışmaya devam ettiğini hiç merak ettiniz mi? İşin sırrı basit: Bu web sitelerinin hizmet çalışanları var.

Hizmet çalışanları, modern web uygulamalarının birçok yerel uygulama benzeri özelliğinin arkasındaki temel teknolojidir.

Hizmet Çalışanları Nedir?

Hizmet çalışanları, JavaScript web çalışanlarının özel bir türüdür . Hizmet çalışanı, biraz proxy sunucusu gibi çalışan bir JavaScript dosyasıdır. Uygulamanızdan giden ağ isteklerini yakalayarak özel yanıtlar oluşturmanıza olanak tanır. Örneğin, kullanıcıya çevrimdışıyken önbelleğe alınmış dosyalar sunabilirsiniz.

Hizmet çalışanları, web uygulamalarınıza arka planda eşitleme gibi özellikler eklemenize de izin verir.

Neden Servis Çalışanları?

Web geliştiricileri, uygulamalarının yeteneklerini uzun süredir genişletmeye çalışıyorlar. Servis çalışanları ortaya çıkmadan önce, bunu mümkün kılmak için çeşitli çözümler kullanabiliyordunuz. Özellikle dikkate değer olanı, kaynakları önbelleğe almayı kolaylaştıran AppCache idi. Ne yazık ki, onu çoğu uygulama için pratik olmayan bir çözüm haline getiren sorunları vardı.

AppCache iyi bir fikir gibi görünüyordu çünkü önbelleğe alınacak varlıkları gerçekten kolayca belirtmenize izin veriyordu. Ancak, yapmaya çalıştığınız şey hakkında birçok varsayımda bulundu ve ardından uygulamanız bu varsayımları tam olarak takip etmediğinde korkunç bir şekilde bozuldu. Daha fazla ayrıntı için Jake Archibald’ın (maalesef adı ama iyi yazılmış) Application Cache is a Douchebag’ini okuyun. (Kaynak: MDN )

Hizmet çalışanları, AppCache gibi teknolojinin dezavantajları olmadan web uygulamalarının sınırlamalarını azaltmaya yönelik mevcut girişimlerdir.

Servis Çalışanları için Kullanım Örnekleri

Peki servis çalışanları tam olarak ne yapmanıza izin veriyor? Hizmet çalışanları, yerel uygulamaların özelliği olan özellikleri web uygulamanıza eklemenize olanak tanır. Servis çalışanlarını desteklemeyen cihazlarda da normal bir deneyim sağlayabilirler. Bunun gibi uygulamalara bazen Aşamalı Web Uygulamaları (PWA’lar) denir .

Hizmet çalışanlarının mümkün kıldığı özelliklerden bazıları şunlardır:

Kullanıcının artık internete bağlı olmadığında uygulamayı (veya en azından bir kısmını) kullanmaya devam etmesine izin verme. Hizmet çalışanları bunu, isteklere yanıt olarak önbelleğe alınmış varlıklar sunarak başarır.

Chromium tabanlı tarayıcılarda, bir hizmet çalışanı, bir web uygulamasının yüklenebilir olması için gereksinimlerden biridir.

Servis çalışanları, web uygulamanızın push bildirimlerini uygulayabilmesi için gereklidir.

Bir Hizmet Çalışanının Yaşam Döngüsü

Servis çalışanları, sitenin tamamına veya site sayfalarının yalnızca bir kısmına yönelik istekleri kontrol edebilir. Belirli bir web sayfasında yalnızca bir etkin hizmet çalışanı olabilir ve tüm hizmet çalışanlarının olay tabanlı bir yaşam döngüsü vardır. Bir hizmet çalışanının yaşam döngüsü genellikle şöyle görünür:

İşçinin kaydı ve indirilmesi. Bir hizmet çalışanının ömrü, bir JavaScript dosyası onu kaydettiğinde başlar. Kayıt başarılı olursa, hizmet çalışanı indirir ve ardından özel bir iş parçacığında çalışmaya başlar.

Hizmet çalışanı tarafından kontrol edilen bir sayfa yüklendiğinde, hizmet çalışanı bir ‘yükleme’ olayı alır. Bu her zaman bir hizmet çalışanının aldığı ilk olaydır ve çalışanın içinde bu olay için bir dinleyici ayarlayabilirsiniz. “install” olayı genellikle hizmet çalışanının ihtiyaç duyduğu kaynakları getirmek ve/veya önbelleğe almak için kullanılır.

Hizmet çalışanı yüklemeyi bitirdikten sonra bir “etkinleştirme” olayı alır. Bu olay, çalışanın önceki hizmet çalışanları tarafından kullanılan fazla kaynakları temizlemesine olanak tanır. Bir hizmet çalışanını güncelliyorsanız, etkinleştirme olayı yalnızca bunu yapmak güvenli olduğunda tetiklenir. Bu, hizmet çalışanının eski sürümünü kullanmaya devam eden yüklenmiş sayfa kalmadığında gerçekleşir.

Bundan sonra, servis çalışanı başarıyla kaydedildikten sonra yüklenen tüm sayfaların tam kontrolüne sahip olur.

Yaşam döngüsünün son aşaması, hizmet çalışanı kaldırıldığında veya daha yeni bir sürümle değiştirildiğinde ortaya çıkan artıklıktır.

JavaScript’te Hizmet Çalışanları Nasıl Kullanılır?

Service Worker API ( MDN ), JavaScript’te hizmet çalışanları oluşturmanıza ve onlarla etkileşim kurmanıza olanak tanıyan arabirimi sağlar.

Hizmet çalışanları, öncelikle ağ istekleri ve diğer eşzamansız olaylarla ilgilenir. Sonuç olarak, hizmet çalışanı API’si Promises ve eşzamansız programlamayı yoğun bir şekilde kullanır .

Bir servis çalışanı oluşturmak için yapmanız gereken ilk şey navigator.serviceWorker.register() yöntemini çağırmaktır. İşte bunun nasıl görünebileceği:

if (‘serviceWorker’ in navigator) {

navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {

console.log(‘Service worker registration succeeded:’, registration);

}).catch((error) => { console.log(‘Service worker registration failed:’, error); });

} else {

console.log(‘Service workers are not supported.’);

}

En dıştaki if bloğu özellik algılama gerçekleştirir. Hizmet çalışanıyla ilgili kodun yalnızca hizmet çalışanlarını destekleyen tarayıcılarda çalışmasını sağlar.

Ardından, kod, kayıt yöntemini çağırır. Kaydolmak ve indirmek için servis çalışanına (sitenin kaynağına göre) yolu iletir. Kayıt yöntemi, çalışan tarafından kontrol edilen sayfaları sınırlamak için kullanılabilen kapsam adı verilen isteğe bağlı bir parametreyi de kabul eder. Servis çalışanları, bir uygulamanın tüm sayfalarını varsayılan olarak kontrol eder. Register yöntemi , kaydın başarılı olup olmadığını gösteren bir Promise döndürür.

Söz çözülürse, hizmet çalışanı başarıyla kaydolmuştur. Kod daha sonra kayıtlı hizmet çalışanını temsil eden bir nesneyi konsola yazdırır.

Kayıt işlemi başarısız olursa, kod hatayı yakalar ve konsola kaydeder.

Ardından, hizmet çalışanının kendisinin nasıl görünebileceğinin basitleştirilmiş bir örneğini burada bulabilirsiniz:

self.addEventListener(‘install’, (event) => {

event.waitUntil(new Promise((resolve, reject) => {

console.log(“doing setup stuff”)

resolve()

}))

console.log(“Service worker finished installing”)

})

self.addEventListener(‘activate’, (event) => {

event.waitUntil(new Promise((resolve, reject) => {

console.log(“doing clean-up stuff!”)

resolve()

}))

console.log(‘activation done!’)

})

self.addEventListener(‘fetch’, (event) => {

console.log(“Request intercepted”, event)

});

Bu demo hizmet çalışanının kendisine kayıtlı üç olay dinleyicisi var. “Install” olayı, “Active” olayı ve “Getirme” olayı için bir tane vardır.

İlk iki dinleyicinin içinde kod waitUntil yöntemini kullanır. Bu yöntem bir Sözü kabul eder. Görevi, hizmet çalışanının bir sonraki olaya geçmeden önce Sözün çözülmesini veya reddedilmesini beklemesini sağlamaktır.

Getirme dinleyicisi, hizmet çalışanının kontrol ettiği bir kaynak için her istek yapıldığında harekete geçer.

Bir hizmet çalışanı tarafından kontrol edilen kaynaklar, kontrol ettiği tüm sayfaları ve bu sayfalarda başvurulan tüm varlıkları içerir.

Hizmet Çalışanlarıyla Web Uygulamalarınızı Geliştirin

Hizmet çalışanları, benzersiz bir amaca hizmet eden özel bir tür web çalışanıdır. Çevrimdışı uygulama erişimi gibi özellikleri etkinleştirmek için ağ isteklerinin önünde dururlar. Hizmet çalışanlarını bir web uygulamasında kullanmak, kullanıcı deneyimini büyük ölçüde iyileştirebilir. Hizmet çalışanı API’sini kullanarak hizmet çalışanları oluşturabilir ve onlarla etkileşim kurabilirsiniz.