Çalışanlara genel bakış

Bu genel bakış, web çalışanlarının ve hizmet çalışanlarının web sitenizin performansını nasıl iyileştirebileceğini ve ne zaman bir web çalışanına karşı bir hizmet çalışanının kullanılacağını açıklar. geri kalanını kontrol et Bu diziler pencere ve hizmet çalışanı iletişiminin belirli kalıpları için.

Çalışanlar web sitenizi nasıl geliştirebilir? #

Tarayıcı tek bir iş parçacığı kullanır ( ana konu) bir web sayfasındaki tüm JavaScript’i çalıştırmak ve sayfayı işlemek ve çöp toplama yapmak gibi görevleri gerçekleştirmek için. Aşırı JavaScript kodu çalıştırmak ana iş parçacığını 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ı olaylarına yanıt vermek için serbest kalmasını sağlamaya yönelik yaygın bir model, işlemleri ek iş parçacıklarına boşaltmaktır. Aslında, Android’in en son sürümlerinde, ana ileti dizisini çok uzun süre engellemek bir uygulama çökmesine yol açar.

Web’de JavaScript, tek bir iş parçacığı konsepti etrafında tasarlanmıştır ve paylaşılan bellek gibi tek bir uygulamada olduğu gibi çok iş parçacıklı bir modeli uygulamak için gereken yeteneklerden yoksundur.

Bu sınırlamalara rağmen, web’de benzer bir model, çalışanları arka plan iş parçacıklarında komut dosyaları çalıştırmak için kullanarak, ana iş parçacığına müdahale etmeden görevleri gerçekleştirmelerine izin vererek elde edilebilir. Çalışanlar, herhangi bir paylaşılan bellek olmadan ayrı bir iş parçacığında çalışan eksiksiz bir JavaScript kapsamıdır.

Bu gönderide, iki farklı işçi türü (web işçileri ve hizmet çalışanları), bunların benzerlikleri ve farklılıkları ve bunları üretim web sitelerinde kullanmanın 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 tür çalışan vardır. Bazı ortak noktaları var:

• Her ikisi de ikincil bir iş parçacığında çalışır ve JavaScript kodunun ana iş parçacığını ve kullanıcı arabirimini engellemeden yürütülmesine izin verir.
• Şuraya erişimleri yok: Window Ve Document bu nedenle doğrudan DOM ile etkileşime giremezler ve tarayıcı API’lerine sınırlı erişimleri vardır.

farklılıklar #

Bir web çalışanına devredilebilecek çoğu şeyin bir servis çalışanında veya tam tersi şekilde yapılabileceği düşünülebilir, ancak aralarında önemli farklar vardır:

• Web çalışanlarının aksine, hizmet çalışanları ağ isteklerini yakalamanıza izin verir ( fetch olayı) ve arka planda Push API olaylarını dinlemek için (aracılığıyla push etkinlik).
• Bir sayfa birden çok web çalışanı oluşturabilir, ancak tek bir hizmet çalışanı sayfanın altındaki tüm etkin sekmeleri kontrol eder. kapsam ile tescillendi.
• Web çalışanının ömrü, ait olduğu sekmeye sıkı sıkıya 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ın çalıştığı sekmeyi kapatmak onu sonlandırırken, bir hizmet çalışanı, sitede açık herhangi bir sekme olmasa bile arka planda çalışmaya devam edebilir.

Kullanım örnekleri #

Her iki işçi türü arasındaki farklar, birinin hangi durumlarda birini veya diğerini kullanmak isteyebileceğini gösterir:

Web çalışanları için kullanım örnekleri daha yaygın olarak boşaltma işiyle ilgilidir (örneğin ağır hesaplamalar) kullanıcı arabirimini engellememek için ikincil bir iş parçacığına.

• Örnek: video oyununu oluşturan ekip PROXX kullanıcı girişi ve animasyonlarla ilgilenmek için ana ileti dizisini olabildiğince serbest bırakmak istedi. Bunu başarmak için, oyun mantığını çalıştırmak ve bakımı ayrı bir iş parçacığında belirtmek için web çalışanlarını kullandılar.

Servis çalışanları görevleri genellikle daha çok bir ağ proxy’si olarak hareket etme, arka plan görevlerini yürütme ve önbelleğe alma ve çevrimdışı olma gibi şeylerle ilgilidir.

Örnek: İçinde podcast PWA’sı, kullanıcıların çevrimdışıyken dinlemek için tüm bölümleri indirmelerine izin vermek istenebilir. Bir hizmet çalışanı ve özellikle, Arka Planda Getirme API’sı bu amaçla kullanılabilir. Bu şekilde, bölüm indirilirken kullanıcı sekmeyi kapatırsa görevin kesilmesi gerekmez.

Pencere ve çalışan iletişimi, farklı alt düzey API’ler kullanılarak uygulanabilir. Neyse ki, en yaygın kullanım durumlarıyla ilgilenerek bu süreci özetleyen kitaplıklar var. Bu bölümde, sırasıyla web çalışanları ve hizmet çalışanları için pencere ile ilgilenen iki tanesini ele alacağız: İletişim Ve çalışma kutusu.

İletişim #

İletişim küçük (1.6k) RPC Web Çalışanlarını kullanan web siteleri oluştururken birçok temel ayrıntıyla ilgilenen kitaplık. Gibi web sitelerinde kullanılmıştır. PROXX Ve Squoosh. Motivasyonlarının bir özeti ve kod örnekleri bulunabilir. Burada.

çalışma kutusu #

çalışma kutusu hizmet çalışanlarını kullanan web siteleri oluşturmak için popüler bir kitaplıktır. Önbelleğe alma, çevrimdışı, arka plan senkronizasyonu vb. konularda bir dizi en iyi uygulamayı bir araya getirir. workbox-window modül, servis çalışanı ile sayfa arasında mesaj alışverişi için uygun bir yol 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ının çağrılması (örn. önceden getirme senaryolarında).
• Yayın güncellemeleri: Önemli güncellemeler hakkında bilgi vermek için servis çalışanından sayfanın aranması (örneğin, web sitesinin yeni bir sürümü mevcut).
• İki yönlü iletişim: Bir hizmet çalışanına görev atama (örn. yoğun bir indirme) ve ilerleme hakkında sayfayı bilgilendirme.

Pencere ve web çalışanı iletişimi kalıpları için göz atın: JavaScript’i tarayıcının ana iş parçacığından çalıştırmak için web çalışanlarını kullanın.