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

tl;dr

Chrome 68'den itibaren, Service Worker komut dosyası güncellemelerini kontrol eden HTTP istekleri daha uzun süre HTTP önbelleği tarafından karşılanır varsayılan olarak. Bu çözüm, geliştiriciler için yaygın bir sorundur. Service Worker komut dosyanıza yanlışlıkla bir Cache-Control üstbilgisi ayarlamak gecikmeli güncellemelerden sorumludur.

/service-worker.js komut dosyanızı sunarak HTTP önbelleğe almayı daha önce devre dışı bıraktıysanız Cache-Control: max-age=0 kullanıyorsanız yeni varsayılan ayar nedeniyle hiçbir değişiklik görmemeniz gerekir. gösterir.

Ayrıca, Chrome 78'den itibaren baytlar için bayt karşılaştırması Service Worker üzerinden yüklenen komut dosyalarına uygulanır importScripts(). İçe aktarılan bir komut dosyasında yapılan herhangi bir değişiklik, hizmet çalışanı güncelleme akışı üst düzey hizmet çalışanının yapacağı bir değişiklik gibi.

Arka plan

Bir hizmet çalışanının kapsamındaki yeni bir sayfaya her gittiğinizde açıkça registration.update() çağrısı yapın JavaScript'ten veya hizmet çalışanı "uyandığında" push veya sync etkinliği üzerinden buna paralel olarak, hizmet çalışanı komut dosyasında yapılan güncellemeleri aramak için navigator.serviceWorker.register() çağrısı.

Bu makalenin amacı doğrultusunda, URL'sinin /service-worker.js olduğunu ve bu URL'nin importScripts() için tek bir çağrı içerir, hizmet çalışanı içinde çalıştırılan ek kodu yükler:

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

// Other top-level code goes here.

Neler değişiyor?

Chrome 68'den önce /service-worker.js için güncelleme isteği HTTP önbelleği üzerinden yapılırdı (çoğu getirme işleminde olduğu gibi). Yani, komut dosyası ilk olarak Cache-Control: max-age=600 ile gönderilmişse sonraki 600 saniye (10 dakika) içinde yapılan güncellemeler ağa aktarılmayacak, dolayısıyla kullanıcı hizmet çalışanının en güncel sürümünü alamayabilir. Ancak max-age 86400 (24 saat) değerinin üzerindeyse kullanıcıların takılıp kalmasını önlemek için 86400 olarak kabul edilir. sonsuza kadar sürecektir.

68'den itibaren hizmet çalışanı için güncelleme istenirken HTTP önbelleği yoksayılacak bu nedenle mevcut web uygulamalarında, bu API'lere ve diğer uygulamalara hizmet çalışanı komut dosyası. importScripts istekleri yine de HTTP önbelleği üzerinden iletilecektir. Ama bu üzerinde kontrol olanağı sunan yeni bir kayıt seçeneği olan updateViaCache, artık yalnızca varsayılan inceleyeceğiz.

updateViaCache

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

Değerler, tarayıcının standart HTTP önbelleğinin güncel hizmet çalışanı kaynaklarını kontrol etmek için HTTP isteğinde bulunulduğunda devreye girer.

  • 'imports' olarak ayarlanırsa /service-worker.js komut dosyasıdır ancak içe aktarılan komut dosyaları getirilirken danışılır (Örneğimizde path/to/import.js). Bu, varsayılan değerdir ve indirin.

  • 'all' olarak ayarlandığında hem üst düzey /service-worker.js komut dosyası ve hizmet içine aktarılan tüm komut dosyaları çalışan, örneğin path/to/import.js. Bu seçenek, Chrome'daki önceki davranışa karşılık gelir önceki sürümlerden biri yüklüdür.

  • 'none' olarak ayarlanırsa üst düzey /service-worker.js veya içe aktarılan komut dosyaları; örneğin, path/to/import.js.

Örneğin, aşağıdaki kod bir hizmet çalışanı kaydeder ve HTTP önbelleğinin veya /service-worker.js komut dosyası güncellemelerini kontrol ederken hiçbir zaman /service-worker.js içinde importScripts() aracılığıyla referans verilen komut dosyaları:

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

İçe aktarılan komut dosyalarında güncelleme olup olmadığını denetler

Chrome 78'den önceki sürümlerde, importScripts() yalnızca bir kez alınır (ilk olarak HTTP önbelleğiyle veya ağında (updateViaCache yapılandırmasına bağlı olarak) gösterilir. Bu ilk harften sonra içe aktarma işlemi, tarayıcı tarafından dahili olarak depolanır ve hiçbir zaman yeniden getirilmez.

Daha önce yüklenmiş bir hizmet çalışanını içe aktarılan bir komut dosyası, komut dosyasının URL'sini değiştirmekti. Genellikle semver value (ör. importScripts('https://example.com/v1.1.0/index.js')) veya içerik (ör. importScripts('https://example.com/index.abcd1234.js')). CEVAP içe aktarılan URL'yi değiştirmenin yan etkisi, üst düzey hizmet çalışanının komut dosyasının içeriği değişir ve bu da Service Worker güncelleme akışı.

Chrome 78'den itibaren, üst düzey hizmet çalışanı dosyası üzerinde çalışıyorsa içe aktarılan komut dosyalarının içeriği değişmediğinden emin olun. Seçtiğiniz düzenleme moduna Cache-Control başlık kullanıldı, bu içe aktarılan komut dosyası kontrolleri şunun tarafından yerine getirilebilir: updateViaCache 'all' veya 'imports' (yani veya kontroller doğrudan ağ üzerinden yapılabilir. updateViaCache, 'none' olarak ayarlandı.

İçe aktarılmış bir komut dosyası için yapılan güncelleme denetimi baytlar arasında bir farka neden oluyorsa hizmet çalışanı tarafından depolanan veri miktarına kıyasla üst düzey hizmet devreye girse bile tam hizmet çalışanı güncelleme akışını aynı kalır.

Chrome 78 davranışı, Firefox'un implemented ile eşleşir Firefox 56'da kullanıma sunulmuştu. Safari bu davranışı zaten olur.

Geliştiricilerin ne yapması gerekiyor?

/service-worker.js komut dosyanızı sunarak HTTP önbelleğe almayı etkili bir şekilde devre dışı bıraktıysanız değeri Cache-Control: max-age=0 (veya benzer bir değer) görüyorsanız yeni varsayılan davranış.

/service-worker.js komut dosyanızı, kasıtlı olarak HTTP önbelleğe alma etkin durumdayken sunuyorsanız barındırma ortamınız için varsayılan ayar olduğu için /service-worker.js için yapılan ek HTTP isteklerinde bir artış görmeye başlayabilirsiniz sunucunuz. Bunlar daha önce HTTP önbelleği tarafından yerine getirilen isteklerdir. Şunu istiyorsanız: sayfanızın güncelliğini etkilemek için Cache-Control üstbilgi değerinin kullanılmasına izin vermeye devam edin. /service-worker.js, aşağıdaki durumlarda updateViaCache: 'all' ayarını açıkça belirtmeniz gerekir: hizmet çalışanınızı kaydetme.

Eski tarayıcı sürümlerinde çok sayıda kullanıcı bulunabileceğinden, hizmet çalışanı komut dosyalarında Cache-Control: max-age=0 HTTP başlığını ayarlamaya devam et yeni tarayıcılar bunları yoksayabilir.

Geliştiriciler, bu fırsatı, içe aktarılan öğeleri açık bir şekilde etkinleştirmek isteyip istemediklerine karar vermek için kullanabilir. komut dosyalarını HTTP önbelleğinden çıkarmalı ve hizmet çalışanına updateViaCache: 'none' eklemelidir uygun olması gerekir.

İçe aktarılan komut dosyaları sunuluyor

Chrome 78'den itibaren geliştiriciler, kaynaklar importScripts() üzerinden yüklendi, çünkü bunlar artık kontrol edilecek güncellemelerine göz atın.

Bu ek HTTP trafiğinden kaçınmak isterseniz uzun ömürlü Semver veya karmalar içeren komut dosyaları sunarken Cache-Control üstbilgileri ve 'imports' öğesinin varsayılan updateViaCache davranışını temel alır.

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

Daha fazla bilgi

"Hizmet Çalışanı Yaşam Döngüsü" ve "Önbelleğe alma en iyi uygulamaları max-age getchas", gibi, web'e herhangi bir şey dağıtan tüm geliştiriciler için okuması önerilir.