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

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

Tipik yerel geliştirme döngüsünde, geliştiriciler dosyalarda yapılan değişiklikleri bir metin düzenleyicide kaydederler. ve ardından değişiklikleri doğrulamak için tarayıcıya geçin, işlem tekrar eder. Bir hizmet çalışanı 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 farklar olabilir.

Yerel geliştirme ile ilgili istisnalar

Genel olarak Service Worker API'leri yalnızca HTTPS üzerinden sunulan sayfalarda kullanılabilir. ancak bu kuralın HTTP üzerinden kullanılabileceği istisnaları vardır. Kayda değer bir istisna, localhost üzerinden sunulan ve yerel geliştirme için iyi sonuç veren sayfalardır.

Ancak, geliştiricilerin localhost dışında yerel ana makine adlarının Google tarafından ana makine dosyaları oluşturun. Bu, birden fazla projenin ayrı ana makine adları gerektirdiği yerel geliştirme ortamlarında gereklidir. Bu tür durumlarda kendinden imzalı bir sertifikanın temel hazırlığının yapılması yeterlidir.

Daha pratik bir geçici çözüm, tarayıcıya Service Worker testi için istisnalar oluşturma talimatı vermektir. Chrome için chrome://flags/#unsafely-treat-insecure-origin-as-secure adresine gidin ve güvenli kaynak olarak değerlendirilecek güvenli olmayan başlangıç noktalarını belirtin. Firefox, about:config ürünündeki devtools.serviceWorkers.testing.enabled ayarını kullanarak hizmet çalışanlarını güvenli olmayan kaynaklarda test etmenin bir yolunu sunar.

Service Worker geliştirme yardımcıları

Karma bir hizmet çalışanı olan yerel geliştirmeler, beklenmedik davranışlara neden olabilir. Örneğin, sürümü dönüştürülmemiş statik öğeler veya önceden önbelleğe alınmış "çevrimdışısınız" için yalnızca önbellek stratejisinin kullanıldığını varsayalım. bir web sayfası oluşturabilirsiniz. Bu öğelerin eski bir sürümü her zaman bir Cache örneğinden sunulduğu için, görünüşte hiç güncellenmezler. Can sıkıcı bir şekilde, Service Worker sadece tasarlandığı işi yapıyor. ancak testi kolaylaştırmanın bazı yolları var.

Bir Service Worker'ı test etmenin açık ara en etkili yolu, Chrome'daki gizli pencereler gibi gizli tarama pencerelerini kullanmaktır. veya Firefox'un Özel Tarama özelliğini kullanabilirsiniz. Gizli tarama penceresi 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 testler için rutin şöyledir:

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

Bu sayede, hizmet çalışanının yaşam döngüsünü doğru şekilde taklit etmiş olursunuz.

Chrome Geliştirici Araçları Uygulama panelindeki diğer test araçları hizmet çalışanı yaşam döngüsünü bir şekilde değiştirebilir.

Uygulama panelinde Hizmet Çalışanları, geçerli sayfa için etkin hizmet çalışanlarını gösterir. Her etkin hizmet çalışanı manuel olarak güncellenebilir, hatta kaydı tamamen iptal edilebilir. En üstte, geliştirmeye yardımcı olan üç 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 yardımcı olur.
2. Yeniden yüklendiğinde güncelle: Açıldığında, sayfa her yeniden yüklendiğinde geçerli hizmet çalışanını yeniden getirir ve değiştirir.
3. Ağı atla seçeneği, etkinleştirildiğinde bir hizmet çalışanının fetch etkinliğindeki tüm kodları atlar ve her zaman ağdan içerik getirir.

Bunlar, özellikle Ağı atla, Bu, aktif bir Service Worker ile proje geliştirirken deneyimin bir hizmet çalışanı olmadan beklendiği gibi işlemesini de istiyorsunuz.

Firefox'un geliştirici araçlarında benzer bir uygulama paneli vardır. Ancak işlevler yalnızca hangi hizmet çalışanlarının yüklendiğini göstermekle sınırlıdır. Ayrıca geçerli sayfadaki tüm etkin hizmet çalışanlarının kaydını manuel olarak iptal etme özelliği. Aynı şekilde faydalıdır ancak yerel geliştirme döngüsünde daha fazla manuel işlem gerektirir.

Üst karakter ve yeniden yükle

Yenileme sırasında güncelleme veya ağ için atlama gibi işlevlere ihtiyaç duymadan, etkin bir hizmet çalışanıyla yerel olarak geliştirme yaparken Üst Karakter tuşunu basılı tutup yenile düğmesine basmak da yararlıdır.

Buna zorunlu yenileme denir ve ağın HTTP önbelleğini atlar. Bir hizmet çalışanı aktifken zorunlu yenileme, hizmet çalışanını da tamamen atlar.

Belirli bir önbelleğe alma stratejisinin amaçlandığı gibi çalışıp çalışmadığı konusunda belirsizlik varsa bu işlev harikadır. Hizmet çalışanı olan ve olmayan davranışları karşılaştırmak için ağdaki her şeyi almak faydalıdır. Daha da iyisi, belirli bir davranış olduğundan Service Worker'ları destekleyen tüm tarayıcılar bunu gözlemler.

Önbellek içeriğini inceleme

Önbellek denetlenemiyorsa önbelleğe alma stratejisinin amaçlandığı gibi çalışıp çalışmadığını anlamak zordur. Elbette, önbellek kodda incelenebilir. Ancak bu, göreve daha uygun bir görsel araç olduğunda hata ayıklayıcıları ve/veya console ifadelerini içeren bir işlemdir. Chrome Geliştirici Araçları'ndaki Uygulama panelinde, Cache örneğinin içeriğini inceleyebileceğiniz bir alt panel bulunur.

Bu alt panel, aşağıdaki gibi işlevler sunarak Service Worker'ları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 olanağı.
• Önbellekten bir veya daha fazla öğe çıkarın, hatta Cache örneğin tamamını silin.

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

Depolama alanı kotası simülasyonu

Ç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şmak mümkündür. Böyle bir durumda, tarayıcı, yeni öğelere yer açmak için eski veya fedakar olduğunu düşündüğü öğ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önetmeye kıyasla basitleştirir. Ancak Workbox etkin olsun veya olmasın, önbellek yönetimi mantığını test etmek için özel bir depolama alanı kotasının simülasyonunu yapmak 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 bilgiler sunan bir Depolama alt paneli bulunur. Ayrıca, megabayt cinsinden özel kota belirtilmesine de olanak tanır. Geçerli olduğunda Chrome, test edilebilmesi için özel depolama kotasını zorunlu kılar.

Bu alt panel, tesadüfen bir Site verilerini temizle düğmesi ve bu düğme tıklandığında nelerin temizlenmesi gerektiğine dair tam bir dizi onay kutusu içerir. Bu öğeler arasında, açık Cache örnekleri ve sayfayı kontrol eden etkin hizmet çalışanlarının kaydını iptal etme özelliği bulunur.

Daha kolay geliştirme, daha iyi üretkenlik

Geliştiriciler zorluk yaşamadıklarında daha özgüvenli çalışabilirler ve daha üretken olabilirler. Service Worker ile yerel geliştirmede ince ayrıntılar olabilir ancak bu işlemin zahmetli olması gerekmez. Bu ipuçları ve püf noktaları sayesinde aktif bir Service Worker ile geliştirme yapmak çok daha şeffaf ve öngörülebilir olmalıdır. daha iyi bir geliştirici deneyimi sağlar.