Çalışma Kutusu ile önbelleğe alma

Ö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.

Uyarı: Projenizdeki çok fazla öğe varsayılan ayarlarla önbelleğe alınmışsa generateSW yapılandırmasındaki kaynakları hariç tutmak için glob seçeneklerinden birini kullanın. workbox-webpack-plugin kullanılırken, eklentinin yapılandırması generateSW ürününden farklı olduğundan istenmeyen öğelerin önbelleğe alınmasını nasıl önleyeceğinizi öğrenmek için eklentinin GenerateSW dokümanlarına bakı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.

Not: injectManifest ifadesinin aradığı dizeyi self.__WB_MANIFEST dışında bir şeyle değiştirmeniz gerekiyorsa bunu yapılandırmasında injectionPoint seçeneğini belirterek yapabilirsiniz.

Önbellek öncesi manifestteki girişlerin listesinde, ek yapılandırma seçenekleri ile değiştirilebilir.

Dikkat: generateSW'den farklı olarak injectManifest, Çalışma Kutusu çalışma zamanını sizin için otomatik olarak gruplandırmaz! injectManifest kullanan kullanım alanlarında bunu nasıl yöneteceğinizi öğrenmek için aşağıdaki yan yana karşılaştırmaya göz atın.

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.

Dikkat: Yukarıdaki örneklerde, derleme adımı olmadan ES modüllerini yerel olarak destekleyen bir Düğüm ortamında olduğunuz varsayılır. Sürüm 16'dan önceki düğüm sürümlerinde ES modülü desteğini etkinleştirmek için bir işaret ayarlamanız veya module.exports ile CommonJS anlamlarını kullanmanız gerekebilir.

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.