Service Worker'lar inanılmaz bir fayda sağlar ancak bunlarla birlikte çalışmak başlangıçta zor olabilir. Çalışma kutusu, hizmet çalışanlarının kullanımını kolaylaştırır. Ancak hizmet çalışanları zorlu sorunları çözdüğünden, bu teknolojinin herhangi bir soyutlama da anlamadan yanıltıcı olabilir. Dolayısıyla, Workbox ayrıntılarına geçmeden önce bu ilk birkaç belgede temel teknolojinin ele alındığı ilk bilgiler ele alınacaktır.
Hizmet çalışanlarının çalışan listesini görüntülemek için adres çubuğunuza chrome://serviceworker-internals/ yazın.
Service Worker'lar hangi hizmeti sunar?
Service Worker'lar, web tarayıcıları ile web sunucuları arasında proxy görevi gören özel JavaScript öğeleridir. Amaçları çevrimdışı erişim sağlayarak güvenilirliği artırmak ve sayfa performansını artırmaktır.
Gittikçe gelişen, uygulama benzeri bir yaşam döngüsü
Service Worker'lar, mevcut web sitelerinin geliştirilmesidir. Bu, Service Worker'ları desteklemeyen tarayıcılardaki kullanıcılar, bunları kullanan web sitelerini ziyaret ettiğinde herhangi bir temel işlevin bozulacağı anlamına gelir. Web'in dayanağı tam da bu.
Service Worker'lar, platforma özgü uygulamalara benzer bir yaşam döngüsü boyunca web sitelerini kademeli olarak iyileştirir. Uygulama mağazasından yerel uygulama yüklendiğinde ne olduğunu düşünün:
- Uygulamanın indirilmesi için bir istek yapılır.
- Uygulama indirme ve yükleme işlemleri.
- Uygulama kullanıma hazır ve başlatılabilir.
- Yeni sürümler için uygulama güncellenir.
Hizmet çalışanının yaşam döngüsü de benzer olsa da progresif bir geliştirme yaklaşımı vardır. Yeni bir Service Worker'ın yüklendiği web sayfası ilk ziyaretinde, bir sayfaya yapılan ilk ziyarette hizmet çalışanı indirme işlemi sırasında temel işlevselliği sağlanır. Service Worker yüklenip etkinleştirildikten sonra daha yüksek güvenilirlik ve hız sunmak için sayfayı kontrol eder.
JavaScript'e dayalı bir önbelleğe alma API'sine erişim
Service Worker teknolojisinin vazgeçilmez bir parçası, HTTP önbelleğinden tamamen ayrı bir önbelleğe alma mekanizması olan Cache arayüzüdür.
Cache arayüzüne, hizmet çalışanı kapsamında ve ana iş parçacığı kapsamında erişilebilir.
Bu sayede, Cache örneğiyle kullanıcı odaklı etkileşimler için sayısız olasılık ortaya çıkar.
HTTP önbelleği, HTTP üst bilgilerinde belirtilen önbelleğe alma yönergelerinden etkilenirken Cache arayüzü, JavaScript aracılığıyla programlanabilir.
Bu, ağ isteklerine ilişkin önbelleğe alma yanıtlarının, belirli bir web sitesi için en iyi mantığınıza dayanabileceği anlamına gelir.
Örneğin:
- Statik öğeleri, ilk istek sırasında önbellekte depolayın ve bunları yalnızca sonraki her istekte önbellekten sunun.
- Sayfa işaretlemesini önbellekte depolar, ancak çevrimdışı senaryolarda yalnızca önbellekten işaretleme sunar.
- Önbellekten belirli öğeler için eski yanıtları sunar, ancak yanıtları arka planda ağdan güncellersiniz.
- Ağdaki kısmi içeriği akış olarak izleyin ve algısal performansı iyileştirmek için bu içeriği önbellekten bir uygulama kabuğuyla birleştirin.
Bunların her biri, bir önbelleğe alma stratejisine örnektir. Önbelleğe alma stratejileri, çevrimdışı deneyimleri mümkün kılar ve yüksek gecikmeli yeniden doğrulama, HTTP önbelleğinin başlatıldığı kontrollerin yan adımında adımlar uygulanarak daha iyi performans sağlayabilir. Workbox'a geçmeden önce, birkaç önbelleğe alma stratejisini ve bu stratejileri destekleyen kodu inceleyeceğiz.
Eşzamansız ve etkinliğe dayalı bir API
Ağ üzerinden veri aktarımı, yapısı gereği eşzamansız bir işlemdir. Bir öğe isteğinde bulunmak, sunucunun bu isteğe yanıt vermesi ve yanıtın indirilmesi zaman alır. İlgili süre değişken ve belirsizdir. Service Worker'lar, aşağıdaki gibi etkinlikler için geri çağırmaları kullanarak bu uyumsuzluğu etkinlik odaklı bir API aracılığıyla karşılar:
- Hizmet çalışanı yükleme yaparken.
- Bir hizmet çalışanı etkinleştirdiğinde.
- Bir hizmet çalışanı ağ isteği algıladığında.
Etkinlikler, aşina olduğunuz bir addEventListener API kullanılarak kaydedilebilir.
Bu etkinliklerin tümü Cache arayüzüyle etkileşime geçebilir.
Özellikle de ağ istekleri gönderildiğinde geri arama yapabilme olanağı, talep edilen güvenilirlik ve hızın sağlanmasında kritik öneme sahiptir.
JavaScript'te eşzamansız işler yapmak için vaatler kullanmanız gerekir.
Vaatler aynı zamanda async ve await'ı da temel aldığından, bu JavaScript özellikleri, daha iyi bir geliştirici deneyimi sağlamak üzere Service Worker (ve Workbox!) kodlarını basitleştirmek için de kullanılabilir.
Önbelleğe alma ve çalışma zamanını önbelleğe alma
Service Worker ile Cache örneği arasındaki etkileşim, iki farklı önbelleğe alma kavramı içerir: önbellek ve çalışma zamanı önbelleğe alma.
Bu koşulların her biri, Service Worker'ın sağlayabileceği faydaların merkezinde yer alır.
Ön belleğe alma, öğeleri önceden önbelleğe alma işlemidir (genellikle bir hizmet çalışanının kurulumu sırasında).
Önbelleğe alma sayesinde, çevrimdışı erişim için gereken önemli statik öğeler ve materyaller bir Cache örneğinde indirilip depolanabilir.
Bu tür bir önbelleğe alma işlemi, sayfa hızını önceden önbelleğe alınmış öğeler gerektiren sonraki sayfalara da getirir.
Çalışma zamanı önbelleğe alma, çalışma zamanı sırasında ağdan istenen öğelere önbelleğe alma stratejisinin uygulanmasıdır. Bu tür önbelleğe alma, kullanıcının önceden ziyaret ettiği sayfalara ve öğelere çevrimdışı erişimi garanti ettiği için yararlıdır.
Cache arayüzünü Service Worker içinde kullanmaya yönelik bu yaklaşımlar bir arada değerlendirildiğinde, kullanıcı deneyimine büyük faydalar sağlamakta ve diğer normal web sayfalarında uygulama benzeri davranışlara yol açmaktadır.
Ana iş parçacığından yalıtım
JavaScript performansının durumu, web için sürekli gelişen bir zorluktur. Kullanıcı açısından bakıldığında bu, cihaz özelliklerine ve yüksek hızlı internete erişime bağlıdır. JavaScript kullanıldıkça, keyifli kullanıcı deneyimleri sunan hızlı web siteleri oluşturmak da o kadar zor hale gelir.
Service Worker'lar, yaptıkları tüm işin kendi iş parçacıkları üzerinde gerçekleşmesi açısından web çalışanları gibidir. Yani Service Worker görevleri, ana iş parçacığındaki diğer görevlerle dikkat çekmek için rekabet etmez. Service Worker'lar tasarımı gereği kullanıcı odaklıdır.
Önünüzdeki yol
Bu belgeler sadece genel bakış niteliğindedir. Workbox'ı gerektiği gibi ele almadan önce Service Worker'lar hakkında değinilmesi gereken birkaç konu daha var. Ancak yine de emin olabilirsiniz: Hizmet çalışanlarını iyi bir şekilde anlarsanız Workbox'ı daha kolay ve verimli bir şekilde kullanabilirsiniz.