Hizmet çalışanı geliştirme deneyimini iyileştirme

Service Worker'ın yaşam döngüsü, öngörülebilir bir yükleme ve güncelleme süreci sağlar ancak yerel geliştirme döngüsünü biraz daha hassas hale getirebilir.

Tipik yerel geliştirme döngüsünde, geliştiriciler dosyalarda yapılan değişiklikleri bir metin düzenleyiciye kaydeder, ardından değişiklikleri doğrulamak için tarayıcıya geçer ve işlem tekrar eder. Buna Service Worker de dahil olduğunda bu döngü büyük ölçüde aynıdır ancak geliştiricinin beklentileri ile tarayıcının yaptıkları arasında farklılıklar olabilir.

Yerel geliştirme istisnaları

Genel olarak Service Worker API'leri yalnızca HTTPS üzerinden sunulan sayfalarda kullanılabilir. Ancak bu kuralın HTTP üzerinden kullanılabildiği istisnaları vardır. Önemli bir istisna, yerel geliştirme için uygun olan localhost üzerinden yayınlanan sayfalardır.

Ancak geliştiricilerin bir hosts dosyasında localhost dışında yerel ana makine adlarını belirtmeleri çok sık karşılaşılan bir durum değildir. Bu, birden çok proje için ayrı ana makine adları gerektiğinde yerel geliştirme ortamlarında gereklidir. Bu gibi durumlarda, kendinden imzalı bir sertifikanın temel hazırlığı yeterli olur.

Daha kullanışlı bir geçici çözüm, tarayıcıya Service Worker testi için istisnalar belirleme talimatı vermektir. Chrome için chrome://flags/#unsafely-treat-insecure-origin-as-secure bölümüne gidip güvenli olmayan kaynakları güvenli kaynaklar olarak değerlendirilecek şekilde belirtin. Firefox, about:config içindeki devtools.serviceWorkers.testing.enabled ayarıyla güvenli olmayan kaynaklardaki hizmet çalışanlarını test etmek için bir yol sunar.

Servis çalışanı geliştirme araçları

Bir Service Worker'ın da dahil olduğu yerel geliştirme, beklenmedik davranışlara yol açabilir. Örneğin, eski sürüme dönüştürülmemiş statik öğeler için bir yalnızca önbellek stratejisinin olduğunu veya değişiklik yapıldıktan sonra yeniden yüklendiğinde güncellenmesi beklenen, önbelleğe alınmış bir "çevrimdışısınız" sayfası olduğunu varsayalım. Bu öğelerin eski sürümleri her zaman bir Cache örneğinden sunulduğu için görünüşe göre hiçbir zaman güncellenmezler. Bu sinir bozucu olsa da Service Worker'ın sadece kendi istediği şeyi yapması gerekse de testi kolaylaştırmanın bazı yolları var.

Bir hizmet çalışanını test etmenin açık farkla en etkili yolu, Chrome'daki gizli pencereler veya Firefox'un Gizli Tarama özelliği gibi gizli tarama pencerelerinden yararlanmaktır. Gizli tarama penceresini her açtığınızda yeni bir başlangıç yaparsınız. Etkin hizmet çalışanı ve açık Cache örneği yok. Bu tür testlerin rutini şöyledir:

1. Gizli bir tarama penceresi açın.
2. Service Worker kaydeden bir sayfaya gidin.
3. Hizmet çalışanının beklediğiniz gibi davrandığını doğrulayın.
4. Gizli pencereyi kapatın.
5. Tekrarla.

Bu işlem sayesinde, Service Worker'ın yaşam döngüsünü doğru şekilde taklit etmiş olursunuz.

Chrome DevTools Uygulama panelinde sunulan diğer test araçları da yardımcı olabilir. Ancak bu araçlar, hizmet çalışanının yaşam döngüsünü bazı şekillerde değiştirebilir.

Uygulama panelinde, geçerli sayfa için etkin hizmet çalışanlarını gösteren Service Workers etiketli bir alt panel bulunur. Her etkin hizmet çalışanı manuel olarak güncellenebilir ve hatta kaydı tamamen iptal edilebilir. Üst kısımda geliştirmenize yardımcı olacak üç açma/kapatma düğmesi de vardır.

1. Çevrimdışı, çevrimdışı koşulları simüle eder. Bu, etkin bir hizmet çalışanının çevrimdışı içerik sunup sunmadığını test ederken faydalı olur.
2. Yeniden yüklemede güncelle: Geçiş yapıldığında, sayfa her yeniden yüklendiğinde mevcut hizmet çalışanı yeniden getirilir ve değiştirilir.
3. Ağı atla seçeneği etkinleştirildiğinde, Service Worker'ın fetch etkinliğindeki herhangi bir kodu atlar ve her zaman ağdan içerik getirir.

Bunlar, etkin bir hizmet çalışanıyla proje geliştirirken oldukça faydalı olan Ağ için atla gibi yararlı açma/kapatma anahtarlarıdır. Aynı zamanda, hizmet çalışanı olmadan deneyimin beklendiği gibi çalıştığından emin olmak da önemlidir.

Firefox'un geliştirici araçlarında benzer bir uygulama paneli vardır ancak işlev, geçerli sayfadaki etkin Service Worker'ların kaydını manuel olarak iptal etme seçeneğinin yanı sıra hangi Service Worker'ların yüklendiğini göstermekle sınırlıdır. Bu yöntem de aynı derecede faydalıdır, ancak yerel geliştirme döngüsünde daha fazla manuel çaba gerektirir.

Üst karakter ve yeniden yükle

Etkin bir Service Worker ile yerel olarak geliştirme yaparken, yenileme sırasında güncelleme veya ağ için atlama gibi işlevlere ihtiyaç duyulmaz. Ayrıca, Üst Karakter tuşunu basılı tutup yenile düğmesine basmak da yararlı olur.

Buna, ağın HTTP önbelleğini atlayan zorunlu yenileme adı verilir. Bir hizmet çalışanı etkin olduğunda zorunlu yenileme de hizmet çalışanının tamamen atlanmasını sağlar.

Belirli bir önbelleğe alma stratejisinin beklendiği gibi çalışıp çalışmadığıyla ilgili belirsizlik varsa bu işlev harikadır. Ayrıca, bir hizmet çalışanı olan ve olmayan davranışları karşılaştırmak için ağdaki her şeyi toplamak faydalıdır. Daha da iyisi, bu belirli bir davranıştır; dolayısıyla Service Worker'ları destekleyen tüm tarayıcılar bunu gözlemler.

Önbellek içeriklerini inceleme

Önbellek incelenemezse, önbelleğe alma stratejisinin beklendiği gibi çalışıp çalışmadığını söylemek zordur. Elbette, önbellek kod içinde incelenebilir, ancak bu işlem, göreve daha uygun bir görsel araç olduğunda hata ayıklayıcılar ve/veya console ifadeleri içeren bir işlemdir. Chrome Geliştirici Araçları'ndaki Uygulama paneli, Cache örneklerinin içeriğini incelemek için bir alt panel sunar.

Bu alt panel, aşağıdaki gibi işlevler sunarak hizmet çalışanlarının geliştirilmesini kolaylaştırır:

• Cache örneğin adlarını görüntüleyin.
• Önbelleğe alınan öğelerin yanıt gövdesini ve ilişkili yanıt başlıklarını inceleme özelliği.
• Bir veya daha fazla öğeyi önbellekten çıkarın, hatta Cache örneğinin tamamını silin.

Bu grafik kullanıcı arayüzü, öğelerin hizmet çalışanı önbelleğine eklenip eklenmediğini, güncellendiğini veya tamamen kaldırılıp kaldırılmadığını görmek için hizmet çalışanı önbelleklerinin incelenmesini kolaylaştırır. Firefox, ayrı bir Depolama alanı panelinde bulunmasına rağmen, benzer işlevlere sahip kendi önbellek görüntüleyicisini sunmaktadır.

Depolama alanı kotasını simüle etme

Çok sayıda büyük statik öğenin (ör. yüksek çözünürlüklü resimler) bulunduğu web sitelerinde depolama alanı kotalarına ulaşılması mümkündür. Bu durumda, tarayıcı yeni öğelere yer açmak için eski veya fedakarlık etmeye değer olduğu öğeleri önbellekten çıkarır.

Depolama alanı kotalarıyla ilgilenmek, hizmet çalışanı geliştirme sürecinin bir parçası olmalıdır. Workbox, bu süreci kendi başınıza yönetmekten daha basit hale getirir. Workbox ile veya Workbox olmadan, önbellek yönetimi mantığını test etmek için özel bir depolama alanı kotasını simüle etmek iyi bir fikir olabilir.

Chrome'un Geliştirici Araçları'ndaki Uygulama panelinde, geçerli depolama alanı kotasının ne kadarının sayfa tarafından kullanıldığına dair bilgi veren bir Depolama alt paneli bulunur. Ayrıca, megabayt cinsinden özel bir kota belirtilmesine de olanak tanır. Gerçekleştiğinde Chrome, test edilebilmesi için özel depolama kotasını zorunlu kılar.

Bu arada, bu alt panelde bir Site verilerini temizle düğmesi ve düğme tıklandığında nelerin silinmesi gerektiğini gösteren bir dizi ilişkilendirilmiş onay kutusu da bulunur. Bunlar arasında, açık Cache örnekleri ve sayfayı kontrol eden tüm etkin hizmet çalışanlarının kaydını iptal etme olanağı bulunur.

Daha kolay geliştirme, daha iyi üretkenlik

Geliştiriciler kısıtlanmadığında daha özgüvenli bir şekilde çalışabilir ve daha üretken olabilirler. Hizmet çalışanıyla yerel gelişim süreci incelenebilir ancak bu sürecin zorlu olması gerekmez. Bu ipuçları ve püf noktaları sayesinde, aktif bir hizmet çalışanıyla geliştirme yapmak çok daha şeffaf ve öngörülebilir olmalı, böylece daha iyi bir geliştirici deneyimi sağlanacaktır.