Ç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:
workbox-cli
workbox-build
. komut satırı aracını kullanın.- 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.