Hizmet çalışanı komut dosyası çalıştırma

Bu codelab, Google Developers Eğitim ekibi tarafından geliştirilen, Gelişen Web Progresif Web Uygulamaları eğitim kursunun bir parçasıdır. Codelab'ler üzerinden sırayla çalışıyorsanız bu kurstan en yüksek değeri elde edersiniz.

Kursla ilgili tüm ayrıntılar için Progresif Web Uygulamaları Geliştirmeye Genel Bakış sayfasını inceleyin.

Giriş

Bu laboratuvarda, basit bir hizmet çalışanı oluşturma adımları açıklanmakta ve hizmet çalışanı yaşam döngüsü açıklanmaktadır.

Neler öğreneceksiniz?

  • Temel hizmet çalışanı komut dosyası oluşturup yükleyin ve basit hata ayıklama işlemleri yapın

Bilmeniz gerekenler

  • Temel JavaScript ve HTML
  • ES2015 Vaatleri ile ilgili kavramlar ve söz dizimi
  • Geliştirici konsolu nasıl etkinleştirilir?

Başlamadan önce gerekenler

pwa-training-labs veri deposunu github'dan indirip klonlayın ve gerekirse Düğüm.js'nin LTS sürümünü yükleyin.

service-worker-lab/app/ dizinine gidip bir yerel geliştirme sunucusu başlatın:

cd service-worker-lab/app
npm install
node server.js

Ctrl-c ile sunucuyu istediğiniz zaman feshedebilirsiniz.

Tarayıcınızı açın ve localhost:8081/ adresine gidin.

Not: Hizmet çalışanlarının kaydını iptal edin ve laboratuvara müdahale etmemeleri için localhost için tüm hizmet çalışanı önbelleklerini temizleyin. Chrome Geliştirici Araçları'nda, Uygulama sekmesinin Depolama alanını temizle bölümünden Site verilerini temizle'yi tıklayarak bunu yapabilirsiniz.

Tercih ettiğiniz metin düzenleyicide service-worker-lab/app/ klasörünü açın. app/ klasörü, laboratuvarı oluşturacağınız yerdir.

Bu klasör şunları içerir:

  • below/another.html, js/another.js, js/other.js ve other.html, hizmet çalışanı kapsamı ile deneme yapmak için kullandığımız örnek kaynaklardır
  • styles/ klasörü, bu laboratuvar için basamaklı stil sayfaları içeriyor
  • test/ klasörü, ilerleme durumunuzu test etmek için dosyalar içeriyor
  • index.html, örnek sitemizin/uygulamamızın ana HTML sayfasıdır
  • service-worker.js, hizmet çalışanımızı oluşturmak için kullanılan JavaScript dosyasıdır
  • package.json ve package-lock.json, bu projede kullanılan düğüm paketlerini izler
  • server.js, uygulamamızı barındırmak için kullandığımız basit bir ekspres sunucudur

Metin düzenleyicinizde service-worker.js uygulamasını açın. Dosyanın boş olduğunu unutmayın. Henüz hizmet çalışanı içinde çalışacak herhangi bir kod eklemedik.

Metin düzenleyicinizde index.html uygulamasını açın.

Hizmet çalışanı kaydetmek için <script> etiketleri içinde aşağıdaki kodu ekleyin:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('Service Worker is registered', registration);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

Komut dosyasını kaydedin ve sayfayı yenileyin. Konsol, hizmet çalışanının kayıtlı olduğunu belirten bir mesaj döndürmelidir. Chrome'da, bir hizmet çalışanının kayıtlı olup olmadığını kontrol etmek için Geliştirici Araçları'nı (Windows ve Linux'ta Ctrl + Üst Karakter + I veya Mac'te ⌘ + alt + I), Uygulama sekmesini ve ardından Hizmet Çalışanları seçeneğini tıklayın. Aşağıdakine benzer bir ifade görürsünüz:

İsteğe bağlı: Siteyi desteklenmeyen bir tarayıcıda açın ve destek kontrolünün koşullu olarak çalıştığını doğrulayın.

Açıklama

Yukarıdaki kod, service-worker.js dosyasını hizmet çalışanı olarak kaydeder. Öncelikle tarayıcının hizmet çalışanlarını destekleyip desteklemediğini kontrol eder. Bazı tarayıcılar hizmet çalışanlarını desteklemeyebileceğinden, bu işlemi hizmet çalışanı her kaydettiğinizde gerçekleştirmeniz gerekir. Ardından kod, hizmet çalışanı, pencerenin Navigator arayüzünde bulunan ServiceWorkerContainer API'nin register yöntemini kullanarak kaydeder.

navigator.serviceWorker.register(...), hizmet çalışanı başarıyla kaydedildikten sonra registration nesnesiyle çözümlenen bir söz verir. Kayıt başarısız olursa taahhüt görüntülenir.

Hizmet çalışanının durumundaki değişiklikler hizmet çalışanındaki etkinlikleri tetikler.

Etkinlik işleyici ekle

Metin düzenleyicinizde service-worker.js uygulamasını açın.

Hizmet etkinliğine aşağıdaki etkinlik işleyicileri ekleme:

self.addEventListener('install', event => {
  console.log('Service worker installing...');
  // Add a call to skipWaiting here
});

self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});

Dosyayı kaydedin.

Servis çalışanının kaydını manuel olarak iptal edin ve güncellenmiş hizmet çalışanını yükleyip etkinleştirmek için sayfayı yenileyin. Konsol günlüğü, yeni hizmet çalışanının kaydedildiğini, yüklendiğini ve etkinleştirildiğini belirtmelidir.

Not: Kayıt günlüğü, diğer günlüklerle (yükleme ve etkinleştirme) birlikte sıra dışı görünebilir. Hizmet çalışanı sayfa ile eş zamanlı olarak çalıştığından günlüklerin sırasını garanti edemeyiz (kayıt günlüğü sayfadan gelirken yükleme ve etkinleştirme günlükleri hizmet çalışanı tarafından sağlanır). Ancak kurulum, etkinleştirme ve diğer hizmet çalışanı etkinlikleri, servis çalışanı içinde tanımlanan bir sırayla gerçekleşir ve her zaman beklenen sırada görünür.

Açıklama

Hizmet çalışanı, kaydın sonunda bir install etkinliği oluşturur. Yukarıdaki kodda, install etkinlik işleyicinin içine bir mesaj kaydedilir ancak gerçek dünyadaki bir uygulamada bu, statik öğeleri önbelleğe almak için iyi bir yerdir.

Bir hizmet çalışanı kaydedildiğinde tarayıcı, hizmet çalışanının yeni olup olmadığını tespit eder (bunun nedeni, önceden yüklenmiş bir hizmet çalışanından farklı olması veya bu site için kayıtlı bir hizmet çalışanı olmamasıdır). Hizmet çalışanı yeniyse (bu durumda olduğu gibi) tarayıcı bunu yükler.

Hizmet çalışanı, sayfanın kontrolünü üstlendiğinde bir activate etkinliği oluşturur. Yukarıdaki kod burada bir mesaj günlüğe kaydeder ancak bu etkinlik genellikle önbellekleri güncellemek için kullanılır.

Belirli bir kapsam için aynı anda yalnızca bir hizmet çalışanı etkin olabilir (Hizmet çalışanı kapsamını keşfetme bölümüne bakın). Bu nedenle, yeni yüklenen bir hizmet çalışanı, mevcut hizmet çalışanı kullanımdan kaldırılana kadar etkinleştirilmez. Bu nedenle, yeni bir hizmet çalışanının yönetimini devralabilmesi için bir hizmet çalışanı tarafından denetlenen tüm sayfaların kapatılması gerekir. Mevcut hizmet çalışanı kaydını iptal ettiğimizden, yeni hizmet çalışanı hemen etkinleştirildi.

Not: Yeni sayfayı mevcut sayfa yüklenmeden önce isteneceği ve eski hizmet çalışanının kullanılmadığı bir zaman olmayacağı için, sayfayı yenilemek yalnızca kontrolü yeni bir hizmet çalışanına aktarmak için yeterli değildir.

Not: Yeni bir hizmet çalışanı, bazı tarayıcılar ve geliştirici aracı kullanarak manuel olarak da etkinleştirilebilir. skipWaiting() bölümünde bunu 3.4. bölümde açıklayacağız.

Hizmet çalışanını güncelleme

Aşağıdaki yorumu service-worker.js içinde herhangi bir yere ekleyin:

// I'm a new service worker

Dosyayı kaydedin ve sayfayı yenileyin. Konsoldaki günlüklere bakın. Yeni hizmet çalışanının yüklendiğini ancak etkinleştirmediğini unutmayın. Chrome'da, beklemedeki hizmet çalışanını Geliştirici Araçları'ndaki Uygulama sekmesinde görebilirsiniz.

Hizmet çalışanıyla ilişkili tüm sayfaları kapatın. Ardından, localhost:8081/ öğesini yeniden açın. Konsol günlüğü, yeni hizmet çalışanı artık etkin olduğunu belirtmelidir.

Not: Beklenmeyen sonuçlar alıyorsanız geliştirici araçlarınızda HTTP önbelleğinin devre dışı olduğundan emin olun.

Açıklama

Tarayıcı, eklenen yeni yorum nedeniyle yeni ve mevcut hizmet çalışanı dosyası arasında bir bayt farkı algılar ve bu nedenle yeni hizmet çalışanı yüklenir. Belirli bir kapsamda aynı anda yalnızca tek bir hizmet çalışanı etkin olabileceğinden, yeni hizmet çalışanı yüklü olsa da mevcut hizmet çalışanı artık kullanılmayana kadar etkinleştirilmez. Eski hizmet çalışanı kontrolündeki tüm sayfaları kapatarak yeni hizmet çalışanını etkinleştirebiliriz.

Bekleme aşaması atlanıyor

Yeni bir hizmet çalışanı, bekleme aşamasını atlayarak mevcut bir hizmet çalışanı olsa dahi hemen etkinleştirilebilir.

service-worker.js içinde, install etkinlik işleyicide skipWaiting numaralı telefona bir arama ekleyin:

self.skipWaiting();

Dosyayı kaydedin ve sayfayı yenileyin. Eski bir hizmet çalışanı çalışıyor olsa bile, yeni hizmet çalışanı hemen yüklenir ve etkinleşir.

Açıklama

skipWaiting() yöntemi, bir hizmet çalışanının kurulumu biter bitmez etkinleştirilmesine olanak tanır. Yükleme etkinliği işleyici, skipWaiting() çağrısını yapmak için yaygın olarak kullanılır, ancak bekleme aşamasında veya öncesinde herhangi bir yerde çağrılabilir. skipWaiting() ürününün ne zaman ve nasıl kullanılacağıyla ilgili daha fazla bilgi edinmek için bu dokümanları inceleyin. Laboratuvarın geri kalanında artık yeni hizmet çalışanı kodunu, hizmet çalışanı kaydını manuel olarak silmeden test edebiliyoruz.

Karşı bildirimin gereklilikleri hakkında

Servis çalışanları, web uygulamanız ile ağ arasında bir proxy gibi çalışabilir.

Alanımızdan gelen isteklere müdahale etmek için bir getirme işleyicisi ekleyelim.

service-worker.js adresine aşağıdaki kodu ekleyin:

self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
});

Komut dosyasını kaydedin ve güncellenmiş hizmet çalışanını yükleyip etkinleştirmek için sayfayı yenileyin.

Konsolu kontrol edin ve hiçbir getirme etkinliğinin günlüğe kaydedilmediğinden emin olun. Sayfayı yenileyip konsolu tekrar kontrol edin. Bu sefer sayfa ve öğeleri (CSS gibi) için getirme etkinlikleri görmeniz gerekir.

Diğer sayfa, Başka bir sayfa ve Geri bağlantılarını tıklayın.

Konsolda, sayfaların ve öğelerinin her biri için getirme etkinliklerini görürsünüz. Tüm günlükler anlamlı mı?

Not: Bir sayfayı ziyaret ederseniz ve HTTP önbelleğini devre dışı bırakmadıysanız CSS ve JavaScript öğeleri yerel olarak önbelleğe alınabilir. Böyle bir durumda, bu kaynaklara ilişkin getirme etkinliklerini görmezsiniz.

Açıklama

Hizmet çalışanı, tarayıcının kapsamına giren her HTTP isteği için bir getirme etkinliği alır. Fetch event nesnesi isteği içerir. Hizmet çalışanındaki getirme etkinliklerini dinlemek, DOM'daki tıklama etkinliklerini dinlemekle benzerdir. Kodumuzda bir getirme etkinliği gerçekleştiğinde, istenen URL'yi konsolda günlüğe kaydederiz (uygulama içinde, rastgele kaynaklarla kendi özel yanıtımızı da oluşturup döndürebiliriz).

İlk yenilemede neden getirme etkinlikleri günlüğe kaydedilmez? Varsayılan olarak, sayfa isteği bir hizmet çalışanından geçmediği sürece, etkinliklerden bir sayfadaki getirme etkinlikleri hizmet çalışanına aktarılmaz. Bu sayede sitenizde tutarlılık sağlanır. Bir sayfa hizmet çalışanı olmadan yüklenirse alt kaynakları da yüklenir.

Karşı bildirimin gereklilikleri hakkında

Çözüm kodu

Çalışma kodunun bir kopyasını almak için 04-intercepting-network-requests/ klasörüne gidin.

Hizmet çalışanlarının kapsamı vardır. Hizmet çalışanının kapsamı, hizmet çalışanı isteklerine hangi yollardan müdahale ettiğini belirler.

Kapsamı bulma

index.html içindeki kayıt kodunu şu bilgilerle güncelleyin:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      console.log('SW registered with scope:', registration.scope);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

Tarayıcıyı yenileyin. Konsolda, hizmet çalışanı kapsamının (bu örnekte http://localhost:8081/) gösterildiği gösterilir.

Açıklama

register() tarafından döndürülen taahhüt, hizmet çalışanının kapsamını içeren kayıt nesnesine çözümlenir.

Varsayılan kapsam, hizmet çalışanı dosyasının yoludur ve tüm alt dizinleri kapsar. Bu nedenle, bir uygulamanın kök dizinindeki bir hizmet çalışanı, uygulamadaki tüm dosyalardan gelen istekleri kontrol eder.

Hizmet çalışanını taşıma

service-worker.js alanını below/ dizinine taşıyın ve index.html konumundaki kayıt kodundaki hizmet çalışanı URL'sini güncelleyin.

Tarayıcıda geçerli hizmet çalışanı kaydını iptal edip sayfayı yenileyin.

Konsolda, hizmet çalışanı kapsamının artık http://localhost:8081/below/ olduğu gösterilmektedir. Chrome'da, hizmet çalışanı kapsamını Geliştirici Araçları'nın uygulama sekmesinde de görebilirsiniz:

Ana sayfada Diğer sayfa, Başka bir sayfa ve Geri'yi tıklayın. Hangi getirme istekleri günlüğe kaydediliyor? Hangileri uygun değil?

Açıklama

Hizmet çalışanının varsayılan kapsamı, hizmet çalışanı dosyasının yoludur. Hizmet çalışanı dosyası artık below/ klasöründe olduğundan bu dosyanın kapsamıdır. Servis çalışanı bünyesindeki tek kaynaklar bunlar olduğundan konsol artık another.html, another.css ve another.js için getirme etkinliklerini günlüğe kaydediyor.

İsteğe bağlı bir kapsam ayarlama

Hizmet çalışanını proje kök dizinine (app/) geri taşıyın ve index.html konumundaki kayıt kodundaki hizmet çalışanı URL'sini güncelleyin.

register() içinde isteğe bağlı parametreyi kullanarak hizmet çalışanı kapsamını below/ dizinine ayarlamak için MDN'de referans kullanın.

Hizmet çalışanı kaydını iptal edip sayfayı yenileyin. Diğer sayfa, Başka bir sayfa ve Geri'yi tıklayın.

Konsolda, hizmet çalışanı kapsamının artık http://localhost:8081/below/ olduğunu gösteriyor ve günlükler yalnızca another.html, another.css ve another.js için getirme etkinliklerini günlüğe kaydediyor.

Açıklama

Kaydolurken ek parametre ile rastgele bir kapsam ayarlamak da mümkündür. Örneğin:

navigator.serviceWorker.register('/service-worker.js', {
  scope: '/kitten/'
});

Yukarıdaki örnekte hizmet çalışanı kapsamı /kitten/ olarak ayarlanmıştır. Hizmet çalışanı, /kitten ve / gibi sayfalardan değil, /kitten/ ve /kitten/lower/ sayfalarındaki sayfalardan gelen isteklere müdahale ediyor.

Not: Servis çalışanının gerçek konumunun üzerinde rastgele bir kapsam ayarlayamazsınız. Bununla birlikte, sunucu çalışanınız Service-Worker-Allowed üstbilgisiyle sunulan bir istemcide etkin durumdaysa, bu hizmet çalışanı için hizmet çalışanı konumunun üzerinde bir maksimum kapsam belirtebilirsiniz.

Karşı bildirimin gereklilikleri hakkında

Çözüm kodu

Çalışma kodunun bir kopyasını almak için solution/ klasörüne gidin.

Artık basit bir hizmet çalışanı çalışıyor ve hizmet çalışanı yaşam döngüsünü anlıyorsunuz.

Karşı bildirimin gereklilikleri hakkında

Hizmet çalışanı yaşam döngüsü

PWA eğitim kursundaki tüm codelab'leri görmek için kursa ait Hoş geldiniz codelab'ine göz atın/