Web çalışanları ve hizmet çalışanlarının sitenizin performansını nasıl artırabileceği ve web çalışanı ile hizmet çalışanını ne zaman kullanmanız gerektiği.
Bu genel bakışta, web çalışanlarının ve hizmet çalışanlarının web sitenizin performansını nasıl artırabileceği ve web çalışanı ile hizmet çalışanı arasındaki farklar açıklanmaktadır. Pencere ve hizmet çalışanı iletişimiyle ilgili belirli kalıplar için bu serinin geri kalanına göz atın.
Çalışanlar web sitenizi nasıl iyileştirebilir?
Tarayıcı, bir web sayfasındaki tüm JavaScript'i çalıştırmak ve sayfayı oluşturma ile çöp toplama gibi görevleri gerçekleştirmek için tek bir iş parçacığı (ana iş parçacığı) kullanır. Aşırı JavaScript kodu çalıştırmak ana ileti dizisini engelleyebilir, tarayıcının bu görevleri gerçekleştirmesini geciktirebilir ve kötü bir kullanıcı deneyimine yol açabilir.
iOS/Android uygulama geliştirmede, uygulamanın ana iş parçacığının kullanıcı etkinliklerine yanıt verebilmesi için işlemleri ek iş parçacıklarına aktarmak yaygın bir yöntemdir. Hatta Android'in en yeni sürümlerinde ana iş parçacığını çok uzun süre engellemek uygulamanın kilitlenmesine neden olur.
Web'de JavaScript, tek bir iş parçacığı kavramı üzerine tasarlanmıştır ve uygulamalarda bulunan çoklu iş parçacığı modelini (ör. paylaşılan bellek) uygulamak için gereken özelliklere sahip değildir.
Bu sınırlamalara rağmen, arka plan iş parçacıklarında komut dosyalarını çalıştırmak için çalışanlar kullanılarak web'de benzer bir desen elde edilebilir. Bu sayede, ana iş parçacığına müdahale etmeden görevler gerçekleştirilebilir. Worker'lar, paylaşılan bellek olmadan ayrı bir ileti dizisinde çalışan tam bir JavaScript kapsamıdır.
Bu yayında, iki farklı çalışan türü (web çalışanları ve hizmet çalışanları), bunların benzerlikleri ve farklılıkları ile üretim web sitelerinde kullanımlarıyla ilgili en yaygın kalıplar hakkında bilgi edineceksiniz.
Web işçileri ve hizmet çalışanları
Benzerlikler
Web çalışanları ve hizmet çalışanları, web sitelerinin kullanabileceği iki çalışan türüdür. Bu iki türün ortak özellikleri vardır:
- Her ikisi de ikincil bir iş parçacığında çalışır. Bu sayede JavaScript kodu, ana iş parçacığını ve kullanıcı arayüzünü engellemeden yürütülebilir.
WindowveDocumentnesnelerine erişimleri olmadığından DOM ile doğrudan etkileşime giremezler ve tarayıcı API'lerine sınırlı erişimleri vardır.
Farklılıklar
Web çalışanıyla yapılabilecek çoğu şeyin hizmet çalışanıyla da yapılabileceği ve bunun tersinin de geçerli olduğu düşünülebilir ancak aralarında önemli farklar vardır:
- Service worker'lar, web worker'lardan farklı olarak ağ isteklerini (
fetchetkinliği aracılığıyla) yakalamanıza ve Push API etkinliklerini arka planda (pushetkinliği aracılığıyla) dinlemenize olanak tanır. - Bir sayfa birden fazla web çalışanı oluşturabilir ancak tek bir hizmet çalışanı, kaydedildiği kapsamdaki tüm etkin sekmeleri kontrol eder.
- Web çalışanı, ait olduğu sekmenin kullanım ömrüne sıkı bir şekilde bağlıyken hizmet çalışanının yaşam döngüsü bundan bağımsızdır. Bu nedenle, bir web çalışanın çalıştığı sekmenin kapatılması, çalışanı sonlandırır. Hizmet çalışanı ise site açıkken etkin sekme olmasa bile arka planda çalışmaya devam edebilir.
Kullanım alanları
Her iki çalışan türü arasındaki farklar, hangi durumlarda birini veya diğerini kullanmak isteyebileceğinizi gösterir:
Web worker'ların kullanım alanları, kullanıcı arayüzünün engellenmesini önlemek için genellikle işin (ör. yoğun hesaplamalar) ikincil bir işleme aktarılmasıyla ilgilidir.
- Örnek: PROXX adlı video oyununu geliştiren ekip, kullanıcı girişleri ve animasyonlarla ilgilenmek için ana iş parçacığını mümkün olduğunca boş bırakmak istiyordu. Bunu yapmak için oyun mantığını ve durum bakımını ayrı bir iş parçacığında çalıştırmak üzere web işçilerini kullandılar.
Service worker görevleri genellikle ağ proxy'si olarak hareket etme, arka plan görevlerini işleme ve önbelleğe alma ve çevrimdışı gibi işlemlerle daha fazla ilgilidir.
Örnek: Bir podcast PWA'sında, kullanıcıların bölümleri indirerek internet bağlantısı olmadan dinlemesine izin vermek isteyebilirsiniz. Bu amaçla bir hizmet çalışanı ve özellikle Background Fetch API kullanılabilir. Bu sayede, kullanıcı bölüm indirilirken sekmeyi kapatırsa görev kesintiye uğramaz.
Araçlar ve kitaplıklar
Pencere ve çalışan iletişimi, farklı alt düzey API'ler kullanılarak uygulanabilir. Neyse ki bu süreci soyutlayan ve en yaygın kullanım alanlarını ele alan kitaplıklar vardır. Bu bölümde, sırasıyla pencere ile web çalışanları ve hizmet çalışanları arasındaki iletişimi sağlayan iki tanesini ele alacağız: Comlink ve Workbox.
Comlink
Comlink, Web Workers kullanan web siteleri oluştururken birçok temel ayrıntıyı ele alan küçük (1,6 KB) bir RPC kitaplığıdır. PROXX ve Squoosh gibi web sitelerinde kullanılmıştır. Motivasyonlarının ve kod örneklerinin bir özetini burada bulabilirsiniz.
Workbox
Workbox, servis çalışanlarını kullanan web siteleri oluşturmak için popüler bir kitaplıktır. Önbelleğe alma, çevrimdışı, arka planda senkronizasyon gibi konularda bir dizi en iyi uygulamayı paketler. workbox-window modülü, hizmet çalışanı ile sayfa arasında mesaj alışverişi yapmanın kolay bir yolunu sunar.
Sonraki adımlar
Bu serinin geri kalanında pencere ve hizmet çalışanı iletişimiyle ilgili kalıplara odaklanılmaktadır:
- Zorunlu önbelleğe alma kılavuzu: Kaynakları önceden önbelleğe almak için sayfadan bir hizmet çalışanı çağırma (ör. önceden getirme senaryolarında).
- Yayın güncellemeleri: Önemli güncellemeler (ör. web sitesinin yeni bir sürümü kullanıma sunuldu) hakkında bilgi vermek için sayfayı service worker'dan çağırma.
- İki yönlü iletişim: Bir görevi (ör. büyük bir indirme işlemi) bir servis çalışanına devretme ve sayfanın ilerleme durumu hakkında bilgilendirilmesini sağlama.
Pencere ve web çalışanı iletişimiyle ilgili kalıplar için şu makaleyi inceleyin: JavaScript'i tarayıcının ana iş parçacığı dışında çalıştırmak için web çalışanlarını kullanma.