4. Modül: Gelişmiş web teknolojileri

4.2.3 Service Worker'lara giriş

İleri Web Uygulamalarının hızlı ve yüklenebilir olması gerekir. Yani bu uygulamalar çevrimiçi veya çevrimdışı olarak, kesintili ya da yavaş bağlantılarda çalışabilir. Uygulamanın daima hızlı ve güvenilir bir şekilde kullanıma hazır olması için Service Worker yardımıyla uygulama kabuğu, önbelleğe alınmalıdır. 

Service Worker nedir?

Service Worker; tarayıcınızın arka planda, web sayfasından ayrı olarak çalıştırdığı bir komuttur. Bu komut, web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere açılan bir kapı niteliğindedir. Bugün bu özellikler arasında push bildirimler, arka planda senkronizasyon vb. bulunmaktadır. Gelecekte Service Worker'lar, periyodik senkronizasyon veya coğrafi sınır çizme gibi diğer özellikleri de destekleyecektir. Bu eğiticide ele alınan temel özellik, yanıt önbelleğinin programlı biçimde yönetimi dahil olmak üzere, isteklerinin yakalanabilmesi ve işlenebilmesidir.

Bunun heyecan verici bir API olmasının nedeni, çevrimdışı deneyimlerin desteklenebilmesi ve böylece geliştiricilere deneyim üzerinde tam kontrol verilmesidir.

Service Worker'lardan önce, web'de AppCache adlı, kullanıcılara çevrimdışı deneyim sunan bir API daha vardı. AppCache ile ilgili temel sorunlar, bilinmeyen sayısından kaynaklanmaktadır. Çünkü tasarım özellikle tek sayfalı web uygulamalarında gayet başarılı sonuçlar verse de, çok sayfalı sitelerde aynı performansı gösterememektedir. Service Worker'lar, sık karşılaşılan bu sorunların önüne geçmek için tasarlanmıştır.

Service Worker ile ilgili önemli noktalar:

  • JavaScript Worker olduğundan, DOM'ye doğrudan erişemez. Bunun yerine Service Worker, postMessage arayüzüyle gönderilmiş mesajları yanıtlayarak, kontrol ettiği sayfalarla iletişime geçebilir. Bu sayfalar da gerektiğinde DOM'yi değiştirebilir.
  • Programlanabilen bir ağ proxy'si olan Service Worker, sayfanızdaki ağ isteklerinin işlenme şeklini kontrol etmenizi sağlar.
  • Kullanılmadığında sonlandırılır ve ihtiyaç duyulduğunda tekrar başlatılır. Bu nedenle, Service Worker'ların onfetch ve onmessage işleyicilerindeki genel duruma göre hareket edilemez. Kalıcı olması ve yeniden başlatma işlemleri sırasında tekrar kullanılması gereken bilgiler varsa Service Worker'lar IndexedDB API'ye erişir.
  • Service Worker'lar Promise'lerden yoğun bir şekilde yararlanır. Bu konu hakkında bilginiz yoksa bu makaleyi okumayı bırakıp Promise'lere giriş başlıklı yazıyı incelemelisiniz.

Service Worker'ın yaşam döngüsü

Service Worker'ın yaşam döngüsü, web sayfanızınkinden tamamen ayrıdır.

Sitenize Service Worker yüklemek için Service Worker'ı sayfanızın JavaScript'inde kaydetmeniz gerekir. Service Worker kaydı, tarayıcının arka planda Service Worker yükleme adımını başlatmasına neden olur.

Yükleme adımında genellikle bazı statik öğeleri önbelleğe alırsınız. Tüm dosyalar sorunsuzca önbelleğe alındıysa Service Worker yüklenmiş olur. Herhangi bir dosya indirilemez ve önbelleğe alınamazsa yükleme adımı başarısız olur. Bunun sonucunda, Service Worker etkinleştirilmez (yani yüklenmez). Böyle bir durumla karşılaştığınızda endişelenmeyip tekrar deneyin. Ancak yükleme yapılmışsa statik öğeler önbelleğe alınmış demektir.

Yükleme işleminin ardından etkinleştirme adımı gelir. Bu adım, eski önbelleklerin yönetiminin sağlanması (Service Worker güncelleme bölümünde bu konuya değineceğiz) için mükemmel bir fırsattır.

Etkinleştirme adımından sonra Service Worker, kapsamına giren tüm sayfaları kontrol eder. Ancak Service Worker'ın ilk kaydedildiği sayfa, bir kez daha yüklenene kadar kontrol edilmez. Service Worker kontrolü elde ettiğinde, iki durumdan birinde olur: Ya bellekten tasarruf etmek için sonlandırılır ya da sayfanızdan ağ isteği veya mesaj geldiğinde ortaya çıkan mesaj etkinliklerini ve getirme işlemlerini yönetir.

Aşağıda, ilk kurulumda Service Worker'ın yaşam döngüsünün son derece basitleştirilmiş bir haline yer verilmiştir.

Service Worker için uygulamaları yeniden yapılandırmayı göz önünde bulundurmamız gerekir mi?

Service Worker'lar, uygulama mimarisine bazı ince değişiklikler getirir. Uygulamanızın tümünü bir HTML dizesine sığdırmak yerine AJAX stili işlem yapabilirsiniz. Bu şekilde, daima önbelleğe alınan ve ağ olmadan da başlatılabilen bir kabuğa ve düzenli olarak yenilenip ayrı olarak yönetilen içeriğe sahip olursunuz.

Bu bölünmenin etkisi büyüktür. İlk ziyaretinizde, sunucuda içerik oluşturabilir ve Service Worker'ı istemciye yükleyebilirsiniz. Sonraki ziyaretlerde yalnızca veri isteğinde bulunursunuz.

Bu size yardımcı oldu mu?
Bunu nasıl iyileştirebiliriz?