Web çalışanlarının ve hizmet çalışanlarının sitenizin performansını nasıl iyileştirebileceği ve web çalışanı ile hizmet çalışanı arasında ne zaman hangisinin kullanılacağı.
Bu genel bakış, web işçilerinin ve hizmet işçilerinin web sitenizin performansını nasıl iyileştirebileceğini ve web işçisinin ne zaman, hizmet işçisinin ne zaman kullanılacağını açıklar. Pencere ve servis çalışanı iletişiminin 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 ve çöp toplama gibi görevleri gerçekleştirmek için tek bir iş parçacığı (ana iş parçacığı) kullanır. Fazla miktarda 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 verebilecek durumda kalmasını sağlamak için yaygın olarak kullanılan bir yöntem, işlemleri ek iş parçacıklarına aktarmaktır. Android'in en son sürümlerinde ana mesaj dizisini çok uzun süre engellemek uygulamanın kilitlenmesine neden olur.
Web'de JavaScript, tek bir iş parçacığı kavramı etrafında tasarlanmıştır ve uygulamalarda bulunan çok iş parçacıklı bir model uygulamak için gereken özelliklerden (ör. paylaşılan bellek) yoksundur.
Bu sınırlamalara rağmen, web'de arka plan iş parçacıklarında komut dosyalarını çalıştırmak için iş parçacıları kullanılarak benzer bir model elde edilebilir. Bu sayede, ana iş parçacısını etkilemeden görevleri gerçekleştirebilirler. İşçiler, paylaşılan bellek olmadan ayrı bir iş parçacığında çalışan bir JavaScript kapsamıdır.
Bu yayında, iki farklı işleyici türü (web işleyiciler ve hizmet işleyiciler), bunların benzerlikleri ve farklılıkları ve bunları üretim web sitelerinde kullanmayla ilgili en yaygın kalıplar hakkında bilgi edineceksiniz.
Web işçileri ve hizmet işçileri
Benzerlikler
Web çalışanları ve hizmet çalışanları, web sitelerinin kullanabileceği iki çalışan türüdür. Bu iki yöntemin bazı ortak özellikleri vardır:
- Her ikisi de ikincil bir iş parçacığında çalışır. Böylece JavaScript kodu, ana iş parçacığı ve kullanıcı arayüzünü engellemeden yürütülebilir.
WindowveDocumentnesnelerine erişimleri olmadığından doğrudan DOM ile etkileşim kuramaz ve tarayıcı API'lerine sınırlı erişimleri vardır.
Farklılıklar
Bir web çalışanına devredilebilir çoğu şeyin hizmet çalışanında da yapılabileceği ve bunun tersi de geçerli olabileceği düşünülebilir ancak aralarında önemli farklılıklar vardır:
- Web işleyicilerinin aksine hizmet işleyicileri, ağ isteklerini (
fetchetkinliği aracılığıyla) durdurmanıza ve arka planda Push API etkinliklerini (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 kapsam 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. Hizmet çalışanının yaşam döngüsü ise sekmeden bağımsızdır. Bu nedenle, bir web çalışanının çalıştığı sekme kapatıldığında çalışan sonlandırılır. Hizmet çalışanları ise sitede etkin sekme olmasa bile arka planda çalışmaya devam edebilir.
Kullanım alanları
Bu iki çalışan türü arasındaki farklar, hangi durumlarda birini diğerine tercih edebileceğinizi gösterir:
Web işleyicilerinin kullanım alanları genellikle kullanıcı arayüzünün engellenmesini önlemek için işleri (ör. ağır hesaplamalar) ikincil bir iş parçacığına aktarmayla ilgilidir.
- Örnek: PROXX video oyununu geliştiren ekip, kullanıcı girişi ve animasyonlarla ilgilenmek için ana mesaj dizisini mümkün olduğunca boş bırakmak istedi. Bunu başarmak 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.
Hizmet çalışanı görevleri genellikle ağ proxy'si olarak hareket etme, arka plan görevlerini işleme ve önbelleğe alma ve çevrimdışı gibi konularla daha ilgilidir.
Örnek: Podcast PWA'da, kullanıcıların bölümleri indirerek internet bağlantısı olmadan dinlemesine izin verilebilir. Bu amaçla bir hizmet çalışanı ve özellikle Arka Planda Getirme API'si kullanılabilir. Böylece, bölüm indirilirken kullanıcı sekmeyi kapatırsa görevin kesintiye uğraması gerekmez.
Araçlar ve kitaplıklar
Pencere ve işleyici 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 mevcut. Bu bölümde, sırasıyla web işçilerine ve hizmet işçilerine pencere bağlama işlemlerini yapan ikisini ele alacağız: Comlink ve Workbox.
Comlink
Comlink, Web İşleyicileri kullanan web siteleri oluştururken birçok temel ayrıntıyı ele alan küçük (1.6k) bir RPC kitaplığıdır. PROXX ve Squoosh gibi web sitelerinde kullanılmıştır. Bu değişikliğin nedenlerini ve kod örneklerini burada bulabilirsiniz.
Workbox
Workbox, servis çalışanlarını kullanan web siteleri oluşturmak için kullanılan popüler bir kitaplıktır. Bu modül, önbelleğe alma, çevrimdışı, arka plan senkronizasyonu gibi konularla ilgili bir dizi en iyi uygulamayı paketler. workbox-window modülü, hizmet çalışanı ile sayfa arasında mesaj alışverişi yapmanın uygun bir yolunu sağlar.
Sonraki adımlar
Bu serinin geri kalanı, pencere ve hizmet çalışanı iletişimi kalıplarına odaklanır:
- Zorunlu önbelleğe alma kılavuzu: Kaynakları önceden önbelleğe almak için sayfadan bir hizmet çalışanı çağırma (ör. ön getirme senaryolarında).
- Güncellemeleri yayınlama: Önemli güncellemeler (ör. web sitesinin yeni bir sürümü kullanıma sunuldu) hakkında bilgi vermek için sayfayı hizmet çalışanından çağırma.
- İki yönlü iletişim: Bir görevi servis çalışanına (ör. büyük boyutlu bir indirme) delege etme ve sayfayı ilerleme durumu hakkında bilgilendirme.
Pencere ve web işleyici iletişimi kalıpları için JavaScript'i tarayıcının ana iş parçacığında çalıştırmak için web işleyicileri kullanma başlıklı makaleyi inceleyin.