Bu kılavuzda, Workbox v4'te kullanımdan kaldırılan özellikler ve Workbox v3'ten yükseltme yaparken yapmanız gereken değişiklikler örneklerle açıklanmaktadır.
Zarar Veren Değişiklikler
çalışma kutusu-önbelleğe alma
Önceden önbelleğe alınan girişler için adlandırma kuralı güncellendi. Artık, URL'leri için düzeltme bilgilerine ihtiyaç duyan girişlerde (ör. ön önbelleğe alma manifestinde revision alanı içeren girişler) bu sürüm bilgileri, önbelleğe alma anahtarının bir parçası olarak, orijinal URL'ye eklenen özel bir __WB_REVISION__ URL sorgu parametresinde depolanacaktır. (Daha önce bu bilgiler, IndexedDB kullanılarak önbellek anahtarlarından ayrı olarak saklanıyordu.)
En yaygın kullanım alanı olan workbox.precaching.precacheAndRoute() aracılığıyla ön önbelleğe alma özelliğinden yararlanan geliştiricilerin, hizmet çalışanı yapılandırmalarında herhangi bir değişiklik yapması gerekmez. Workbox v4'e yükseltme yapıldıktan sonra kullanıcılarınızın önbelleğe alınmış öğeleri otomatik olarak yeni önbelleğe alma anahtarı biçimine taşınır ve bundan sonra ön önbelleğe alınmış kaynaklar eskisi gibi sunulmaya devam eder.
Önbellek Anahtarlarını Doğrudan Kullanma
Bazı geliştiricilerin, önbelleğe alma girişlerine workbox.precaching.precacheAndRoute() bağlamı dışında doğrudan erişmesi gerekebilir. Örneğin, ağdan gerçek bir resim getirilemediğinde "yedek" yanıt olarak kullanacağınız bir resmi önceden önbelleğe alabilirsiniz.
Önceden önbelleğe alınmış öğeleri bu şekilde kullanırsanız Workbox v4'ten itibaren, orijinal URL'yi önbelleğe alınmış girişi okumak için kullanılabilecek ilgili önbelleğe alma anahtarına dönüştürmek üzere ek bir adım atmanız gerekir. Bunu yapmak için workbox.precaching.getCacheKeyForURL(originURL) numaralı telefonu arayın.
Örneğin, 'fallback.png' alan adının önceden önbelleğe alındığını biliyorsanız:
const imageFallbackCacheKey =
workbox.precaching.getCacheKeyForURL('fallback.png');
workbox.routing.setCatchHandler(({event}) => {
switch (event.request.destination) {
case 'image':
return caches.match(imageFallbackCacheKey);
break;
// ...other fallback logic goes here...
}
});
Eski Önbelleğe Alınmış Verileri Temizleme
Workbox v4'teki önbelleğe alma işleminde yapılan değişiklikler, Workbox'ın önceki sürümleri tarafından oluşturulan eski önbelleklerin uyumlu olmadığı anlamına gelir. Varsayılan olarak, bu kaynaklar olduğu gibi bırakılır. Workbox 3 sürümünden Workbox 4 sürümüne yükseltirseniz önceden önbelleğe alınmış tüm kaynaklarınızın iki kopyasına sahip olursunuz.
Bunu önlemek için doğrudan bir hizmet çalışanına workbox.precaching.cleanupOutdatedCaches() çağrısı ekleyebilir veya GenerateSW modunda bir derleme aracı kullanıyorsanız yeni cleanupOutdatedCaches: true seçeneğini ayarlayabilirsiniz. Önbelleği temizleme mantığı, eski önbellekleri bulmak için önbellek adlandırma kurallarına göre çalışır ve geliştiricilerin bu kuralları geçersiz kılma seçeneği vardır. Bu nedenle, güvenliği ön planda tutarak bu özelliği varsayılan olarak etkinleştirmedik.
Bu özelliği kullanırken karşılaşılan sorunlar (ör. silmeyle ilgili yanlış pozitifler) hakkında bize bilgi verin.
Parametre Büyük Harf Kullanımı
workbox.precaching.precacheAndRoute() ve workbox.precaching.addRoute()'e iletilebilecek iki isteğe bağlı parametre, genel büyük/küçük harf kullanma kuralımızı standartlaştırmak için yeniden adlandırıldı. ignoreUrlParametersMatching artık ignoreURLParametersMatching, cleanUrls ise cleanURLs oldu.
workbox-strategies
workbox-strategies içinde işleyici örneği oluşturmanın yaklaşık olarak eşdeğer iki yolu vardır. Stratejinin oluşturucusunu açıkça çağırmak yerine, fabrika yöntemini kullanımdan kaldırıyoruz.
// This factory method syntax has been deprecated:
const networkFirstStrategy = workbox.strategies.networkFirst({...});
// Instead, use the constructor directly:
// (Note that the class name is Uppercase.)
const networkFirstStrategy = new workbox.strategies.NetworkFirst({...});
Fabrika yöntemi söz dizimi v4'te çalışmaya devam edecek olsa da bu söz dizimini kullanmak bir uyarı kaydetmesine neden olur. Geliştiricilerin, gelecekteki v5 sürümünde destek kaldırılmadan önce geçiş yapmalarını öneririz.
workbox-background-sync
workbox.backgroundSync.Queue sınıfı, geliştiricilere isteklerin sıraya nasıl ekleneceği ve yeniden oynatılacağı konusunda daha fazla esneklik ve kontrol sunmak için yeniden yazıldı.
3. sürümde Queue sınıfının kuyruğa istek eklemek için tek bir yolu (addRequest() yöntemi) vardı ancak kuyruğu değiştirmek veya istekleri kaldırmak için hiçbir yolu yoktu.
4. sürümde addRequests() yöntemi kaldırıldı ve aşağıdaki dizi benzeri yöntemler eklendi:
pushRequest()popRequest()shiftRequest()unshiftRequest()
Queue sınıfı, 3. sürümde isteklerin ne zaman yeniden oynatıldığını gözlemlemenize olanak tanıyan çeşitli geri çağırma işlevlerini de kabul ediyordu (requestWillEnqueue, requestWillReplay, queueDidReplay). Ancak çoğu geliştirici, gözleme ek olarak sıranın nasıl yeniden oynatıldığı üzerinde kontrol sahibi olmak istiyordu. Bu kontrol, tek tek istekleri dinamik olarak değiştirme, yeniden sıralama ve hatta iptal etme olanağı da içeriyordu.
4. sürümde bu geri çağırmalar kaldırıldı ve tarayıcı tarafından yeniden oynatma denemesi yapıldığında çağrılan tek bir onSync geri çağırma eklendi. Varsayılan olarak onSync geri çağırma işlevi replayRequests()'u çağırır ancak yeniden oynatma işlemi üzerinde daha fazla kontrole ihtiyacınız varsa yukarıda listelenen dizi benzeri yöntemleri kullanarak sırayı istediğiniz şekilde yeniden oynatabilirsiniz.
Özel yeniden oynatma mantığı örneğini aşağıda bulabilirsiniz:
const queue = new workbox.backgroundSync.Queue('my-queue-name', {
onSync: async ({queue}) => {
let entry;
while ((entry = await this.shiftRequest())) {
try {
await fetch(entry.request);
} catch (error) {
console.error('Replay failed for request', entry.request, error);
await this.unshiftRequest(entry);
return;
}
}
console.log('Replay complete!');
},
});
Benzer şekilde, workbox.backgroundSync.Plugin sınıfı Queue sınıfıyla aynı bağımsız değişkenleri kabul eder (dahili olarak bir Queue örneği oluşturduğundan), bu nedenle aynı şekilde değiştirilmiştir.
çalışma kutusu-geçerlilik-süresi
npm paketi, diğer modüller için kullanılan adlandırma kuralına uygun şekilde workbox-expiration olarak yeniden adlandırıldı. Bu paket, artık kullanımdan kaldırılmış olan eski workbox-cache-expiration paketiyle işlevsel olarak eşdeğerdir.
workbox-broadcast-update
npm paketi, diğer modüller için kullanılan adlandırma kuralına uygun olarak workbox-broadcast-update olarak yeniden adlandırıldı. Bu paket, kullanımdan kaldırılan eski workbox-broadcast-cache-update paketine işlevsel olarak eşdeğerdir.
çalışma kutusu çekirdek
Workbox v3'te günlük düzeylerinin ayrıntı düzeyi, workbox.core.setLogLevel() yöntemi aracılığıyla kontrol edilebilir. Bu yöntemde, workbox.core.LOG_LEVELS enum'undaki değerlerden birini iletirsiniz. Mevcut günlük düzeyini workbox.core.logLevel aracılığıyla da okuyabilirsiniz.
Modern geliştirici araçlarının tümü artık zengin günlük filtreleme özellikleriyle birlikte gönderildiği için Workbox 4 sürümünde bunların tümü kaldırıldı (Chrome Geliştirici Araçları için konsol çıkışını filtreleme bölümüne bakın).
workbox-sw
Daha önce doğrudan workbox ad alanında (workbox-sw modülüne karşılık gelir) kullanıma sunulan iki yöntem, bunun yerine workbox.core alanına taşındı. workbox.skipWaiting(), workbox.core.skipWaiting() oldu ve benzer şekilde workbox.clientsClaim(), workbox.core.clientsClaim() oldu.
Derleme Aracı Yapılandırması
Workbox-cli, Workbox-build veya workbox-webpack-plugin eklentisine iletilebilecek bazı seçeneklerin adı değişti. Bir seçenek adında "Url" her kullanıldığında, artık "URL"nin yerini alacak şekilde kullanımdan kaldırılmıştır. Bu, aşağıdaki seçenek adlarının tercih edildiği anlamına gelir:
dontCacheBustURLsMatchingignoreURLParametersMatchingmodifyURLPrefixtemplatedURLs
Bu seçenek adlarının "Url" varyantı, 4. sürümde çalışmaya devam eder ancak uyarı mesajıyla sonuçlanır. Geliştiricilerin, 5. sürümden önce geçiş yapmalarını öneririz.
Yeni İşlevler
çalışma kutusu-penceresi
Yeni workbox-window modülü, hizmet çalışanı kaydetme ve güncellemeleri algılama sürecini basitleştirir ve hizmet çalışanında çalışan kod ile web uygulamanızın window bağlamında çalışan kod arasında standart bir iletişim aracı sağlar.
workbox-window'ü kullanmak isteğe bağlıdır ancak geliştiricilerin bu özelliği faydalı bulacağını ve uygun olduğunda kullanmak için el yazısıyla yazılmış mantıklarının bir kısmını buraya taşımayı düşüneceğini umuyoruz. workbox-window'ü kullanma hakkında daha fazla bilgiyi modülün kılavuzunda bulabilirsiniz.
Örnek Taşıma
Workbox v3'ten v4'e gerçek bir taşıma örneğini bu istekte bulabilirsiniz.
Yardım alma
Taşıma işlemlerinin çoğunun sorunsuz geçeceğini tahmin ediyoruz. Bu kılavuzda yer almayan sorunlarla karşılaşırsanız lütfen GitHub'da sorun kaydı açarak bize bildirin.