Service Worker, web uygulamanızın ağ bağımsız çalışmasını sağlayan, tarayıcıda arka planda çalışan bir JavaScript dosyasıdır. Doğru stratejilerle kullanıldığında, kullanıcılarınıza kesintisiz bir deneyim sunabilir ve sayfa yükleme hızını önemli ölçüde iyileştirebilirsiniz. İşte Service Worker entegrasyonunda işinize yarayacak pratik ipuçları ve bir kontrol listesi.
Service Worker'ı Doğru Kaydetme ve Kapsam Belirleme
Service Worker yalnızca HTTPS üzerinden çalışır (localhost hariç). Kayıt işlemini ana JavaScript dosyanızda yapın ve scope parametresini belirleyerek hangi dizinleri kapsayacağını tanımlayın. Genellikle '/' kapsamı tüm siteyi kapsar. Kayıt kodunuz şu şekilde olabilir:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' })
.then(reg => console.log('Service Worker kaydedildi:', reg.scope))
.catch(err => console.error('Kayıt hatası:', err));
}
Önbellek Stratejileri: Hangi Durumda Hangisi?
Doğru önbellek stratejisini seçmek, uygulamanızın performansı ve veri güncelliği arasında denge kurar. En yaygın dört strateji:
- Cache First (Önbellek Öncelikli): Statik varlıklar (CSS, JS, resimler) için idealdir. Önce önbellekten yanıt döner, yoksa ağdan alır.
- Network First (Ağ Öncelikli): API yanıtları gibi güncelliği önemli verilerde kullanılır. Önce ağdan alır, başarısız olursa önbelleğe düşer.
- Stale While Revalidate: Kullanıcıya önbellekteki veriyi hemen gösterirken arka planda ağdan günceller. Sık değişmeyen ama hızlı olması gereken içerikler için uygundur.
- Network Only (Yalnızca Ağ): Önbellek kullanılmaz. Gerçek zamanlı veri gerektiren işlemlerde tercih edilir, ancak offline desteği vermez.
Örneğin, bir haber sitesinde statik şablonlar için Cache First, haber başlıkları için Stale While Revalidate, yorum gönderme işlemi için Network Only kullanabilirsiniz. Gerçek zamanlı güncellemeler gerektiğinde WebSocket vs Server-Sent Events karşılaştırmasını inceleyerek uygun teknolojiyi seçebilirsiniz.
Önbellek Yönetimi: Sürümleme ve Temizlik
Her güncellemede önbellek adını değiştirerek (ör. v1-cache, v2-cache) eski sürümleri temizleyin. Aksi halde kullanıcılar eski dosyaları görmeye devam eder. Service Worker'ın activate olayında eski önbellekleri silmeyi unutmayın:
self.addEventListener('activate', event => {
const cacheWhitelist = ['v2-cache'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
Kontrol Listesi: Canlıya Almadan Önce
Service Worker'ınızı üretime almadan önce aşağıdaki maddeleri kontrol edin. Bu liste, projenizin sorunsuz çalışmasını ve kullanıcı deneyiminin artmasını sağlar.
- HTTPS kontrolü: Service Worker yalnızca HTTPS üzerinde çalışır. Sertifikanızın geçerli olduğundan emin olun.
- Kapsam doğrulama: Service Worker'ınızın kapsamı tüm alt dizinleri kapsıyor mu? Gerekirse
scopeparametresini ayarlayın. - İlk kayıt ve güncelleme: Service Worker ilk kayıtta sayfayı beklemez. Yeni sürümü etkinleştirmek için sayfayı yenilemek gerekebilir.
skipWaiting()veclients.claim()kullanarak anlık güncelleme yapabilirsiniz. - Tüm kritik varlıkları önbelleğe alın: HTML, CSS, JS ve resimler gibi temel dosyaları install aşamasında önbelleğe ekleyin. Eksik dosya durumunda uygulama çalışmayabilir.
- Fallback sayfa: Çevrimdışı durumda kullanıcıya gösterilecek bir fallback sayfası hazırlayın. Örneğin,
offline.html. - API istekleri için ağ öncelikli strateji: API yanıtlarını genellikle Network First veya Stale While Revalidate ile yönetin. Cursor-based pagination gibi modern API tasarımlarıyla birleştirerek verimli bir önbellekleme yapabilirsiniz.
- Test cihazlarında deneyin: Farklı tarayıcı ve mobil cihazlarda offline modu test edin. Chrome DevTools > Application > Service Workers panelinden hata ayıklama yapın.
- Güvenlik açıkları: Önbelleğe aldığınız verilerin hassas bilgi içermediğinden emin olun. Özel kullanıcı verilerini asla önbelleğe almayın.
- Periyodik güncellemeler: Service Worker'ınız bir kere kaydedildikten sonra güncellemeleri otomatik kontrol eder. Servis çalışanınızı sık sık güncelleyerek yeni özellikler ekleyin.
Sık Yapılan Hatalar ve Çözümleri
Service Worker ile çalışırken karşılaşılan bazı yaygın hatalar:
- Önbellek patlaması: Sürümleme yapmazsanız, kullanıcılar eski içeriği görmeye devam eder. Her deploy'da önbellek adını değiştirin.
- Beklenmeyen kapsam dışı istekler: Service Worker'ınızın kapsamı dışındaki dosyaları önbelleğe almaya çalışmak hata verir. Tüm varlıkların kapsam içinde olduğundan emin olun.
- Güncelleme sorunları:
skipWaiting()kullanmazsanız, yeni Service Worker etkinleşene kadar eski versiyon çalışır. Kullanıcı deneyimini iyileştirmek içinself.skipWaiting()veclients.claim()ekleyin.
Performans İpuçları
- Önbellek boyutunu sınırlayın: Çok fazla veri depolamak tarayıcı limitlerini aşabilir. Kullanılmayan önbellekleri düzenli temizleyin.
- Önemli kaynakları önceden yükleyin: Kritik CSS ve JS dosyalarını
installolayında hemen önbelleğe alın. - Yanıtları doğrulayın: Ağdan gelen yanıtların başarılı olduğundan emin olmadan önbelleğe eklemeyin. Örneğin,
response.okkontrolü yapın.
Service Worker'lar, PWA'ların temel yapı taşıdır. Doğru stratejiler ve düzenli bakım ile kullanıcılarınıza kesintisiz bir deneyim sunabilirsiniz. Daha fazla bilgi için önbellek stratejileri ve API tasarımı konularında diğer yazılarımıza göz atmayı unutmayın.
Sık Sorulan Sorular
Service Worker nedir ve ne işe yarar?
Service Worker, tarayıcıda arka planda çalışan bir JavaScript dosyasıdır. Web sayfasından bağımsızdır ve ağ isteklerini yöneterek offline destek, push bildirimleri ve arka planda senkronizasyon gibi özellikler sağlar.
Hangi önbellek stratejisini seçmeliyim?
Statik varlıklar (CSS, JS) için Cache First, API yanıtları için Network First, sık güncellenen ama hızlı olması gereken içerikler için Stale While Revalidate kullanabilirsiniz. Uygulamanızın ihtiyacına göre stratejiyi belirleyin.
Service Worker neden HTTPS gerektirir?
Service Worker, ağ isteklerine müdahale edebildiği için güvenlik açısından HTTPS zorunludur. Aksi takdirde saldırganlar istekleri değiştirebilir. Geliştirme sırasında localhost istisnadır.
Service Worker'ı güncellemek için ne yapmalıyım?
Her deploy'da önbellek adını değiştirin (sürümleyin) ve skipWaiting() ile activate olayında eski önbellekleri temizleyin. Böylece yeni Service Worker hemen etkinleşir.
Tüm kaynaklar önbelleğe alınmalı mı?
Hayır, yalnızca kritik kaynaklar (HTML, CSS, JS, logo) ve sık kullanılan veriler önbelleğe alınmalı. Büyük dosyalar veya kullanıcıya özel hassas veriler önbelleğe alınmamalıdır.
