Varsayılan olarak daha yeni hizmet çalışanları

Cem Posnick
Jeff Posnick
Twitter GitHub Ana sayfa

tl;dr

Chrome 68'den itibaren, Service Worker komut dosyasında yapılan güncellemeleri kontrol eden HTTP istekleri artık varsayılan olarak HTTP önbelleği tarafından yerine getirilmeyecektir. Bu durum, hizmet çalışanı komut dosyanıza yanlışlıkla Cache-Control üstbilgisi ayarlamanın güncellemelerin gecikmesine neden olabileceği yaygın bir geliştirici sorunuyla mücadele eder.

/service-worker.js komut dosyanızı Cache-Control: max-age=0 ile sunarak HTTP önbelleğe alma özelliğini zaten devre dışı bıraktıysanız yeni varsayılan davranış nedeniyle herhangi bir değişiklik görmezsiniz.

Ek olarak, Chrome 78'den itibaren baytlar arası karşılaştırma, importScripts() aracılığıyla bir Service Worker'a yüklenen komut dosyalarına da uygulanacaktır. İçe aktarılan bir komut dosyasında yapılan herhangi bir değişiklik, üst düzey Service Worker'da yapılan bir değişiklik gibi Service Worker güncelleme akışını tetikler.

Arka plan

Bir hizmet çalışanının kapsamındaki yeni bir sayfaya gittiğinizde JavaScript'ten açık bir şekilde registration.update() çağrısı yaptığınızda veya bir hizmet çalışanı push ya da sync etkinliği aracılığıyla "uyandırıldığında" buna paralel olarak tarayıcı, buna paralel olarak başlangıçta navigator.serviceWorker.register() çağrısına aktarılan JavaScript kaynağını isteyerek hizmet çalışanı komut dosyasında güncelleme olup olmadığını kontrol eder.

Bu makalenin amaçları doğrultusunda, URL'sinin /service-worker.js olduğunu ve hizmet çalışanının içinde çalıştırılan ek kodu yükleyen tek bir importScripts() çağrısı içerdiğini varsayalım:

// Inside our /service-worker.js file:
importScripts('path/to/import.js');

// Other top-level code goes here.

Neler değişecek?

Chrome 68'den önce /service-worker.js için güncelleme isteği HTTP önbelleği üzerinden yapılırdı (çoğu getirme işlemi olduğu gibi). Bu, komut dosyası başlangıçta Cache-Control: max-age=600 ile gönderilmişse sonraki 600 saniye (10 dakika) içindeki güncellemelerin ağa yönlendirilmeyeceğinden kullanıcının hizmet çalışanının en güncel sürümünü alamayacağı anlamına geliyordu. Ancak max-age, 86400'den (24 saat) büyükse kullanıcıların belirli bir sürümde sürekli olarak kalmaması için 86400 gibi değerlendirilir.

68'den itibaren Service Worker komut dosyasında güncelleme istenirken HTTP önbelleği yoksayılacaktır. Bu nedenle mevcut web uygulamaları, Service Worker komut dosyası için istek sıklığında artış görebilir. importScripts istekleri HTTP önbelleği üzerinden iletilir. Ancak bu varsayılan ayardır. Bu davranış üzerinde kontrol olanağı sunan yeni bir kayıt seçeneği olan updateViaCache mevcuttur.

updateViaCache

Geliştiriciler artık navigator.serviceWorker.register() çağırırken yeni bir seçenek olan updateViaCache parametresi iletebilirler. Şu üç değerden birini alır: 'imports', 'all' veya 'none'.

Değerler, güncellenmiş Service Worker kaynaklarını kontrol etmek için HTTP isteği yapılırken tarayıcının standart HTTP önbelleğinin devreye girip girmeyeceğini ve nasıl devreye gireceğini belirler.

  • 'imports' olarak ayarlandığında, /service-worker.js komut dosyası güncellemeleri kontrol edilirken hiçbir zaman HTTP önbelleğine başvurulmaz ancak içe aktarılan komut dosyaları alınırken başvurulur (örneğimizde path/to/import.js). Bu, varsayılan değerdir ve Chrome 68'den başlayan davranışla eşleşir.

  • 'all' olarak ayarlandığında hem üst düzey /service-worker.js komut dosyası hem de path/to/import.js gibi hizmet çalışanı içinde içe aktarılan komut dosyaları için istek yapılırken HTTP önbelleğine başvurulur. Bu seçenek, Chrome 68'den önceki Chrome davranışına karşılık gelir.

  • 'none' olarak ayarlandığında, üst düzey /service-worker.js veya varsayıma dayalı path/to/import.js gibi içe aktarılan komut dosyaları için istek yapılırken HTTP önbelleğine başvurulmaz.

Örneğin, aşağıdaki kod bir hizmet çalışanı kaydeder ve /service-worker.js komut dosyası ya da /service-worker.js içinde importScripts() aracılığıyla referans verilen komut dosyaları için güncellemeler kontrol edilirken HTTP önbelleğine hiçbir zaman danışılmamasını sağlar:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {
    updateViaCache: 'none',
    // Optionally, set 'scope' here, if needed.
  });
}

İçe aktarılan komut dosyalarında yapılan güncellemeleri kontrol eder

Chrome 78'den önce, importScripts() aracılığıyla yüklenen herhangi bir Service Worker komut dosyası yalnızca bir kez alınırdı (önce HTTP önbelleğine göre veya updateViaCache yapılandırmasına bağlı olarak ağ üzerinden kontrol edilir). Bu ilk alma işleminden sonra, dosya tarayıcı tarafından dahili olarak depolanır ve hiçbir zaman yeniden getirilmez.

Önceden yüklenmiş bir hizmet çalışanının, içe aktarılan bir komut dosyasında yapılan değişiklikleri almaya zorlamanın tek yolu, komut dosyasının URL'sini değiştirmekti.Bu değişikliği genellikle bir semver değer (ör. importScripts('https://example.com/v1.1.0/index.js')) veya içeriğin bir karması (ör.importScripts('https://example.com/index.abcd1234.js')) ekleyerek yapabilirsiniz. İçe aktarılan URL'yi değiştirmenin yan etkisi, üst düzey hizmet çalışanı komut dosyası çalışanlarının akış değişikliğinin değişmesidir. Bu da güncelleme hizmeti tetikler.

Chrome 78'den itibaren, üst düzey bir hizmet çalışanı dosyası için her güncelleme kontrolü yapıldığında, içe aktarılan komut dosyalarının içeriğinin değişip değişmediğini belirlemek için aynı anda kontroller de yapılır. Kullanılan Cache-Control üstbilgilerine bağlı olarak, updateViaCache, 'all' veya 'imports' (varsayılan değer) olarak ayarlanmışsa içe aktarılan bu komut dosyası kontrolleri HTTP önbelleği tarafından yerine getirilebilir ya da updateViaCache, 'none' olarak ayarlandıysa kontroller doğrudan ağa ters düşebilir.

İçe aktarılan bir komut dosyası için yapılan güncelleme kontrolü, hizmet çalışanı tarafından önceden depolanan kodla karşılaştırıldığında baytlar arasında baytlar arasında bir farka neden olursa üst düzey hizmet çalışanı dosyası aynı kalsa bile bu durum da tam hizmet çalışanı güncelleme akışını tetikler.

Chrome 78 davranışı, Firefox'un birkaç yıl önce Firefox 56'da uyguladığı davranışla eşleşir. Safari de bu davranışı zaten uyguluyor.

Geliştiricilerin ne yapması gerekiyor?

/service-worker.js komut dosyanızı Cache-Control: max-age=0 (veya benzer bir değerle) sunarak HTTP önbelleğe alma özelliğini etkin bir şekilde devre dışı bıraktıysanız yeni varsayılan davranış nedeniyle herhangi bir değişiklik görmezsiniz.

/service-worker.js komut dosyanızı kasıtlı olarak veya yalnızca barındırma ortamınız için varsayılan olması nedeniyle HTTP önbelleği etkin olarak sunarsanız, sunucunuza yönelik /service-worker.js için yapılan ek HTTP isteklerinde artış görmeye başlayabilirsiniz. Bunlar daha önce HTTP önbelleği tarafından yerine getirilen isteklerdir. Cache-Control üst bilgi değerinin /service-worker.js güncelliğini etkilemesine izin vermeye devam etmek istiyorsanız hizmet çalışanınızı kaydederken açıkça updateViaCache: 'all' değerini ayarlamaya başlamanız gerekir.

Eski tarayıcı sürümlerinde çok sayıda kullanıcı bulunabileceği göz önünde bulundurulduğunda, yeni tarayıcılar bunları dikkate almasa bile Service Worker komut dosyalarında Cache-Control: max-age=0 HTTP üst bilgisini ayarlamaya devam etmek iyi bir fikirdir.

Geliştiriciler, içe aktarılan komut dosyalarını HTTP önbelleğine almayı açıkça devre dışı bırakmak isteyip istemediklerine karar vermek için bu fırsatı kullanabilir ve uygunsa hizmet çalışanı kayıtlarına updateViaCache: 'none' öğesini ekleyebilir.

İçe aktarılan komut dosyaları sunuluyor

Geliştiriciler artık güncellemeler için kontrol edileceğinden, Chrome 78'den itibaren importScripts() aracılığıyla yüklenen kaynaklar için daha fazla gelen HTTP isteği görebilirler.

Bu ek HTTP trafiğinden kaçınmak isterseniz URL'lerinde semver veya karma içeren komut dosyaları sunarken uzun ömürlü Cache-Control üst bilgileri ayarlayın ve 'imports' varsayılan updateViaCache davranışını kullanın.

Alternatif olarak, içe aktarılan komut dosyalarınızın sık yapılan güncellemeler için kontrol edilmesini istiyorsanız bunları Cache-Control: max-age=0 ile sunduğunuzdan veya updateViaCache: 'none' kullandığınızdan emin olun.

Daha fazla bilgi

Jake Archibald'ın "Hizmet Çalışanı Yaşam Döngüsü" ve "Önbelleğe alma en iyi uygulamaları ve max-age getchas" konuları, web'de herhangi bir şey dağıtan tüm geliştiricilerin okumalarını önermektedir.