JavaScript Academy · Ders

Service Worker Kaydetme

Bir service worker yükleyip etkinleştirin.

Service Worker Kaydetme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 1. 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Hizmet Çalışanı Nedir?

Bir hizmet çalışanı, tarayıcının sayfadan ayrı olarak arka planda çalıştırdığı bir betiktir. Programlanabilir bir ağ vekili gibi davranır: İstekleri yakalayabilir, önbelleğe alınmış yanıtları sunabilir ve çevrimdışı deneyimleri mümkün kılabilir.

Özellik Algılama

Her ortam hizmet çalışanlarını desteklemez. Daha eski tarayıcıların sorunsuz şekilde sınırlı çalışması için kayıt işleminden önce navigator.serviceWorker varlığını kontrol edin.

if ('serviceWorker' in navigator) {
  // safe to register
}

Kayıt İşlemi

Hizmet çalışanını, betiğinin URL'sini navigator.serviceWorker.register işlevine ileterek kaydedin. Bu işlev, kayıt nesnesine çözümlenen bir vaat döndürür.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

Kayıt Kapsamı

Kapsam, çalışanın denetlediği URL kümesidir. Varsayılan olarak betiğin bulunduğu dizindir. /sw.js konumundaki bir çalışan sitenin tamamını, /app/sw.js konumundaki bir çalışan ise yalnızca /app/ dizinini denetler.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

Açık Bir Kapsam Belirleme

Kapsamı bir seçenekle daraltabilirsiniz; ancak sunucuda özel bir üstbilgi ayarlanmadığı sürece kapsamı betiğin dizininin ötesine genişletemezsiniz.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

HTTPS Gereksinimi

Hizmet çalışanları güvenli bir bağlam gerektirir: Üretimde HTTPS kullanılmalıdır. localhost, geliştirme sırasında güvenli kabul edilir. Bu, saldırganların ağ vekilini ele geçirmesini önler.

Kurulum Olayı

Bir çalışan ilk kez kaydedildiğinde install olayını çalıştırır. Uygulamanın çevrimdışı çalışabilmesi için temel kaynakları genellikle burada önceden önbelleğe alırsınız.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

Etkinleştirme Olayı

Kurulumdan sonra çalışan activate olayını tetikler. Sayfaları denetlemeye başlamadan önce önceki sürümlerden kalan eski önbellekleri temizlemeniz gereken yer burasıdır.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

Yaşam Döngüsü

Bir hizmet çalışanı şu durumlardan geçer:

yükleniyor — kurulum işleyicisi çalışıyor
yüklendi/bekliyor — hazır, devralmayı bekliyor
etkinleştiriliyor / etkinleştirildi — artık sayfaları denetliyor

Varsayılan olarak yeni bir çalışan, etkinleştirilmeden önce eski sayfaların kapanmasını bekler.

İstekleri Yakalama

Çalışan etkinleştirildikten sonra kapsamındaki her ağ isteğini fetch olayı üzerinden yakalar. Önbellekten, ağdan veya ikisinin birleşiminden yanıt verebilirsiniz.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

Kayıt İşlemine Genel Bakış

Hizmet çalışanı kaydetme süreci şöyledir: Özellik algılama yapın, bir betik URL'siyle register çağrısını yapın, kapsamı ve HTTPS gereksinimini göz önünde bulundurun ve çalışan betiğinde install, activate ve fetch olaylarını yönetin.

Hızlı Kontrol

Hizmet çalışanı kaydetme hakkındaki anlayışınızı sınayın.

Tekrar

Hizmet çalışanı kaydetmeyi öğrendiniz:

'serviceWorker' in navigator ile özellik algılama yapın.
register(url, { scope }) bir vaat döndürür.
Kapsam varsayılan olarak betiğin dizinidir; HTTPS gereklidir.
Çalışanda install, activate ve fetch olaylarını yönetin.

Sırada Önbellek API'si var.

Sıkça Sorulan Sorular

“Service Worker Kaydetme” dersi ücretsiz mi?

Evet — “Service Worker Kaydetme” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Service Worker Kaydetme” dersinde ne öğreneceğim?

Bir service worker yükleyip etkinleştirin. JavaScript 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.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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 1. dersidir.

“Service Worker Kaydetme” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön