Service Worker Kaydı ve Yaşam Döngüsü
Bir Service Worker betiği kaydetmeyi, install, activate ve fetch yaşam döngüsü olaylarını anlamayı ve skipWaiting ile clients.claim kullanmayı öğrenin.
Service Worker Kaydı ve Yaşam Döngüsü, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Hizmet Çalışanı Nedir?
Hizmet çalışanı, ayrı bir tarayıcı çalışanında (ana iş parçacığında değil) çalışan ve kaynağınıza yönelik ağ isteklerini yakalayan bir JavaScript dosyasıdır. Çevrimdışı PWA'ların, anlık bildirimlerin ve arka plan eşitlemesinin temelini oluşturur.
Hizmet Çalışanı Kaydetme
Ana betiğinizden kaydedin. Hizmet çalışanları HTTPS gerektirir (localhost dışında).
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}Kapsam
Bir hizmet çalışanı, kapsamı içindeki istekleri denetler (sunulduğu dizin). Kök dizindeki /sw.js her şeyi denetler. /app/sw.js konumundaki bir SW yalnızca /app/* kapsamını denetler.
Yaşam Döngüsü: install → activate → fetch
Üç temel olay vardır: install (bir kez gerçekleşir, önbellekleri kurar), activate (bir kez gerçekleşir, eski önbellekleri temizler), fetch (her istekte gerçekleşir — önbellek mi yoksa ağ mı kullanılacağına karar verir).
// sw.js
self.addEventListener('install', (event) => {
console.log('SW installing');
event.waitUntil(
caches.open('v1').then(cache =>
cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
)
);
});
self.addEventListener('activate', (event) => {
console.log('SW active');
event.waitUntil(
caches.keys().then(keys =>
Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
)
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(res => res || fetch(event.request))
);
});skipWaiting()
Varsayılan olarak güncellenen bir SW, etkinleşmeden önce tüm sekmelerin kapanmasını bekler. Yükleme işleyicisindeki self.skipWaiting(), etkinleşmeyi hemen zorlar — güncellemeler hızlanır, ancak eski ve yeni varlıkların karışması riski doğar.
self.addEventListener('install', (event) => {
self.skipWaiting(); // activate immediately on next reload
// ... cache setup
});clients.claim()
Etkinleştirme sonrasında yeni bir SW, kendisinden önce yüklenmiş sayfaları denetlemez. Etkinleştirme işleyicisindeki self.clients.claim(), denetimi hemen ele alır.
self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim());
});Hizmet Çalışanını Güncelleme
Tarayıcılar her gezinmede yeni bir sw.js dosyası olup olmadığını denetler (en fazla 24 saatlik süre). Dosyanın içeriği değiştiyse (bayt düzeyinde farklıysa) yeni bir SW olarak yüklenir ve etkinleşmeyi bekler. Etkinleşmeyi tetiklemek için reload yapın.
Uygulamadan Güncellemeleri Algılama
Güncelleme istemi göstermek için updatefound olayını dinleyin.
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newSW = reg.installing;
newSW.addEventListener('statechange', () => {
if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
// New version ready
showUpdateBanner(() => {
newSW.postMessage('SKIP_WAITING');
window.location.reload();
});
}
});
});
});Kaydı Kaldırma
Kontrolden çıkmış bir hizmet çalışanını durdurmak için (geliştirme sırasında işler ters gittiğinde) kaydını kaldırın.
navigator.serviceWorker.getRegistrations().then(regs => {
for (const reg of regs) reg.unregister();
});Tarayıcı DevTools'u
Chrome DevTools → Application → Service Workers bölümü, kayıtlı SW'yi gösterir; kaydını kaldırmanıza, reload sırasında güncellemeyi benzetmenize ve yaşam döngüsü olaylarını adım adım izlemenize olanak tanır.
Yaygın Tuzaklar
1) SW dosyası kök kapsamda veya daha üst bir kapsamda olmalıdır. 2) HTTPS gereklidir. 3) Geliştirme sırasında SW değişiklikleri için önbelleği yok sayan bir yeniden yükleme gerekir. 4) Önbelleği bir kez alın ve sonsuz önbellek büyümesi yerine sürümleme yoluyla güncelleyin. 5) POST isteklerini önbelleğe almayın (desteklenmezler).
Workbox — Üretkenlik Kütüphanesi
Google'ın Workbox'ı yaşam döngüsünü soyutlar ve kullanıma hazır önbellekleme stratejileri sunar. Üretimdeki PWA'ların çoğu, elle yazılmış SW kodu yerine Workbox kullanır.
Hızlı Kontrol
Bir hizmet çalışanının install işleyicisi içinde self.skipWaiting() ne yapar?
Özet: Hizmet Çalışanı Yaşam Döngüsü
Kaynağınıza yönelik ağ isteklerini yakalayan JavaScript çalışanıdır. navigator.serviceWorker.register ile kaydedilir. Yaşam döngüsü: install (önbellekleri kurar), activate (temizler), fetch (istekleri yakalar). Anında güncellemeler için skipWaiting ve clients.claim kullanılır. Kullanıcılara istem göstermek için updatefound dinlenir. Workbox, tekrarlı hazırlık kodunu soyutlar. HTTPS gereklidir (localhost dışında).
Sıkça Sorulan Sorular
“Service Worker Kaydı ve Yaşam Döngüsü” dersi ücretsiz mi?
Evet — “Service Worker Kaydı ve Yaşam Döngüsü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Service Worker Kaydı ve Yaşam Döngüsü” dersinde ne öğreneceğim?
Bir Service Worker betiği kaydetmeyi, install, activate ve fetch yaşam döngüsü olaylarını anlamayı ve skipWaiting ile clients.claim kullanmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Service Worker Kaydı ve Yaşam Döngüsü” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Web Uygulaması Bildirimi
- Service Worker Kaydı ve Yaşam Döngüsü
- Çevrimdışı Önbelleğe Alma Stratejileri: CacheFirst ve NetworkFirst
- Anlık Bildirimler