Modern Web'in Gizli Kahramanı: Service Worker
İnternet olmasa bile çalışan, anlık bildirimler gönderen ve web uygulamalarına güç katan, tarayıcının arka planındaki görünmez yardımcı.
🚀 Temel Yetenekleri
Service Worker'lar, web'e daha önce yalnızca native uygulamalara özgü olan güçlü özellikler kazandırır:
📡 Çevrimdışı Çalışma
İnternet kesildiğinde bile kullanıcıların içeriğe erişebilmesini sağlar.
⚡ Hızlı Performans
Önbellekten anında yükleme yaparak sayfa geçişlerini hızlandırır.
🔔 Anlık Bildirimler
Kullanıcı etkileşimini artırmak için tarayıcı kapalıyken bile bildirim gönderir.
🔄 Arka Plan Senkronizasyonu
Bağlantı koptuğunda yapılan işlemleri saklar ve bağlantı gelince sunucuya gönderir.
🔄 Yaşam Döngüsü
Davranışını üç temel aşama yönetir. Bu döngüyü anlamak, onu doğru kullanmanın anahtarıdır.
1. Registration (Kayıt)
Süreci başlatır ve tarayıcıya service worker dosyasının yerini bildirir.
2. Installation (Kurulum)
Varlıkları önbelleğe alır ve uygulamanın çalışması için gerekli dosyaları hazırlar.
3. Activation (Etkinleştirme)
Eski önbellekleri temizler ve kontrolü tamamen ele alarak çalışmaya başlar.
💻 Kod Örnekleri
📦 Varlıkları Önbelleğe Alma
`install` olayını kullanarak, uygulamanın temel dosyalarını (App Shell) çevrimdışı erişim için saklarız.
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/index.html',
'/style.css',
'/app.js'
]);
})
);
});🌐 Ağ İsteklerini Yönetme
`fetch` olayı ile ağ isteklerini yakalarız. Önce önbelleğe bakar, kaynak yoksa ağa gideriz.
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
