Workbox'ın yolları

Çalışma kutusu, neredeyse her projenin derleme sürecine uyum sağlayabilecek kadar esnektir. Bu sayede, projeniz için doğru entegrasyonu seçmenize olanak tanıyan Workbox'ı birden fazla şekilde kullanabilirsiniz. Workbox ile nasıl entegrasyon gerçekleştirdiğinize bakılmaksızın, çeşitli araçlar benzer bir API sunar.

generateSW - injectManifest maçı

Workbox'ın derleme araçlarının iki temel yönteminden birini kullanacaksınız: generateSW veya injectManifest. Hangi seçeneği kullanacağınız, ne kadar esnekliğe ihtiyacınız olduğuna bağlıdır. generateSW, esneklik pahasına kullanım kolaylığına ve sadeliğe öncelik verir. Böylece, bir dizi yapılandırma seçeneği tanımlayıp karşılığında size tamamen işlevsel bir hizmet çalışanı sunar.

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

generateSW ne zaman kullanılır?

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

  • URL'leri önceden bilmediğiniz karmalar içeren dosyalar da dahil olmak üzere derleme işleminizle ilişkili dosyaları önbellekte tutmak istersiniz.
  • generateSW'ın seçenekleri ile yapılandırabileceğiniz basit çalışma zamanı önbelleğe alma gereksinimleriniz vardır.

generateSW ne zaman kullanılmaz?

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

  • Diğer Service Worker özelliklerini (ör. Web Push) kullanmak istiyorsanız.
  • Hizmet çalışanınızı uygulamanızın ihtiyaçlarına göre ayarlamak için ek komut dosyalarını içe aktarmak veya belirli Workbox modüllerini kullanmak konusunda daha esnek olmanız gerekir.

injectManifest ne zaman kullanılır?

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

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

injectManifest, kaynak hizmet çalışanı dosyası belirtmenizi gerektirmesi nedeniyle generateSW ile arasındaki farktır. Bu iş akışında, injectManifest tarafından önbellek manifesti ile değiştirilebilmesi için kaynak hizmet çalışanı dosyasının özel bir self.__WB_MANIFEST dizesi içermesi gerekir.

injectManifest ne zaman kullanılmaz?

Aşağıdaki durumlarda injectManifest kullanılmamalıdır:

  • Service Worker'ınızda önceden önbelleğe alma özelliğini kullanmak istemediğinizde.
  • Service Worker'ın şartları, generateSW ve yapılandırma seçenekleri tarafından karşılanacak kadar basittir.
  • Esneklikten çok kullanım kolaylığına öncelik verirsiniz.

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

Derleme işleminizde Workbox'ı kullanmak için çerçeveden bağımsız bir yol arıyorsanız üç seçeneğiniz vardır:

  1. workbox-cli
  2. workbox-build. komut satırı aracından öğrenebilirsiniz.
  3. Paketleyici (workbox-webpack-plugin gibi) kullanma.

Bu derleme araçlarının her biri, benzer seçeneklerle hem generateSW hem de injectManifest modlarını sunar. Workbox destekli hizmet çalışanınızı belirli bir çerçeveye bağlamak istemediğinizde bunların hepsi idealdir. 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şin önündeki olası en az engeli arıyorsanız KSA tam size göredir:

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. Aşağıdaki gibi 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 CLI, sizin için generateSW veya injectManifest yöntemlerini çalıştırabilir. KSA'nın yardım metninde daha fazla bilgi ve kullanım örnekleri bulunur.

workbox-build

workbox-cli, workbox-build modülünü çevreleyen bir sarmalayıcıdır. Alternatif olarak, workbox-build doğrudan 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 ve benzer seçenekleri iletirsiniz:

// 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 ise workbox-webpack-plugin aracılığıyla webpack'tir. workbox-cli ve workbox-build gibi workbox-webpack-plugin, generateSW veya injectManifest yöntemlerini çalıştırır, ancak eklenti bu yöntem adlarını GenerateSW veya InjectManifest olarak kullanır. Aksi takdirde kullanım workbox-build ile benzer olur:

// 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 üzerinden sunduğunuz seçenekler generateSW ya da injectManifest ile aynı olmasa da önemli ölçüde çakışma var. Özellikle, web paketi üretim öğelerinizin nerede paketlendiğini zaten bildiğinden GenerateSW için bir globDirectory seçeneği belirtmenize gerek yoktur veya sizin de böyle bir seçenek belirtemezsiniz.

Çerçeve kullanma

Bu makalede ele alınan her şey, kullanıcının çerçeve tercihlerinden bağımsız olarak Workbox'ın kullanımına odaklanmaktadı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 Çalışma Kutusu ile birlikte gelir. Çalışma Kutusu ile farklı çerçeve entegrasyonları sonraki bir makalede ele alınmıştır.

Workbox'ın çerçeveye özgü bu entegrasyonlarının, Workbox'ı istediğiniz şekilde yapılandırma olanağınızı kısıtlayabileceğini hatırlatmak isteriz. Bu gibi durumlarda, dilediğiniz zaman burada açıklanan yöntemlere dönebilirsiniz.

Derleme sürecim yoksa ne yapabilirim?

Bu belgede projenizin derleme süreci olduğu varsayılır, ancak aslında projenizde böyle bir süreç olmayabilir. Durumunuz buysa Workbox'ı workbox-sw modülüyle de kullanabilirsiniz. workbox-sw sayesinde, Workbox çalışma zamanını CDN'den veya yerel olarak yükleyebilir ve kendi hizmet çalışanınızı oluşturabilirsiniz.

Sonuç

Workbox'ın esnekliği sayesinde çerçevesi veya araç zinciri tercihleri ne olursa olsun neredeyse her projede kullanabilirsiniz. Tüm bu seçenekler, birkaç yöntem kullanarak önceden önbelleğe alma ve çalışma zamanı önbelleğe alma işlemlerini gerçekleştirmenize olanak tanırken, gerektiğinde daha gelişmiş özelliklere sahip Service Worker'lar oluşturmak için daha fazla esneklik sağlar.