Önbelleğe alma, bir Service Worker'da 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 nasıl yerine getirebileceğiniz konusunda büyük esneklik sunar. Bu kılavuzda hem generateSW hem de injectManifest kullanarak öğeleri önbelleğe almayı ve bu yöntemlerden projeniz için hangisinin en uygun olabileceğini öğreneceksiniz.

generateSW ile önceden önbelleğe alınıyor

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ızdır. Workbox'ın sizin için bir hizmet çalışanı oluşturmasını istersiniz. 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 yapılandırma seçeneği belirtmeniz gerekmez. Eklenti, varsayılan olarak web paketinin bağımlılık grafiğinde içerdiği her şeyi önbellekte tutar 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 önbelleğe alınır. Yapılandırma açısından, önceden önbelleğe almanın çalışması için generateSW yapılandırmasında swDest ve globDirectory seçeneğini belirtmeniz gerekir. Muhtemelen Service Worker'ınızın davranışını da etkileyen ek seçenekleri yapılandırmak isteyebilirsiniz. Bu nedenle belgeleri inceleyin.

injectManifest ile önceden önbelleğe alınıyor

injectManifest kullanımı generateSW kullanımı kadar kolay değildir ancak daha fazla esneklik için kullanım kolaylığından ödün verirsiniz. generateSW, hizmet çalışanı oluşturma işleminin tamamını sizin için gerçekleştirirken injectManifest, sizin kaynak olarak yazdığınız bir hizmet çalışanını alır ve ön önbelleğe alınacak URL'lerin listesini ekler. Ancak hizmet çalışanınızın geri kalanını olduğu gibi bırakır.

injectManifest kullandığınızda önbelleğe alma mantığının kablo kurulumundan siz sorumlu olursunuz. injectManifest, giriş hizmeti çalışanınızı incelerken özel bir self.__WB_MANIFEST değişkeni arar ve bunu önbellek manifestiyle değiştirir. Bu değişken mevcut değilse injectManifest hata verir.

Ön önbellek manifestindeki giriş listesinde, ek yapılandırma seçenekleriyle düzenlenebilir.

Yan yana karşılaştırma

generateSW ve injectManifest yöntemlerinin kullanımını karşılaştırmak için aşağıdaki sekmeleri tıklayın:

generateSW, hizmet çalışanı oluşturduğu için yalnızca 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'
  ]
});

Hizmet çalışanı, bu işlemin ardından "Düğüm" ile komut satırında oluşturulabilir:

node build-sw.js

injectManifest için kaynak hizmet çalışanı gerektiği için minimum uygulanabilir örnek bir kaynak hizmet çalışanı dosyası gerektirir. Bu işlem için gereken tek şey önbellekse bu giriş hizmeti çalışanı aşağıdaki gibi görünebilir:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

self.__WB_MANIFEST dizesine dikkat edin. Bu, Workbox'ı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'ın sunduğu seçeneklerin kapsamı dışında kalan diğer şeyler gibi karmaşık gereksinimleriniz varsa injectManifest tercih edilir.

Sonuç

Çalışma Kutusu'nda önbelleğe alma işlemi, özellikle de paketleyiciler tarafından derlenen sürümlü öğeler söz konusu olduğunda, önbelleğe almayı kendi başınıza yönetmek zorunda kalmanıza kıyasla çok daha basittir. Bununla birlikte, Service Worker'da yapacağınız tek şey önceden önbelleğe alma değildir. Bu süreçte, çalışma zamanı önbelleğe alma gibi diğer teknikleri de öğreneceksiniz.