Bir web sitesinin çalışabilmesi için normal şartlarda tarayıcı ile sunucu arasında aktif bir internet bağlantısı bulunması gerekir. Ancak modern web teknolojileri sayesinde belirli dosyalar cihazda saklanabilir ve internet bağlantısı kesildiğinde sayfanın bazı bölümleri çalışmaya devam edebilir. Bu işleyişi sağlayan temel teknolojilerden biri Service Worker yapısıdır. Bu rehberde Service Worker nedir, nasıl çalışır ve web sitelerinin çevrimdışı kullanılmasını nasıl sağlar sorularını ele alıyoruz.
Service Worker Nedir?
Service Worker, tarayıcı ile web sunucusu arasında çalışan özel bir JavaScript dosyasıdır. Web sayfasının ana işleminden bağımsız olarak arka planda görev yapar ve tarayıcı tarafından gönderilen ağ isteklerini yönetebilir.
Bu yapı sayesinde HTML, CSS, JavaScript, görsel ve yazı tipi gibi dosyalar önbelleğe alınabilir. Kullanıcının internet bağlantısı kesildiğinde tarayıcı gerekli kaynakları sunucudan istemek yerine daha önce kaydedilen dosyalardan yükleyebilir.
Service Worker yalnızca çevrimdışı kullanım amacıyla tercih edilmez. Ağ isteklerini kontrol etme, içerikleri önbellekten sunma, arka planda veri eşitleme ve anlık bildirimleri yönetme gibi farklı görevler için de kullanılabilir.
Service Worker Nasıl Çalışır?
Service Worker doğrudan web sayfasının içeriğine erişmez. Sayfa ile sunucu arasında bağımsız bir katman olarak çalışarak ağ isteklerini dinler. Tarayıcı bir dosya istediğinde Service Worker isteğin sunucuya gönderilmesine, önbellekten karşılanmasına veya özel bir çevrimdışı sayfanın gösterilmesine karar verebilir.
Temel çalışma süreci şu aşamalardan oluşur:
- Service Worker dosyası tarayıcıya kaydedilir.
- Kurulum sırasında gerekli kaynaklar önbelleğe alınır.
- Kurulum tamamlandığında Service Worker etkinleştirilir.
- Sayfa tarafından oluşturulan ağ istekleri kontrol edilir.
- İnternet durumuna göre sunucu veya önbellek kullanılır.
Service Worker işlemleri asenkron olarak gerçekleştirir. Bu sayede önbellek kontrolleri yapılırken sayfanın diğer işlemlerinin gereksiz yere durdurulmasının önüne geçilebilir.
Service Worker Nasıl Kaydedilir?
Service Worker kullanabilmek için öncelikle JavaScript dosyasının tarayıcıya kaydedilmesi gerekir. Kayıt işlemi sayfanın ana JavaScript dosyasında gerçekleştirilebilir:
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("https://cdn.domainhizmetleri.com/service-worker.js")
.then(function () {
console.log("Service Worker kaydedildi.");
})
.catch(function (hata) {
console.log("Service Worker kaydedilemedi:", hata);
});
}
Bu kod öncelikle tarayıcının Service Worker desteğine sahip olup olmadığını kontrol eder. Destek bulunuyorsa service-worker.js dosyası kaydedilir.
Service Worker güvenlik nedeniyle HTTPS bağlantısı üzerinden çalıştırılmalıdır. Böylece ağ isteklerine müdahale edebilen bu yapının üçüncü kişiler tarafından kötüye kullanılması önlenir. Geliştirme ortamlarında ise yerel sunucu üzerinden test yapılabilir.
Service Worker Yaşam Döngüsü Nasıldır?
Service Worker yapısının install, activate ve fetch olmak üzere üç önemli aşaması bulunur.
install olayı ilk kurulum sırasında çalışır. Web sitesinin çevrimdışı kullanılabilmesi için gerekli temel dosyalar bu aşamada önbelleğe eklenebilir.
self.addEventListener("install", function (event) {
event.waitUntil(
caches.open("site-cache-v1").then(function (cache) {
return cache.addAll([
"/",
"https://cdn.domainhizmetleri.com/style.css",
"https://cdn.domainhizmetleri.com/script.js",
"/cevrimdisi.html"
]);
})
);
});
activate aşaması yeni Service Worker sürümü etkinleştirildiğinde devreye girer. Eski veya artık kullanılmayan önbelleklerin kaldırılması için bu olaydan yararlanılabilir.
fetch olayı ise web sayfasının oluşturduğu ağ isteklerini yakalar. İstenen dosyanın önbellekte bulunup bulunmadığı kontrol edilerek uygun kaynak kullanıcıya sunulur.
Web Sitesi Çevrimdışı Nasıl Çalışır?
Kullanıcı domainadresiniz.com adresini ilk kez ziyaret ettiğinde web sitesi dosyaları sunucudan indirilir. Service Worker gerekli dosyaları Cache API aracılığıyla tarayıcıda saklar.
Kullanıcı daha sonra internet bağlantısı olmadan aynı web sayfasını açtığında Service Worker ağ isteğinin başarısız olduğunu algılar. Ardından önbellekte saklanan HTML, CSS, JavaScript ve görsel dosyalarını kullanarak sayfayı görüntüler.
Önbellekte istenen sayfa bulunmuyorsa kullanıcıya önceden hazırlanmış bir çevrimdışı bilgilendirme sayfası gösterilebilir. Böylece standart tarayıcı bağlantı hatası yerine web sitesinin tasarımıyla uyumlu ve açıklayıcı bir ekran sunulur.
Ancak Service Worker kullanılması, web sitesinin bütün özelliklerinin otomatik olarak çevrimdışı çalışacağı anlamına gelmez. Sunucudan anlık veri isteyen işlemler, ödeme sayfaları ve çevrimiçi doğrulama gerektiren formlar internet bağlantısına ihtiyaç duyabilir.
Service Worker Önbellek Stratejileri Nelerdir?
Her web sitesi için tek bir önbellek yöntemi uygun olmayabilir. İçeriğin türüne göre farklı stratejiler kullanılabilir.
Cache First yönteminde öncelikle önbellek kontrol edilir. Dosya bulunamazsa sunucuya istek gönderilir. Logo, yazı tipi ve stil dosyası gibi sık değişmeyen kaynaklar için uygundur.
Network First yönteminde ilk olarak güncel içerik sunucudan alınmaya çalışılır. Ağ bağlantısı kurulamazsa önbellekte bulunan sürüm gösterilir. Sık güncellenen sayfalar için tercih edilebilir.
Stale While Revalidate yönteminde önbellekteki içerik kullanıcıya hemen gösterilirken arka planda sunucudan güncel sürüm alınır. Böylece hızlı açılış ile içerik güncelliği arasında denge kurulabilir.
Doğru stratejinin seçilmesi, eski içerik gösterilmesini ve gereksiz ağ isteklerini azaltmaya yardımcı olur.
Service Worker Kullanmanın Avantajları Nelerdir?
Service Worker kullanımı web sitesine şu avantajları sağlayabilir:
- Belirli sayfaların internet bağlantısı olmadan açılmasını sağlar.
- Daha önce kaydedilen kaynakların hızlı yüklenmesine yardımcı olur.
- Zayıf veya kesintili bağlantılarda kullanıcı deneyimini iyileştirir.
- Sunucuya gönderilen tekrarlı dosya isteklerini azaltabilir.
- Özel çevrimdışı sayfalarının hazırlanmasına imkân tanır.
- Progressive Web App özelliklerinin kullanılmasını destekler.
- Arka planda eşitleme ve bildirim gibi işlevlere altyapı oluşturur.
Özellikle mobil cihazlardan ziyaret edilen web sitelerinde ağ bağlantısı her zaman kararlı olmayabilir. Önbelleğe alınan temel kaynaklar, bağlantı sorunu yaşandığında sayfanın tamamen kullanılamaz hâle gelmesini önleyebilir.
Service Worker Kullanılırken Nelere Dikkat Edilmelidir?
Önbelleğe alınacak dosyalar dikkatli belirlenmelidir. Kullanıcıya veya oturuma özel hassas verilerin kontrolsüz şekilde saklanması güvenlik ve gizlilik sorunlarına yol açabilir.
Web sitesi güncellendiğinde eski dosyaların gösterilmeye devam etmemesi için önbellek sürümleri yönetilmelidir. Yeni sürüm etkinleştirilirken eski önbellekler kaldırılmalı ve gerekli kaynaklar tekrar kaydedilmelidir.
Service Worker dosyasındaki bir hata, web sitesinin eski veya bozuk bir sürümünün kullanıcılara gösterilmesine neden olabilir. Bu nedenle değişiklikler canlı web sitesine aktarılmadan önce farklı tarayıcılar, mobil cihazlar ve bağlantı koşullarıyla test edilmelidir.
Ayrıca kullanıcının web sitesini daha önce çevrimiçi olarak ziyaret etmiş olması gerekebilir. İlk ziyarette gerekli dosyalar indirilmediği için tamamen yeni bir kullanıcı çevrimdışı durumda siteye erişemeyebilir.
Sonuç
Service Worker, tarayıcı ile sunucu arasındaki ağ isteklerini yöneterek web sitelerinin belirli bölümlerinin çevrimdışı çalışmasını sağlayan bir JavaScript teknolojisidir. Dosyaların önbelleğe alınması, uygun stratejinin belirlenmesi ve çevrimdışı sayfasının hazırlanması sayesinde bağlantı sorunlarında daha kesintisiz bir kullanıcı deneyimi sunulabilir.
Domainhizmetleri olarak hızlı, güvenli ve stabil hosting altyapımızla web projelerinize uygun çözümler sunuyoruz. Güncel web teknolojilerini destekleyen hosting hizmetlerimizden yararlanarak ziyaretçilerinize daha hızlı ve kesintisiz bir web deneyimi sağlayabilirsiniz.
