Daha önce sw-precache
ve/veya sw-toolbox
kullanan geliştiriciler, Workbox kitaplık ailesine doğrudan geçiş yapabilir. Workbox'a yükseltmek, daha iyi hata ayıklama ve geliştirici ergonomisi ile modern ve genişletilebilir bir hizmet çalışanı deneyimi sağlar.
Mevcut yapılandırmanızda yapılan değişiklikler
Aşağıdaki seçeneklerden herhangi biriyle yapılandırılmış sw-precache
ürününü kullanıyorsanız Workbox'a taşıma işlemi sırasında aşağıdaki değişiklikleri dikkate almanız gerekir.
Yeniden adlandırılan seçenekler
dynamicUrlToDependencies
config parametresi, templatedURLs
olarak yeniden adlandırıldı.
staticFileGlobs
config parametresi, globPatterns
olarak yeniden adlandırıldı.
runtimeCaching
yapılandırma parametresi, temel Workbox modüllerinde kullanılan adlara karşılık gelen güncellenmiş bir seçenek grubu alır. Yeniden adlandırılan öğeleri göstermek için bu sw-precache
yapılandırması:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
şu Workbox yapılandırmasına eşdeğer:
runtimeCaching: [{
urlPattern: /api/,
// 'fastest' is now 'StaleWhileRevalidate'
handler: 'StaleWhileRevalidate',
options: {
// options.cache.name is now options.cacheName
cacheName: 'my-api-cache',
// options.cache is now options.expiration
expiration: {
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
Kullanımdan kaldırılan seçenekler
Ekspres stildeki joker karakter rotaları artık desteklenmemektedir. runtimeCaching
yapılandırmasında veya doğrudan sw-toolbox
içinde Ekspres stil joker karakter yönlendirmelerini kullandıysanız Workbox'ı kullanırken eşdeğer bir normal ifade rotasına geçiş yapın.
sw-precache taşıma işlemleri
sw-precache CLI'dan workbox-cli'ye
sw-precache
komut satırı arayüzünü kullanan geliştiriciler, komutu manuel olarak veya npm scripts
tabanlı bir derleme işleminin parçası olarak çalıştırarak taşıma işleminin en kolay yolunun workbox-cli
modülünü olduğunu fark eder. workbox-cli
yüklendiğinde workbox
adlı bir ikili programa erişim elde edersiniz.
sw-precache
CLI, yapılandırmayı komut satırı işaretleri veya yapılandırma dosyası aracılığıyla destekler ancak workbox
KSA, tüm yapılandırma seçeneklerinin CommonJS module.exports
kullanılarak bir yapılandırma dosyasında sağlanmasını gerektirir.
workbox
KSA, bir dizi farklı modu destekler. (Tümünü görmek için workbox --help
öğesini kullanın.) Ancak sw-precache
işlevinin işlevine en uygun mod generateSW
modudur. Bu yüzden
$ sw-precache --config='sw-precache-config.js'
şeklinde ifade edilebilir.
$ workbox generateSW workbox-config.js
sw-precache düğüm modülünden Workbox-build düğüm modülüne
Bir gulp
/Grunt
iş akışının parçası olarak veya yalnızca özel bir node
derleme komut dosyası içinde sw-precache
için node
API'yi kullanan geliştiriciler workbox-build
node
modülüne geçerek geçiş yapabilirler.
workbox-build
modülünün generateSW()
işlevi, sw-precache
modülünün write()
işleviyle en yakın şekilde eşleşir. Temel farklardan biri, generateSW()
her zaman bir Promise döndürürken eski write()
işlevinin hem geri çağırmayı hem de Promise tabanlı arayüzü desteklemesidir.
Şu tarihler arasında gulp
kullanımı:
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
şu şekilde değiştirilebilir:
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
sw-precache-webpack-plugin'den Workbox webpack eklentisine
Web paketi derleme işlemlerinin bir parçası olarak sw-precache-webpack-plugin
'ı kullanan geliştiriciler, workbox-webpack-plugin
modülü içinde GenerateSW
sınıfına geçerek geçiş yapabilirler.
workbox-webpack-plugin
, web paketi derleme süreciyle doğrudan entegre olur ve belirli bir derleme tarafından oluşturulan tüm öğeleri bilir. Diğer bir deyişle, birçok kullanım alanında ek yapılandırma olmadan varsayılan workbox-webpack-plugin
davranışına güvenebilir ve sw-precache-webpack-plugin
tarafından sağlananlara eşdeğer bir hizmet çalışanı edinebilirsiniz.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
şu şekilde değiştirilebilir:
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
sw-toolbox taşıma işlemleri
El yapımı sw-araç kutusundan çalışma kutusu sw'ya geçin
sw-toolbox
ürününü doğrudan kullanıyorsanız (sw-precache
'in runtimeCaching
seçeneği üzerinden dolaylı olarak kullanmak yerine) Çalışma Kutusu'na taşıma işleminde eşdeğer davranışı elde etmek için manuel olarak bazı düzenlemeler yapmanız gerekir. Daha fazla bağlam için workbox-routing
ve workbox-strategies
modülleriyle ilgili dokümanları okuyarak daha fazla bağlam sunabilirsiniz.
Aşağıda, taşıma işlemine yardımcı olacak bazı kod snippet'leri verilmiştir. Bu sw-toolbox
kodu:
importScripts('path/to/sw-toolbox.js');
// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
// Match any URL that contains 'ytimg.com', regardless of
// where in the URL that match occurs.
/\.ytimg\.com\//,
// Apply a cache-first strategy to anything that matches.
toolbox.cacheFirst,
{
// Configure a custom cache name and expiration policy.
cache: {
name: 'youtube-thumbnails',
maxEntries: 10,
maxAgeSeconds: 30,
},
}
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;
şu Çalışma kutusu koduna eşdeğerdir:
importScripts('path/to/workbox-sw.js');
workbox.routing.registerRoute(
// Match any URL that contains 'ytimg.com'.
// Unlike in sw-toolbox, in Workbox, a RegExp that matches
// a cross-origin URL needs to include the initial 'https://'
// as part of the match.
new RegExp('^https://.*.ytimg.com'),
// Apply a cache-first strategy to anything that matches.
new workbox.strategies.CacheFirst({
// Configuration options are passed in to the strategy.
cacheName: 'youtube-thumbnails',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 10,
maxAgeSeconds: 30,
}),
// In Workbox, you must explicitly opt-in to caching
// responses with a status of 0 when using the
// cache-first strategy.
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());
Yardım alma
Workbox'a taşıma işlemlerinin çoğunun doğrudan olacağını tahmin ediyoruz. Bu kılavuzda ele alınmayan sorunlarla karşılaşırsanız lütfen GitHub'da bir sorun sayfası açarak bize bildirin.