Service Worker Nedir?

Herkese Merhaba 👋🏻

Bu yazımızın konusu Service Worker kavramı ve progressive web uygulamaları. Öncelikle service worker kavramını açıklayalım, ne olduğuna ve kısaca nasıl çalıştığına değinelim.

Service Worker, tarayıcınızın web sitenizden bağımsız olarak arka planda çalıştırabildiği, çalışması için kullanıcı aksiyonuna ihtiyaç duymadan bir Javascript betiğidir. Arkaplanda çalışabiliyor olması sayesinde web uygulamalarınıza çeşitli özellikler katar. Bu özelliklerden biri olan Push Notification'ları geçen haftaki yazımda anlatmıştım. Eğer nasıl çalıştığı hakkında fikir sahibi olmak isterseniz şu yazıyı okuyabilirsiniz: Push API Nedir, Nasıl Çalışır?

Service Workerlar, adından da anlaşılacağı üzere worker oldukları için direkt olarak DOM'a erişme şansları yoktur. Arka planda çalışırlar ve ön planda olup biten şeylere direkt olarak müdahil olamazlar. Eğer müdahale etmeleri gerekirse bu tarz işlemleri post message aracılığıyla yaparlar.

Service Worker'ın somut anlamda ne olduğunu açıkladık. Şimdi sıra çalışma mantığı ve becerilerine geldi. Öncelikle açıklamamız gereken mesele bir Service Worker'ın yaşam döngüsü.

Service Worker'ın Yaşam Döngüsü

Service Workerın web sitemizden tamamen ayrı çalıştığını söylemiştik. Her şeyden önce bir service worker tanımlayıp bunu tarayıcımızın tanıması için bu service workerı kaydetmeniz (register) gerekiyor. Kaydetme işlemi sırasında tarayıcımız service workerımızı tanıyor. Kaydetme işlemini yaptıktan sonra kullanıcının sayfanızı bir sonraki ziyaretinde bu service worker aktif hale gelecek.

Kaydetme işlemi bittikten sonra tarayıcımız service workerımızın yükleme (kurulum) aşamasına geçiyor. Yükleme sırasında genel olarak birtakım veriler önbelleğe alınıyor. Örneğin kullanıcınız çevrimdışıyken web sitenize bağlanmak isterse özelleştirilmiş bir hata mesajı göstermek istiyorsunuz. Bu vb. ögeleri önbelleğe alma işi bu aşamada yapılıyor. Eğer önbellekleme işlemi başarılı bir şekilde çalışırsa service workerımız kurulmuş oluyor ve bir sonraki adımımız olan aktifleştirme adımı başlıyor. Eğer önbellekleme işlemi yapılamazsa daha sonra tekrar deneniyor.

Aktifleştirme sürecini en çok kullanacağımız kısım eski önbelleklerin güncellenmesi işlemi olacak. Bu da ufak bir ipucu olarak kalsın burada.

Eğer aktifleştirme süreci de başarılı olursa artık service workerımız çalışmaya hazır demektir. Ancak service workerımızı ilk kaydettiğimiz zaman direkt olarak çalışmayacaktır. Aktifleştirme adımından sonra tekrar yüklenene kadar çalışmayacaktır.

Aşağıdaki görsel Google'ın dokümanlarından alınmıştır ve service workerın çalışma döngüsünü anlatmaktadır.

Öncelikle service workerımızı yüklüyoruz. Eğer hata alırsak yeniden deniyoruz, hata almazsak aktifleştirme işlemini yapıyoruz ve sonrasında service workerı sonlandırmak veya postMessage ile veri almak gibi işlemleri yapıyoruz ve tabiri caizse vitesi boşa alıyoruz (Idle olarak adlandırılan adım).

En temel anlamda service workerın çalışma şekli bu.

Öyle kafamıza göre service worker oluşturup kullanamıyoruz tabii. Bu olay tarayıcı tarafıyla ilgili bir mesele olduğu için her şeyden önce service worker kullanabilmek için tarayıcımızın bu desteği sağlıyor olması lazım.

Şu adresten tarayıcı desteği hakkında daha detaylı bilgi alabilirsiniz: https://caniuse.com/#search=service%20worker

Bunun dışında gerekli olan şeylerden birisi de güvenli bağlantı. Service Worker kullanıyorsanız mutlaka HTTPS üzerinden yayın yapıyor olmanız lazım.

Service worker hakkında genel olarak söylemek istediklerim bu kadardı. Kod örneklerini daha sonra videolu eğitim olarak vermek isterim. O yüzden şimdi değinmiyor.

Son olarak anlatmak istediğim konu Progressive Web Application dediğimiz güzel teknoloji. Service workerlar aracılığıyla oldukça fantastik işler yapabiliyoruz. Service workerlar bize mobil uygulamalar gibi çalışan web uygulamaları yapma imkanı sağlıyor.

Yapabileceğiniz güzel şeylere bir bakalım:

  • Çevrimdışı çalışma özelliği
  • Push notification / Bildirimler
  • Ana sayfaya ekleme, adres çubuğundan kurtulma vb.
  • Splash Screen

Birazcık açıklayalım bu maddeleri.

Service workerlar sayesinde o anki ağ durumu hakkında bilgi alabilirsiniz. Eğer kullanıcınız çevrimdışıysa bunu service worker sayesinde saptayabilir ve ona özelleştirilmiş bir hata ekranı gösterebilirsiniz. Hata ekranı göstermek yerine önbelleğe alınmış eski içeriklerinizi de gösterebilirsiniz. Burada yapacaklarınız tamamen sizin hayal gücünüze kalmış.

Service workerlarla birlikte hayatımıza giren bir diğer mesele de web sitelerinin masaüstü veya mobil cihazlara bildirim gönderebiliyor olması. Ayrıca bildirim göndermesi için web uygulamasının cihazda açık olmasına da gerek yok. Sadece tarayıcının açık olması yeterli. Arka planda çalışıyor olması bize böyle güzel bir özellik sağlıyor.

Service workerları kullanarak kullanıcılarınıza, web sitenizi telefonlarının ana sayfasına tıpkı bir uygulamaymış gibi eklemesini sağlayabilirsiniz. Uygulamanız açıldığında tarayıcı adres çubuğu, ayarlar vb. zımbırtılar görünmeyeceği için web siteniz tam anlamıyla bir uygulama gibi görünecektir. Ayrıca eğer isterseniz uygulamanız için bir splash screen de oluşturabilirsiniz.

Bu yazıda anlatacaklarım bu kadardı. Şuraya da bu yazıyı hazırlarken yararlandığım kaynakları ekleyeyim. Ayrıca şunu da belirteyim, bu kaynaklarda çeşitli güzel örnek kodlar da bulabilirsiniz. Birazcık kurcalayın 😊

Yorum Yok

Yorum Bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir