Bazı web sitelerinin siz çevrimdışıyken bile nasıl çalışmaya devam ettiğini hiç merak ettiniz mi? İşin sırrı basit: Bu web sitelerinin hizmet çalışanları var.
Hizmet çalışanları, modern web uygulamalarının yerel uygulama benzeri özelliklerinin çoğunun arkasındaki kilit teknolojidir.
Hizmet Çalışanları Nelerdir?
Hizmet çalışanları uzmanlaşmış bir türdür. JavaScript web çalışanları. Servis çalışanı, biraz proxy sunucusu gibi çalışan bir JavaScript dosyasıdır. Uygulamanızdan giden ağ isteklerini yakalayarak özel yanıtlar oluşturmanıza olanak tanır. Örneğin, çevrimdışı olduklarında kullanıcıya önbelleğe alınmış dosyaları sunabilirsiniz.
Servis çalışanları, web uygulamalarınıza arka plan senkronizasyonu gibi özellikler eklemenize de izin verir.
Neden Hizmet Çalışanları?
Web geliştiricileri, uzun süredir uygulamalarının yeteneklerini genişletmeye çalışıyor. Servis çalışanları gelmeden önce, bunu mümkün kılmak için çeşitli çözümler kullanabilirsiniz. Özellikle dikkate değer bir tanesi, kaynakları önbelleğe almayı kolaylaştıran AppCache idi. Ne yazık ki, çoğu uygulama için pratik olmayan bir çözüm haline getiren sorunları vardı.
AppCache iyi bir fikir gibi görünüyordu çünkü gerçekten kolayca önbelleğe alınacak varlıkları belirlemenize izin veriyordu. Ancak, yapmaya çalıştığınız şey hakkında birçok varsayımda bulundu ve ardından uygulamanız bu varsayımları tam olarak takip etmediğinde korkunç bir şekilde bozuldu. Jake Archibald'ın kitabını okuyun (maalesef başlıklı ama iyi yazılmış) Uygulama Önbelleği Bir Douchebag daha fazla ayrıntı için. (Kaynak: MDN)
Servis çalışanları, AppCache gibi teknolojilerin dezavantajları olmadan, web uygulamalarının sınırlamalarını azaltmaya yönelik mevcut girişimdir.
Servis Çalışanları için Kullanım Örnekleri
Peki servis çalışanları tam olarak ne yapmanıza izin veriyor? Hizmet çalışanları, yerel uygulamaların özelliği olan özellikleri web uygulamanıza eklemenize olanak tanır. Servis çalışanlarını desteklemeyen cihazlarda da normal bir deneyim sağlayabilirler. Bunun gibi uygulamalara bazen denir Aşamalı Web Uygulamaları (PWA'lar).
Hizmet çalışanlarının mümkün kıldığı bazı özellikler şunlardır:
- Kullanıcının artık internete bağlı olmadığında uygulamayı (veya en azından bir kısmını) kullanmaya devam etmesine izin verme. Hizmet çalışanları, isteklere yanıt olarak önbelleğe alınmış varlıklar sunarak bunu başarır.
- Chromium tabanlı tarayıcılarda, bir web uygulamasının yüklenebilir olması için gereksinimlerden biri bir hizmet çalışanıdır.
- Web uygulamanızın anında iletme bildirimlerini uygulayabilmesi için hizmet çalışanları gereklidir.
Bir Hizmet Çalışanının Yaşam Döngüsü
Hizmet çalışanları, bir sitenin tamamına veya site sayfalarının yalnızca bir kısmına yönelik istekleri kontrol edebilir. Belirli bir web sayfasında yalnızca bir etkin hizmet çalışanı olabilir ve tüm hizmet çalışanlarının olay tabanlı bir yaşam döngüsü vardır. Bir hizmet çalışanının yaşam döngüsü genellikle şöyle görünür:
- İşçinin kaydı ve indirilmesi. Bir servis çalışanının ömrü, bir JavaScript dosyası onu kaydettiğinde başlar. Kayıt başarılı olursa, hizmet çalışanı indirir ve ardından özel bir iş parçacığı içinde çalışmaya başlar.
- Servis çalışanı tarafından kontrol edilen bir sayfa yüklendiğinde, servis çalışanı bir 'kurulum' olayı alır. Bu her zaman bir hizmet çalışanının aldığı ilk olaydır ve bu olay için çalışanın içinde bir dinleyici ayarlayabilirsiniz. 'install' olayı genellikle hizmet çalışanının ihtiyaç duyduğu kaynakları almak ve/veya önbelleğe almak için kullanılır.
- Servis çalışanı yüklemeyi bitirdikten sonra bir 'etkinleştirme' olayı alır. Bu olay, çalışanın önceki hizmet çalışanları tarafından kullanılan gereksiz kaynakları temizlemesine olanak tanır. Bir servis çalışanını güncelliyorsanız, activate olayı yalnızca bunu yapmak güvenli olduğunda tetiklenir. Bu, hizmet çalışanının eski sürümünü kullanan yüklü sayfaların olmamasıdır.
- Bundan sonra, hizmet çalışanı, başarıyla kaydedildikten sonra yüklenen tüm sayfalar üzerinde tam denetime sahip olur.
- Yaşam döngüsünün son aşaması, hizmet çalışanı kaldırıldığında veya daha yeni bir sürümle değiştirildiğinde oluşan artıklıktır.
JavaScript'te Service Workers Nasıl Kullanılır?
Hizmet Çalışanı API'si (MDN), JavaScript'te hizmet çalışanları oluşturmanıza ve bunlarla etkileşime geçmenize olanak tanıyan arabirimi sağlar.
Hizmet çalışanları öncelikle ağ istekleri ve diğer eşzamansız olaylarla ilgilenir. Sonuç olarak, hizmet çalışanı API'si, Sözler ve eşzamansız programlama.
Bir servis çalışanı oluşturmak için yapmanız gereken ilk şey, navigator.serviceWorker.register() yöntem. İşte böyle görünebilir:
eğer ('hizmetİşçi' gezginde) {
navigator.serviceWorker.register('/sw.js').then(işlev(kayıt){
konsol.log('Hizmet çalışanı kaydı başarılı oldu:', kayıt);
}).catch((hata) => { konsol.log('Servis çalışanı kaydı başarısız oldu:', hata); });
} başka {
konsol.log('Servis çalışanları desteklenmez.');
}
En dıştaki if bloğu, özellik algılamayı gerçekleştirir. Servis çalışanı ile ilgili kodun yalnızca servis çalışanlarını destekleyen tarayıcılarda çalışmasını sağlar.
Ardından, kod çağırır Kayıt ol yöntem. Bunu, kaydetmesi ve indirmesi için hizmet çalışanına (sitenin kaynağına göre) iletir. bu Kayıt ol yöntem ayrıca, çalışan tarafından kontrol edilen sayfaları sınırlamak için kullanılabilen, kapsam adı verilen isteğe bağlı bir parametreyi de kabul eder. Hizmet çalışanları, varsayılan olarak bir uygulamanın tüm sayfalarını kontrol eder. bu Kayıt ol yöntemi, kaydın başarılı olup olmadığını gösteren bir Söz döndürür.
Söz çözülürse, hizmet çalışanı başarıyla kaydedildi. Kod daha sonra kayıtlı hizmet çalışanını temsil eden bir nesneyi konsola yazdırır.
Kayıt işlemi başarısız olursa, kod hatayı yakalar ve konsola kaydeder.
Ardından, hizmet çalışanının kendisinin nasıl görünebileceğine ilişkin basitleştirilmiş bir örnek:
self.addEventListener('Yüklemek', (olay) => {
event.waitUntil(yeniSöz vermek((çöz, reddet) => {
konsol.log("kurulum işleri yapmak")
çözmek()
}))
konsol.log("Servis çalışanı yüklemeyi tamamladı")
})self.addEventListener('etkinleştirmek', (olay) => {
event.waitUntil(yeniSöz vermek((çöz, reddet) => {
konsol.log("temizlik işleri yapıyor!")
çözmek()
}))
konsol.log('aktivasyon yapıldı!')
})
self.addEventListener('gidip getirmek', (olay) => {
konsol.log("istek ele geçirildi", Etkinlik)
});
Bu demo hizmet çalışanının kendisine karşı kayıtlı üç olay dinleyicisi vardır. 'install' olayı, 'activate' olayı ve 'getirme' olayı için bir tane var.
İlk iki dinleyicinin içinde kod, kadar bekleyin yöntem. Bu yöntem bir Sözü kabul eder. Görevi, hizmet çalışanının bir sonraki olaya geçmeden önce Sözün çözülmesini veya reddetmesini bekleyeceğinden emin olmaktır.
Getirme dinleyicisi, hizmet çalışanının kontrol ettiği bir kaynak için bir istek yapıldığında tetiklenir.
Bir hizmet çalışanı tarafından kontrol edilen kaynaklar, kontrol ettiği tüm sayfaları ve bu sayfalarda başvurulan tüm varlıkları içerir.
Servis Çalışanlarıyla Web Uygulamalarınızı Geliştirin
Hizmet çalışanları, benzersiz bir amaca hizmet eden özel bir tür web çalışanıdır. Çevrimdışı uygulama erişimi gibi özellikleri etkinleştirmek için ağ isteklerinin önünde otururlar. Hizmet çalışanlarını bir web uygulamasında kullanmak, kullanıcı deneyimini büyük ölçüde iyileştirebilir. Service Worker API'sini kullanarak hizmet çalışanları oluşturabilir ve onlarla etkileşim kurabilirsiniz.
