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.
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.
Çalışanlar web sitenizi nasıl iyileştirebilir?
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.
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.
WindowveDocumentnesnelerine 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 (
fetchetkinliği aracılığıyla) ve arka planda Push API etkinliklerini dinlemenize (pushetkinliğ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.
- Ö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.
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.
Ö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.
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.
Kombine
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.