Önbelleğe alma, hizmet çalışanlarında yapacağınız en yaygın işlemlerden biridir. Workbox, Workbox'ın derleme araçlarından hangisini seçerseniz seçin, bu önemli görevi yerine getirme konusunda büyük esneklik sunar. Bu kılavuzda hem generateSW
hem de injectManifest
kullanarak öğeleri nasıl önceden önbelleğe alacağınızı ve bu yöntemlerden hangilerinin projeniz için en uygun olabileceğini öğreneceksiniz.
generateSW
ile önbelleğe alma
generateSW
, Workbox'taki öğeleri önbelleğe almanın en kolay yoludur. generateSW
ile ilgili unutulmaması gereken en önemli nokta, kendi hizmet çalışanınızı yazmadığınız, Workbox'tan sizin için bir hizmet çalışanı oluşturmasını istemenizdir. Ancak çeşitli yapılandırma seçenekleri aracılığıyla davranışını etkileyebilirsiniz.
generateSW
, kullandığınız derleme aracına bağlı olarak varsayılan olarak farklı işlemler yapar. workbox-webpack-plugin
kullanırken herhangi bir yapılandırma seçeneği belirtmeniz gerekmez. Varsayılan olarak eklenti, web paketinin bağımlılık grafiğinde içerdiği her şeyi önbelleğe alır ve output.path
tarafından belirtilen dizine service-worker.js
adlı bir hizmet çalışanı yazar
Diğer yandan, workbox-build
veya workbox-cli
kullanıyorsanız yalnızca yerel dosya sisteminden okunan HTML, CSS ve JavaScript öğeleri varsayılan olarak önceden önbelleğe alınır. Yapılandırma açısından, önbelleğe almanın çalışması için generateSW
yapılandırmasında swDest
ve globDirectory
seçeneğini belirtmeniz gerekir. Büyük olasılıkla, hizmet çalışanı davranışını etkileyen ek seçenekleri de yapılandırmak isteyebilirsiniz. Bu nedenle belgelere göz atın.
injectManifest
ile önbelleğe alma
injectManifest
kullanımı generateSW
kullanımı kadar kolay değil ancak daha fazla esneklik için kullanım kolaylığından ödün veriyorsunuz. generateSW
tüm hizmet çalışanı oluşturma işlemini sizin için gerçekleştirirken injectManifest
, yazdığınız bir hizmet çalışanını kaynak olarak alır ve önbelleğe alınacak URL'lerin listesini ekler ve hizmet çalışanınızın geri kalanını olduğu gibi bırakır.
injectManifest
kullanılırken önbelleğe alma mantığını bağlamak sizin sorumluluğunuzdadır. injectManifest
, giriş hizmeti çalışanınızı incelediğinde özel bir self.__WB_MANIFEST
değişkeni arar ve bunu ön önbellek manifestiyle değiştirir. Bu değişken mevcut değilse injectManifest
hata verir.
Önbellek öncesi manifestteki girişlerin listesinde, ek yapılandırma seçenekleri ile değiştirilebilir.
Yan yana karşılaştırma
generateSW
ve injectManifest
yöntemlerinin kullanımını karşılaştırmak için aşağıdaki sekmelerin her birini tıklayın:
generateSW
bir hizmet çalışanı oluşturduğundan, yalnızca bir yapılandırma belirtmeniz yeterlidir. Aşağıda, workbox-build
kullanılan bir örnek verilmiştir:
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
Böylece hizmet çalışanı şu Düğüm ile komut satırında derlenebilir:
node build-sw.js
injectManifest
, kaynak hizmet çalışanı gerektirdiğinden, minimum düzeyde uygulanabilir bir örnek için kaynak hizmet çalışanı dosyası gerekir. Gereken tek şey önbelleğe almaksa bu giriş hizmeti çalışanı aşağıdaki gibi görünebilir:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
self.__WB_MANIFEST
dizesini not edin. Bu, Workbox'ın ön önbellek manifestiyle değiştirdiği bir yer tutucudur. Bu kullanım alanı için geçerli bir yapılandırma aşağıda verilmiştir:
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
Gelişmiş yönlendirme, özel önbelleğe alma stratejileri veya generateSW
tarafından sunulan seçeneklerin kapsamı dışında kalan diğer konular gibi karmaşık gereksinimleriniz varsa injectManifest
tercih edilir.
Sonuç
Çalışma Kutusu'nda önbelleğe alma işlemi, özellikle paketleyiciler tarafından derlenen sürümü oluşturulmuş öğelerin söz konusu olduğu durumlarda, önbelleğe almayı kendi başınıza yönetmenize kıyasla çok daha basittir. Bununla birlikte, önbelleğe alma, bir hizmet çalışanında yapacağınız tek şey değildir. İlerledikçe, çalışma zamanı önbelleğe alma gibi diğer teknikleri öğreneceksiniz.