Çalışanlara genel bakış

Web çalışanlarının ve Service Worker'ların sitenizin performansını nasıl iyileştirebileceği, hizmet çalışanı yerine web çalışanının ne zaman kullanılması gerektiği.

Andrew Guan
Andrew Guan
Demián Renzulli
Demián Renzulli

Bu genel bakışta, web çalışanlarının ve Service Worker'ların web sitenizin performansını nasıl iyileştirebileceği ve ne zaman hizmet çalışanı yerine web çalışanının kullanılacağı açıklanmaktadır. Belirli pencere ve hizmet çalışanı iletişim kalıpları için bu serinin geri kalanına göz atın.

Tarayıcı, bir web sayfasındaki tüm JavaScript'i çalıştırmak ve aynı zamanda sayfayı oluşturmak ve atık toplama işlemi gerçekleştirmek gibi görevleri gerçekleştirmek için tek bir iş parçacığı (ana iş parçacığı) kullanır. Aşırı sayıda JavaScript kodu çalıştırmak ana iş parçacığını engelleyerek tarayıcının bu görevleri gerçekleştirmesini geciktirebilir ve kötü bir kullanıcı deneyimine neden olabilir.

iOS/Android uygulaması geliştirmede, uygulamanın ana iş parçacığının kullanıcı etkinliklerine yanıt vermekte serbest kalmasını sağlayan yaygın bir kalıp, işlemlerin ek iş parçacığına boşaltılmasıdır. Aslında, Android'in son sürümlerinde ana iş parçacığının çok uzun süre engellenmesi, uygulamanın kilitlenmesine yol açar.

Web'de JavaScript, tek bir iş parçacığı kavramı etrafında tasarlanmıştır ve uygulamaların sahip olduğu (ör. paylaşılan bellek) bir çoklu iş parçacığı modeli uygulamak için gereken özelliklere sahip değildir.

Bu sınırlamalara rağmen web'de benzer bir kalıp, iş ortaklarının arka plan iş parçacıklarında komut dosyaları çalıştırıp görevleri ana iş parçacığına müdahale etmeden gerçekleştirmelerini sağlayarak sağlanabilir. Çalışanlar, herhangi bir paylaşılan bellek olmadan ayrı bir iş parçacığında çalışan JavaScript kapsamının tamamıdır.

Bu gönderide, iki farklı çalışan türü (web çalışanları ve hizmet çalışanları), benzerlikleri ile farklılıkları ve üretim web sitelerinde bunları kullanırken kullanılan en yaygın kalıplar hakkında bilgi edineceksiniz.

Window nesnesi ile bir web çalışanı ve Service Worker arasındaki iki bağlantıyı gösteren şema.

Web çalışanları ve hizmet çalışanları

Benzerlikler

Web çalışanları ve hizmet çalışanları, web sitelerinde kullanılabilen iki çalışan türüdür. Bazı ortak noktalar vardır:

  • Her ikisi de ikincil bir iş parçacığında çalışır ve JavaScript kodunun ana iş parçacığını ve kullanıcı arayüzünü engellemeden yürütülmesine olanak tanır.
  • Window ve Document nesnelerine erişimleri olmadığından doğrudan DOM ile etkileşimde bulunamazlar ve tarayıcı API'lerine sınırlı erişimleri vardır.

Farklılıklar

Web çalışanına yetki verilebilecek çoğu işin bir hizmet çalışanı tarafından yapılabileceği ve bunun tersinin de web çalışanına verildiği düşünülebilir. Ancak aralarında önemli farklar vardır:

  • Web çalışanlarının aksine, Service Worker'lar ağ isteklerine müdahale etmenize (fetch etkinliği aracılığıyla) ve arka planda Push API etkinliklerini dinlemenize (push etkinliği aracılığıyla) olanak tanır.
  • Bir sayfa birden fazla web çalışanı oluşturabilir ancak tek bir hizmet çalışanı, kayıtlı olduğu kapsamın altındaki tüm etkin sekmeleri kontrol eder.
  • Web çalışanının kullanım ömrü, ait olduğu sekmeye sıkı sıkıya bağlıdır ve hizmet çalışanının yaşam döngüsü ise bundan bağımsızdır. Bu nedenle, web çalışanının çalıştığı sekme kapatıldığında, Service Worker sitede etkin sekme olmasa bile arka planda çalışmaya devam edebilir.

Kullanım alanları

Her iki çalışan türü arasındaki farklılıklar, hangi durumlarda birinin birini kullanmak isteyebileceğini gösterir:

Web çalışanlarının kullanım alanları, kullanıcı arayüzünün engellenmesini önlemek için genellikle işlerin (ağır hesaplamalar gibi) ikincil bir iş parçacığına boşaltılmasıyla ilgilidir.

Pencere nesnesinden bir web çalışanına bağlantıyı gösteren şema.
  • Örnek: PROXX video oyununu geliştiren ekip, kullanıcı girişi ve animasyonlarla ilgilenmek için ana iş parçacığını olabildiğince serbest bırakmak istedi. Bu hedefe ulaşmak amacıyla, oyun mantığını ve durum yönetimini ayrı bir iş parçacığında çalıştırmak için web çalışanları kullandılar.
PROXX video oyununun ekran görüntüsü.

Service Worker görevleri genellikle ağ proxy'si rolünü üstlenme, arka plan görevlerini yönetme ve önbelleğe alma ve çevrimdışı çalışma gibi konularla ilgilidir.

PROXX video oyununun ekran görüntüsü.

Örnek: Podcast PWA'da, kullanıcıların internete bağlı değilken dinlemek için bölümlerin tamamını indirmesine izin vermek isteyebilirsiniz. Bu amaçla hizmet çalışanı, özellikle de Arka Plan Getirme API'si kullanılabilir. Bu sayede, bölüm indirilirken kullanıcı sekmeyi kapatırsa görevin kesintiye uğraması gerekmez.

Podcast PWA'nın ekran görüntüsü.
Kullanıcı arayüzü, indirme işleminin ilerlemesini gösterecek şekilde güncellenir (solda). Service Worker'lar sayesinde, sağ taraftaki tüm sekmeler kapatıldığında işlem çalışmaya devam edebilir.

Araçlar ve kitaplıklar

Pencere ve çalışan iletişimi, farklı alt düzey API'ler kullanılarak uygulanabilir. Neyse ki en yaygın kullanım alanlarıyla ilgilenen ve bu süreci soyutlayan kitaplıklar da var. Bu bölümde, web çalışanlarına ve hizmet çalışanlarına açık pencereyle ilgili iki hizmeti sırasıyla ele alacağız: Comlink ve Workbox.

PROXX video oyununun ekran görüntüsü.

Comlink, Web İşçileri kullanan web siteleri oluştururken birçok temel ayrıntıyla ilgilenen küçük (1,6 bin) bir RPC kitaplığıdır. PROXX ve Squoosh gibi web sitelerinde de kullanılmaktadır. Motivasyonlarının özetini ve kod örneklerini burada bulabilirsiniz.

Workbox

Workbox, Service Worker'lar kullanan web siteleri oluşturmak için popüler bir kitaplıktır. Önbelleğe alma, çevrimdışı ve arka plan senkronizasyonu gibi konularla ilgili bir dizi en iyi uygulamayı paket haline getirir. workbox-window modülü, Service Worker ile sayfa arasında mesaj alışverişi için pratik bir yol sağlar.

Sonraki adımlar

Bu dizinin geri kalanında pencere ve hizmet çalışanı iletişimi kalıplarına odaklanılmaktadır:

  • Zorunlu önbelleğe alma kılavuzu: Kaynakları önceden önbelleğe almak için sayfadan bir hizmet çalışanının çağrılması (ör. önceden getirme senaryolarında).
  • Güncellemeleri yayınlama: Önemli güncellemeler hakkında bilgi vermek için hizmet çalışanının sayfaya çağrı yapması (ör. web sitesinin yeni bir sürümünün olması).
  • İki yönlü iletişim: Bir hizmet çalışanına görev için yetki verme (ör. ağır bir indirme) ve sayfayı süreç hakkında bilgilendirme.

Pencere ve web çalışanı iletişim kalıpları için şu makaleye göz atın: JavaScript'i tarayıcının ana iş parçacığından çıkarmak için web çalışanlarını kullanın.