Workbox'ın yolları

Çalışma kutusu neredeyse her projenin derleme sürecini kapsayacak kadar esnektir. Bu da projeniz için doğru entegrasyonu seçmenize olanak tanıyan Workbox'ı birden fazla şekilde kullanabileceğiniz anlamına gelir. Workbox ile nasıl entegrasyon sağladığınızdan bağımsız olarak, çeşitli araçlar benzer bir API sunar.

generateSW - injectManifest maçı

Workbox'ın derleme araçları için iki temel yöntemden birini kullanacaksınız: generateSW veya injectManifest. Hangisini kullanacağınız, ne kadar esnekliğe ihtiyacınız olduğuna bağlıdır. generateSW, esneklik pahasına kullanım kolaylığını ve sadeliği önceliklendirerek bir dizi yapılandırma seçeneği tanımlamanıza ve karşılığında size tam işlevli bir hizmet çalışanı kazanmanıza imkan tanır.

injectManifest, kodu hizmet çalışanınız için kendiniz yazacağınız ve injectManifest, Workbox'ın önbelleğe alma yöntemleriyle kullanılabilecek bir ön önbellek manifesti sağladığından, basitlik pahasına daha fazla esneklik sağlar.

generateSW ne zaman kullanılır?

Aşağıdaki durumlarda generateSW kullanmalısınız:

  • URL'leri önceden bilmeyebileceğiniz karmalar içeren dosyalar da dahil olmak üzere derleme işleminizle ilişkili dosyaları önbelleğe almak istiyorsunuz.
  • generateSW'ın seçenekleri aracılığıyla yapılandırılabilen basit çalışma zamanı önbelleğe alma gereksinimleriniz var.

generateSW ne zaman kullanılmaz?

Diğer yandan, aşağıdaki durumlarda generateSW öğesini kullanmamalısınız:

  • Diğer Service Worker özelliklerini (ör. Web Push) kullanmak istiyorsanız.
  • Ek komut dosyalarını içe aktarmak veya hizmet çalışanınızı uygulamanızın ihtiyaçlarına göre düzenlemek için belirli Workbox modüllerini kullanmak konusunda daha fazla esnekliğe ihtiyacınız vardır.

injectManifest ne zaman kullanılır?

Aşağıdaki durumlarda injectManifest kullanmalısınız:

  • Dosyaları önbelleğe almak istiyor ancak kendi hizmet çalışanınızı yazmak istiyorsunuz.
  • generateSW ürününün yapılandırma seçenekleriyle ifade edilemeyen karmaşık önbelleğe alma veya yönlendirme gereksinimleriniz var
  • Hizmet çalışanınızda başka API'ler (Web Push gibi) kullanmak istiyorsunuz.

injectManifest, kaynak hizmet çalışanı dosyası belirtmenizi gerektirmesi açısından generateSW özelliğinden farklıdır. Bu iş akışında, kaynak hizmet çalışanı dosyasının içinde özel bir self.__WB_MANIFEST dizesi olması gerekir. Böylece injectManifest, dosyayı önbellek önbelleği manifestiyle değiştirebilir.

injectManifest ne zaman kullanılmaz?

Aşağıdaki durumlarda injectManifest kullanmamalısınız:

  • Service Worker'ınızda önbelleğe almayı kullanmak istemiyorsunuz.
  • Service Worker gereksinimlerimiz, generateSW ve yapılandırma seçeneklerinin sunabileceği kadar basittir.
  • Esneklik yerine kullanım kolaylığına öncelik verirsiniz.

Workbox'ın Derleme araçlarını kullanma

Derleme işleminizde Workbox'ı çerçeveden bağımsız bir şekilde kullanmak istiyorsanız üç seçeneğiniz vardır:

  1. workbox-cli
  2. workbox-build. komut satırı aracını kullanın.
  3. Bir paketleyici (ör. workbox-webpack-plugin) kullanma.

Bu geliştirme araçlarının her biri, benzer seçeneklerle birlikte hem generateSW hem de injectManifest modlarını sunar. Workbox destekli hizmet çalışanınızı belirli bir çerçeveye bağlamak istemiyorsanız bunların hepsi işinize yarayabilir. Bu seçeneklerden hangisinin en uygun olduğunu öğrenmek için her birine hızlıca göz atalım.

workbox-cli

Workbox'a giriş yapmanızın önündeki en büyük engeli arıyorsanız, KSA size uygun olacaktır:

npm install workbox-cli --save-dev

KSA'yı kullanmaya başlamak için sihirbazı npx workbox wizard ile çalıştırın. Sihirbaz birkaç soru sorar ve bu soruların yanıtları, ihtiyaçlarınıza göre özelleştirebileceğiniz bir workbox-config.js dosyasıyla proje oluşturmak için kullanılır. URL şuna benzer şekilde görünecektir:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Yapılandırma dosyanız oluşturulduktan sonra, KSA sizin için generateSW veya injectManifest yöntemlerini çalıştırabilir. KSA'nın yardım metni daha fazla bilgi ve kullanım örneği içerir.

workbox-build

workbox-cli, workbox-build modülünü çevreleyen bir sarmalayıcıdır. Alternatif bir yöntem ise workbox-build, doğrudan kullanmaktır. workbox-build kullanırken workbox-config.js dosyası kullanarak seçenekleri belirtmek yerine, generateSW veya injectManifest yöntemlerini doğrudan bir Düğüm komut dosyasının parçası olarak benzer bir seçenek kümesi ileterek kullanırsınız:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

Yukarıdaki örnekte, node build-sw.mjs komutu çalıştırıldığında workbox-build, oluşturulan hizmet çalışanını dist dizinine yazar.

Paketleyici kullanma

Çeşitli paketleyicilerin kendi Workbox eklentileri vardır, ancak Workbox ekibi tarafından resmi olarak desteklenen tek paketleyici workbox-webpack-plugin aracılığıyla webpack'tir. workbox-cli ve workbox-build gibi workbox-webpack-plugin de generateSW veya injectManifest yöntemlerini çalıştırır ancak eklenti, bu yöntem adlarını GenerateSW veya InjectManifest olarak büyük harfle yazar. Aksi takdirde, kullanım şuna benzer: workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

GenerateSW veya InjectManifest için ilettiğiniz seçenekler, generateSW ya da injectManifest ile aynı değil ancak önemli ölçüde çakışma var. Web paketi, üretim öğelerinizin nerede gruplandığını zaten bildiğinden, özellikle GenerateSW için bir globDirectory seçeneği belirtmenize gerek yoktur, belirtemezsiniz.

Çerçeve kullanma

Bu noktada değinilen konu, çerçeve tercihlerinden bağımsız olarak Workbox'ın kullanımına odaklanmıştır. Ancak, geliştirme sürecini kolaylaştıracaksa Workbox'ı belirli bir çerçevede kullanmak da mümkündür. Örneğin, create-react-app varsayılan olarak Workbox ile gönderilir. Workbox ile farklı çerçeve entegrasyonları sonraki bir makalede ele alınmıştır.

Workbox'ın çerçeveye özel bu entegrasyonlarının, Workbox'ı istediğiniz şekilde yapılandırma olanağınızı kısıtlayabileceğini belirtmek isteriz. Bu gibi durumlarda, dilediğiniz zaman burada açıklanan yöntemleri kullanabilirsiniz.

Derleme işlemim yoksa ne olur?

Bu belgede projenizin bir derleme süreci olduğu varsayılır, ancak projenizin aslında olmayabilir. Durumunuz bu şekilde açıklanıyorsa Workbox'ı workbox-sw modülü ile birlikte kullanabilirsiniz. workbox-sw ile Workbox çalışma zamanını bir CDN'den veya yerel olarak yükleyebilir ve kendi hizmet çalışanınızı oluşturabilirsiniz.

Sonuç

Workbox'ın esnekliği, çerçevesi veya araç zinciri tercihlerinden bağımsız olarak hemen hemen tüm projelerde kullanabilmenizi sağlar. Tüm bu yollar, birkaç yöntem kullanarak önbelleğe alma ve çalışma zamanında önbelleğe alma işlemlerini gerçekleştirmenizi sağlarken, gerektiğinde daha gelişmiş özelliklere sahip Service Worker'lar oluşturma esnekliği sunar.