Hizmet Çalışanı Nedir? (Tam Yaşam Döngüsü ve Kullanımlar)

Servis çalışanı, kullanıcının önbelleği kullanarak çevrimdışı göz atmasına yardımcı olur. Ayrıca anında iletme bildirimleri, arka plan senkronizasyonu ve derin platform entegrasyonu avantajları sunarlar. Service Worker, internet ve uygulama arasında bir proxy görevi görür. Ağ isteklerini engellemek ve bilgileri önbelleğe almak için bir uygulamanın arka planında çalışır.

Bir Aşamalı Web Uygulamasının (PWA) 4 ana teknik bileşeni vardır – Hizmet Çalışanları, Web Uygulaması Bildirimi, Web Simgesi ve HTTPS. Bunlar aşağıda ayrıntılı olarak açıklanmıştır: –

1. Servis Çalışanları – Verileri çevrimdışı olarak indirmeye ve getirme ve yükleme görevlerini gerçekleştirmeye yardımcı olurlar.
2. Web App Manifest- PWA hakkında meta bilgi sağlayan JSON dosyasıdır. Web uygulaması simgesi, adı ve arka plan rengi gibi bilgilere sahiptir.
3. Web Simgesi- Siteniz ana ekranda olacak, onu temsil etmek için bir çeşit simgeye ihtiyacınız var. Burada internetten indirilmiş bir logo kullandım.
4. Https- Aşamalı bir web uygulamasına sahip olmak için güvenli bir ağ üzerinden sunulması gerekir. Bu yalnızca en iyi uygulama olmakla kalmaz, aynı zamanda güvenilirlik sağlar ve aracı saldırılarını önler.

Servis Çalışanları Neden Harikadır?

Ağ Trafiğinin kralı olabilirsiniz!

Tüm web trafiğinizi yönetin ve istediğiniz her türlü değişikliği yapın. Örneğin, web sayfası yavaş bir internet bağlantısında bir CSS dosyası istediğinde, yanıt olarak düz metin gönderebilirsiniz.

Benzer şekilde, HTML isteğine yanıt olarak png dosyası gönderebilirsiniz. Her şey ağ trafiğine ve bağlantıya bağlıdır.

#1 Herhangi bir yanıtı önbelleğe alın

Servis çalışanları ile önbellek isteklerini kullanarak çevrimdışı olduğunuzda bile web sayfası içeriğine erişebilirsiniz.

#2 Push bildirimleri

Hizmet Çalışanlarını kullanarak çevrimdışı olduklarında veya web sitesinde gezinmediklerinde bile kullanıcıya bildirim gönderin.

#3 Rahatsız etmeyin

İnternet bağlantısı zayıf olsa bile Service Worker'ın sunduğu Arka Plan eşitleme fırsatı ile istediğiniz işlemi başlatabilirsiniz.

Hangi Hizmet Çalışanları yapamaz?

İyileştirme için her zaman bir alan vardır. Hizmet çalışanlarının gerçekleştiremeyeceği bazı eylemler vardır: –

#1 DOM öğelerini değiştiremezsiniz

Hizmet çalışanları, farklı bir iş parçacığı üzerinde çalıştığı için web sayfasıyla doğrudan etkileşimde bulunamaz veya DOM'a erişemez. Ancak, mesaj yoluyla pencereyle iletişim kurabilirsiniz.

#2 80 Bağlantı Noktasında çalışmıyor

HTTPS protokolünde çalışır. Ancak geliştirme sırasında localhost üzerinde çalışabilir.

#3 Servis Çalışanları Nasıl Çalışır?

Tarayıcı ve ağ arasında bir servis çalışanı bulunur. Bir proxy sunucusu gibi davranır ve kullanıcı arayüzü merkezli olmayan bir dizi görevle ilgilenir. Olaylar tarafından yönlendirilirler ve bu nedenle aktif bir tarayıcı olmadan çalışabilirler. UI'den farklı bir iş parçacığında çalıştırın. Bu, bir web sitesinin işlevselliğini geliştirmeye yardımcı olur.

Servis çalışanları, kullanılmadıklarında durur ve gerektiğinde başlar; bu, CPU ve pil boşalması üzerindeki yükün azaltılmasına yardımcı olur. API'yi önbelleğe alarak ve tüm ağ isteklerini yakalayarak çevrimdışı çalışırlar. Yalnızca çevrimdışı bir deneyime sahip olmakla kalmaz, aynı zamanda bir web sitesinin hızlı yüklenmesine de yardımcı olur.

Hizmet Çalışanları için ön koşullar nelerdir?

Service Worker'ın çalışması için HTTPS protokolü gerekir. Ancak geliştirme sırasında localhost üzerinde de çalışabilir.

Hangi tarayıcılar Service Workers'ı destekler?

Tarayıcıların çoğu artık Internet Explorer (IE) dışında Hizmet Çalışanlarını desteklemektedir.

Hangi tarayıcıların Service Workers'ı desteklediğini ayrıntılı olarak öğrenmek istiyorsanız, IsServiceWorkerReady'yi ziyaret edebilirsiniz.

Service Worker v/s Web Worker

1. Servis çalışanları ve Web çalışanları JavaScript çalışanlarıdır. Ama onların da farklılıkları var.
2. Çevrimdışı tarama, push bildirimleri ve arka plan senkronizasyonunda yardımcı olurlar. Tüm iletişim mesaj sonrası yöntemi ile yapılır.
3. Web çalışanları, karmaşık görevlerin arka planda çalışmasına ve UI Jank'i ücretsiz tutmasına izin verir. Tüm iletişim, servis çalışanları mesaj gönderme yöntemiyle yapılır.

Service Worker v/s Appcache

1. Hizmet çalışanları, üst düzey olay güdümlü bir API olan AppCache ile karşılaştırıldığında, düşük düzey olay güdümlü API'dir.
2. AppCache ile tarayıcınızın hangi kaynakları önbelleğe almasını istediğinizi belirtmeniz gerekir.
3. Servis çalışanları durumunda, olayları almak ve yanıtlarını önbelleğe almak için bir komut dosyası yazmanız gerekir.
4. Yani Servis çalışanlarının Appcache'in yeni ve geliştirilmiş versiyonu olduğunu söyleyebilirsiniz.

Hizmet Çalışanı Yaşam Döngüsü

Hizmet çalışanı yaşam döngüsünün 3 adımı vardır; Kayıt, Kurulum ve Aktivasyon.

#1 Kayıt

Bir servis çalışanı kurmak için onu arka plan sayfanıza kaydetmeniz gerekir. Servis çalışanının bir JavaScript dosyasındaki konumu hakkında tarayıcıyı bilgilendirir.

Service Worker API'nin kullanılabilir olup olmadığını kontrol etmek için aşağıdaki kodu kullanabilirsiniz. Varsa, sayfa yüklendiğinde serviceworker /sw.js kaydedilir.

 // uygulama.js
if (navigatörde 'serviceWorker') {
navigator.serviceWorker.register('/sw.js')
.then(işlev (kayıt) {
konsol.log('Hizmet çalışanı kaydedildi!');
})
.catch(işlev (hata) {
konsol.log('Kayıt başarısız!');
})
}

 // uygulama.js
if (navigatörde 'serviceWorker') {
    navigator.serviceWorker.register('/sw.js', {
        kapsam: '/blog/'
    })
    .then(işlev (kayıt) {
        konsol.log('Hizmet çalışanı kaydedildi!');
    })
    .catch(işlev (hata) {
        konsol.log('Kayıt başarısız!');
    })
}

#2 Kurulum (Kurulum Etkinliği)

Kayıt işleminin başarıyla tamamlanmasının ardından servis çalışanı betiği indirilir ve kurulum olayı başlatılır.

Service Worker yalnızca daha önce kaydedilmemişse veya komut dosyası 1 bayt bile değiştirilmişse yüklenir.

Yükleme olayı için bir geri arama tanımlayabilir ve hangi dosyaların önbelleğe alınacağına karar verebilirsiniz.

Önbellek API olayını yükleme örneği aşağıdadır: –

 // sw.js
const entityToCache = [
'/index.html',
'/hakkında.html',
'/css/app.css',
'/js/app.js',
]
self.addEventListener('kurulum', işlev (olay) {
event.waitUntil(
caches.open('staticAssetsCache').then(function (önbellek) {
geri dön cache.addAll(assetsToCache);
})
);
});

Bir etkinliği yüklemek için aşağıdaki adımları uygulamanız gerekir:-

1. Bir önbellek açın.
2. Dosyalarınızı önbelleğe alın.
3. Gerekli tüm varlıkların önbelleğe alınıp alınmadığını onaylayın.

Tüm dosyalar başarıyla önbelleğe alındıysa, başarıyla yüklendiğini söyleyebilirsiniz. Yukarıdaki dosyalardan herhangi biri indirilemezse, kurulum adımı başarısız olacaktır.

#3 Aktivasyon

Başarılı kurulumdan sonra servis çalışanı kurulu bir duruma girer. Henüz etkin değil ancak sayfanın kontrolünü mevcut hizmet görevlisinden alıyor.

Servis çalışanı kurulumdan hemen sonra aktif olmaz. Şu anda etkin başka bir hizmet çalışanı yoksa, kullanıcı sayfayı yenilerse veya self.skipWaiting () kurulu hizmet çalışanının komut dosyası olarak adlandırılırsa etkinleştirilebilir.

Bu, aşağıdaki örnekle daha iyi anlaşılabilir: –

 / sw.js
self.addEventListener('kurulum', işlev (olay) {
self.skipBekliyor();
event.waitUntil(
// statik varlıkları önbelleğe alma
);
});

Servis çalışanı aktifse, bir Activate olayı başlatılır. Önbelleği temizlemek gibi bazı belirli görevleri gerçekleştirerek kontrol edebilirsiniz.

Aşağıda, mevcut tüm önbelleği sildiği bir olay önbelleği silme işleminin etkinleştirilmesine ilişkin bir örnek verilmiştir.

 / sw.js
const cacheVersion = 'v1';
self.addEventListener('etkinleştir', işlev (olay) {
event.waitUntil(
caches.keys().then(işlev (önbellekAdları) {
cacheNames.map(işlev (önbellekAdı) {
if (cacheName.indexOf(cacheVersion) < 0) {
geri dön caches.delete(cacheName);
}
});
});
})
);
});

Servis çalışanı etkinleştirildiğinde, artık sayfalar üzerinde tam kontrol sahibi olur. Servis çalışanının etkinleştirilmesinden sonra getirme, gönderme ve eşitleme gibi olayları işleyebilirsiniz.

PWA'nın temel faydaları nelerdir?

Buraya kadar hizmet çalışanının ne olduğunu tartıştık.

Şimdi, temel avantajlarına geçme zamanı.

Aşağıda, PWA'yı aşamalı olmayan web uygulamalarından daha iyi yapan 6 özelliği verilmiştir:

1. Hızlı Kurulum : Yerel uygulamaların aksine, PWA'yı ÇOK HIZLI VE HIZLI indirebilirsiniz. Çoğu durumda, aşamalı web uygulamalarını indirmek ve yüklemek 2-3 saniye sürer. Tarayıcıda web sitesine gitmeniz ve “Ana Ekrana Ekle” düğmesine tıklamanız yeterlidir. Vay! Bitti.
2. Son derece hızlı: ZAMAN PARADIR. PWA'lar çok hızlıdır ve ağa çarpmadan bile sorunsuz çalışır. Bu nedenle, zamandan ve paradan tasarruf edin.
3. Güvenilir: Bir uçağa binmeniz gerektiğini ve hızlı bir şekilde biniş kartınıza ihtiyacınız olduğunu hayal edin. Ancak, ağ bağlantısı gerçekten kötü. Ne yapacaksın? Hiç bir şey. Uçak bileti rezervasyon web uygulamanıza gidin ve biniş kartını anında indirin. Sağladığı güvenilirlik seviyesi budur.
4. Entegre kullanıcı deneyimi: PWA'nın tanıtılmasının temel amacı, kullanıcıların bir web sitesinde mi yoksa uygulamada mı olduklarını bilmemelerini sağlamaktı. Bir kullanıcının ana ekranında bulunur ve bir cihazın yerel uygulamalar gibi işlevlerine erişimi vardır.
5. Katılım: Web uygulamaları, kullanıcıyı bilgilendirerek ve güncel tutarak kullanıcı etkileşimini artırmada çok faydalıdır. Kapalıyken bile bildirimleri itmek, kullanıcıyı geri getirebilir.
6. Duyarlı: Web uygulamasının en önemli avantajlarından biri duyarlı tasarımıdır. Genellikle tüm farklı boyutlardaki cihazlara uyar.

Aşamalı Web Uygulamaları Örnekleri nelerdir?

PWA kullanan birçok popüler şirket var. Örneklerden bazıları aşağıda verilmiştir: –

1. Alibaba
2. Lancome
3. Flipkart
4. OLX
5. heyecan
6. Instagram

Web sitenizde PWA uygulaması olup olmadığını kontrol etmek için Ücretsiz Araçlar

Web sitenizde bir PWA uygulaması olup olmadığını aşağıdaki araçları kullanarak kontrol edebilirsiniz:-

1. deniz feneri
2. Lambda Testi
3. Chrome Geliştirici Araçları