Bu sayfa, Cloud Translation API ile çevrilmiştir.

çalışma kutusu-web paketi-eklentisi

Workbox, sizin için eksiksiz bir hizmet çalışanı oluşturan ve bir hizmet çalışanı dosyasına yerleştirilecek ön önbelleğe alınacak öğelerin listesini oluşturan iki webpack eklentisi sağlar.

Eklentiler, workbox-webpack-plugin modülünde GenerateSW ve InjectManifest adlı iki sınıf olarak uygulanır. Aşağıdaki soruların cevapları, kullanılacak doğru eklentiyi ve yapılandırmayı seçmenize yardımcı olabilir.

Hangi Eklentiyi Kullanmalısınız?

`GenerateSW`

GenerateSW eklentisi sizin için bir hizmet çalışanı dosyası oluşturur ve bunu webpack öğe ardışık düzenine ekler.

`GenerateSW` ne zaman kullanılır?

Dosyaları önceden önbelleğe almak istiyorsanız.
Basit çalışma zamanında önbelleğe alma ihtiyaçlarınız varsa

`GenerateSW` NE ZAMAN KULLANILMAMALIDIR?

Diğer Service Worker özelliklerini (ör. Web Push) kullanmak istiyorsanız.
Ek komut dosyaları içe aktarmak veya özel önbelleğe alma stratejileri için ek mantık eklemek istiyorsanız.

`InjectManifest`

InjectManifest eklentisi, önbelleğe alınacak URL'lerin bir listesini oluşturur ve bu önbelleğe alma manifestini mevcut bir hizmet çalışanı dosyasına ekler. Aksi takdirde dosya olduğu gibi bırakılır.

`InjectManifest` ne zaman kullanılır?

Hizmet çalışanınız üzerinde daha fazla kontrole sahip olmak istiyorsunuz.
Dosyaları önceden önbelleğe almak istiyorsanız.
Rotayı ve stratejileri özelleştirmeniz gerekiyor.
Hizmet çalışanınızı diğer platform özellikleriyle (ör. Web Push) kullanmak istiyorsanız.

`InjectManifest` NE ZAMAN KULLANILMAMALIDIR?

Sitenize servis çalışanı eklemenin en kolay yolunu arıyorsunuz.

GenerateSW Eklentisi

GenerateSW eklentisini webpack yapılandırmanıza şu şekilde ekleyebilirsiniz:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      navigateFallback: '...',
      runtimeCaching: [{
        // Routing via a matchCallback function:
        urlPattern: ({request, url}) => ...,
        handler: '...',
        options: {
          cacheName: '...',
          expiration: {
            maxEntries: ...,
          },
        },
      }, {
        // Routing via a RegExp:
        urlPattern: new RegExp('...'),
        handler: '...',
        options: {
          cacheName: '...',
          plugins: [..., ...],
        },
      }],
      skipWaiting: ...,
    }),
  ],
};

Bu işlem, yapılandırmanız tarafından alınan tüm web paketi öğeleri ve sağlanan çalışma zamanı önbelleğe alma kuralları için önceden önbelleğe alma kurulumuna sahip bir hizmet çalışanı oluşturur.

Yapılandırma seçeneklerinin tamamını referans dokümanlarında bulabilirsiniz.

`InjectManifest` Eklenti

InjectManifest eklentisini web paketi yapılandırmanıza şu şekilde ekleyebilirsiniz:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

Bu işlem, yapılandırmanız tarafından alınan web paketi öğelerine göre bir önbellek manifesti oluşturur ve bu manifesti paket halinde ve derlenen hizmet çalışanı dosyanıza ekler.

Yapılandırma seçeneklerinin tamamını referans dokümanlarında bulabilirsiniz.

Ek Bilgi

Eklentileri daha büyük bir webpack derlemesi bağlamında kullanmayla ilgili yönergeleri webpack belgelerindeki "İlerlemeli Web Uygulaması" bölümünde bulabilirsiniz.

Türler

GenerateSW

Bu sınıf, webpack derleme sürecinin bir parçası olarak yeni ve kullanıma hazır bir hizmet çalışanı dosyası oluşturmayı destekler.

Web paketi yapılandırmasının plugins dizisinde GenerateSW örneğini kullanın.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
});

Özellikler

constructor

geçersiz

GenerateSW örneği oluşturur.

constructor işlevi şu şekilde görünür:
```
(config?: GenerateSWConfig) => {...}
```
- yapılandırma
  
  GenerateSWConfig isteğe bağlı
- returns
  GenerateSW
yapılandırma

GenerateSWConfig

GenerateSWConfig

Özellikler

additionalManifestEntries

(string | ManifestEntry)[] isteğe bağlı

Derleme yapılandırmasının bir parçası olarak oluşturulan girişlere ek olarak, önceden önbelleğe alınacak girişlerin listesi.
babelPresetEnvTargets

string[] isteğe bağlı
Varsayılan değer: ["chrome >= 56"]

Hizmet çalışanı paketi aktarılırken babel-preset-env öğesine iletilecek hedefler.
cacheId

dize isteğe bağlı

Önbelleğe alma adlarına eklenecek isteğe bağlı bir kimlik. Bu özellik, öncelikle aynı kaynaktan birden fazla sitenin yayınlanabileceği yerel geliştirme için yararlıdır.http://localhost:port
büyük parçalar

string[] isteğe bağlı

İlgili çıkış dosyalarının önbelleğe alma manifest dosyasına dahil edilmesi gereken bir veya daha fazla parça adı.
cleanupOutdatedCaches

boole isteğe bağlı
Varsayılan değer: false

Workbox'ın eski ve uyumsuz sürümler tarafından oluşturulan önbellekleri tanımlamaya ve silmeye çalışıp çalışmayacağı.
clientsClaim

boole isteğe bağlı
Varsayılan değer: false

Hizmet çalışanının etkinleştiği anda mevcut istemcileri kontrol etmeye başlaması gerekip gerekmediği.
directoryIndex

dize isteğe bağlı

/ ile biten bir URL için yönlendirme isteği, önceden önbelleğe alınmış bir URL ile eşleşmezse bu değer URL'ye eklenir ve önceden önbelleğe alınmış URL ile eşleşme olup olmadığı kontrol edilir. Bu, web sunucunuzun dizin dizini için kullandığı değerle ayarlanmalıdır.
disableDevLogs

boole isteğe bağlı
Varsayılan değer: false
dontCacheBustURLsMatching

RegExp isteğe bağlı

Bu değerle eşleşen öğelerin, URL'leri aracılığıyla benzersiz bir şekilde sürümlendirildiği ve önbelleği doldururken yapılan normal HTTP önbelleği bozma işleminden muaf olduğu varsayılır. Zorunlu olmamakla birlikte, mevcut derleme işleminiz her dosya adına zaten bir [hash] değeri ekliyorsa önceden önbelleğe alma sırasında kullanılan bant genişliğini azaltacağı için bunu algılayacak bir RegExp sağlamanız önerilir.
hariç tut

(dize | RegExp | işlev)[] isteğe bağlı

Öğeleri ön önbelleğe alma manifestinden hariç tutmak için kullanılan bir veya daha fazla belirteç. Bu, webpack'nin standart exclude seçeneğiyle aynı kurallar doğrultusunda yorumlanır. Sağlanmazsa varsayılan değer [/\.map$/, /^manifest.*\.js$] olur.
excludeChunks

string[] isteğe bağlı

İlgili çıkış dosyalarının önbelleğe alma manifestinden hariç tutulması gereken bir veya daha fazla parça adı.
ignoreURLParametersMatching

RegExp[] isteğe bağlı

Bu dizideki RegEx'lerden biriyle eşleşen tüm arama parametresi adları, önbelleğe alma eşleşmesi aranmadan önce kaldırılır. Bu, kullanıcılarınız trafiğin kaynağını izlemek için kullanılan URL parametreleri gibi URL'ler isteyebilirse yararlıdır. Bu değer sağlanmazsa varsayılan değer [/^utm_/, /^fbclid$/] olur.
importScripts

string[] isteğe bağlı

Oluşturulan hizmet çalışanı dosyasının içindeki importScripts() işlevine iletilmesi gereken JavaScript dosyalarının listesi. Bu, Workbox'un üst düzey hizmet çalışanı dosyanızı oluşturmasına izin vermek ancak bir push etkinliği dinleyicisi gibi ek kod eklemek istediğinizde kullanışlıdır.
importScriptsViaChunks

string[] isteğe bağlı

Bir veya daha fazla webpack parçasının adı. Bu parçaların içeriği, importScripts() çağrısı aracılığıyla oluşturulan hizmet işleyiciye dahil edilir.
dahil et

(string | RegExp | function)[] isteğe bağlı

Öğeleri önbelleğe alma manifest dosyasına dahil etmek için kullanılan bir veya daha fazla belirteç. Bu, webpack'nin standart include seçeneğiyle aynı kurallar doğrultusunda yorumlanır.
inlineWorkboxRuntime

boole isteğe bağlı
Varsayılan değer: false

Workbox kitaplığının çalışma zamanı kodunun üst düzey hizmet çalışanına mı dahil edileceği yoksa hizmet çalışanıyla birlikte dağıtılması gereken ayrı bir dosyaya mı bölüneceği. Çalışma zamanını ayrı tutmak, kullanıcıların üst düzey hizmet çalışanınızı her değiştirdiğinizde Workbox kodunu yeniden indirmesi gerekmeyeceği anlamına gelir.
manifestEntries

ManifestEntry[] isteğe bağlı
manifestTransforms

ManifestTransform[] isteğe bağlı

Oluşturulan manifest'e sırayla uygulanacak bir veya daha fazla işlev. modifyURLPrefix veya dontCacheBustURLsMatching belirtilmişse öncelikle ilgili dönüşümler uygulanır.
maximumFileSizeToCacheInBytes

number isteğe bağlı
Varsayılan değer: 2097152

Bu değer, önceden önbelleğe alınacak dosyaların maksimum boyutunu belirlemek için kullanılabilir. Bu, kalıplarınızdan biriyle yanlışlıkla eşleşmiş olabilecek çok büyük dosyaları yanlışlıkla önbelleğe almanızı önler.
mod

dize isteğe bağlı

"Üretim" olarak ayarlanırsa hata ayıklama bilgilerini hariç tutan optimize edilmiş bir hizmet çalışanı paketi oluşturulur. Burada açıkça yapılandırılmamışsa geçerli webpack derlemesinde yapılandırılan mode değeri kullanılır.
modifyURLPrefix

nesne isteğe bağlı

Dize ön eklerinin değiştirme dizesi değerleriyle eşlendiği bir nesne. Bu, web barındırma ayarlarınız yerel dosya sistemi ayarlarınızla eşleşmezse örneğin, bir manifest girişinden yol ön ekini kaldırmak veya eklemek için kullanılabilir. Daha fazla esneklik sunan bir alternatif olarak manifestTransforms seçeneğini kullanabilir ve sağladığınız mantığı kullanarak manifest'teki girişleri değiştiren bir işlev sağlayabilirsiniz.

Örnek kullanım:
```
// Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
```
navigateFallback

dize isteğe bağlı
Varsayılan değer: null

Belirtilirse önceden önbelleğe alınmayan URL'lere yönelik tüm gezinme istekleri, sağlanan URL'deki HTML ile karşılanır. Önbellek manifestinizde listelenen bir HTML belgesinin URL'sini iletmeniz gerekir. Bu, tüm gezinmelerin ortak uygulama kabuğu HTML kullanmasını istediğiniz tek sayfalı uygulama senaryosuyla kullanılmalıdır.
navigateFallbackAllowlist

RegExp[] isteğe bağlı

Yapılandırılmış navigateFallback davranışının hangi URL'ler için geçerli olacağını kısıtlayan isteğe bağlı bir normal ifade dizisi. Bu, sitenizin URL'lerinin yalnızca bir alt kümesinin Tek Sayfa Uygulaması'nın parçası olarak değerlendirilmesi gerektiğinde faydalıdır. Hem navigateFallbackDenylist hem de navigateFallbackAllowlist yapılandırılmışsa engellenenler listesi önceliklidir.

Not: Bu normal ifade, gezinme sırasında her hedef URL'ye göre değerlendirilebilir. Karmaşık normal ifade kullanmaktan kaçının. Aksi takdirde, kullanıcılarınız sitenizde gezinirken gecikmelerle karşılaşabilir.
navigateFallbackDenylist

RegExp[] isteğe bağlı

Yapılandırılmış navigateFallback davranışının geçerli olduğu URL'leri kısıtlayan isteğe bağlı bir normal ifade dizisi. Bu, sitenizin URL'lerinin yalnızca bir alt kümesinin Tek Sayfa Uygulaması'nın parçası olarak değerlendirilmesi gerektiğinde faydalıdır. Hem navigateFallbackDenylist hem de navigateFallbackAllowlist yapılandırılmışsa engellenenler listesi önceliklidir.

Not: Bu normal ifade, gezinme sırasında her hedef URL'ye göre değerlendirilebilir. Karmaşık normal ifade kullanmaktan kaçının. Aksi takdirde, kullanıcılarınız sitenizde gezinirken gecikmelerle karşılaşabilir.
navigationPreload

boole isteğe bağlı
Varsayılan değer: false

Oluşturulan hizmet çalışanında gezinme önyüklemesinin etkinleştirilip etkinleştirilmeyeceği. Doğru olarak ayarlandığında, gezinme istekleriyle eşleşen uygun bir yanıt stratejisi oluşturmak ve önceden yüklenmiş yanıtı kullanmak için runtimeCaching değerini de kullanmanız gerekir.
offlineGoogleAnalytics

boole | GoogleAnalyticsInitializeOptions isteğe bağlı
Varsayılan değer: false

Çevrimdışı Google Analytics desteğinin dahil edilip edilmeyeceğini kontrol eder. true olduğunda, workbox-google-analytics'un initialize() çağrısı oluşturulan servis çalışanınıza eklenir. Bir Object olarak ayarlandığında bu nesne, davranışı özelleştirmenize olanak tanıyan initialize() çağrısına iletilir.
runtimeCaching

RuntimeCaching[] isteğe bağlı

Hizmet çalışanınızı oluşturmak için Workbox'un derleme araçlarını kullanırken bir veya daha fazla çalışma zamanı önbelleğe alma yapılandırması belirtebilirsiniz. Ardından, tanımladığınız eşleme ve işleyici yapılandırması kullanılarak workbox-routing.registerRoute çağrılarına çevrilir.

Tüm seçenekler için workbox-build.RuntimeCaching belgelerine bakın. Aşağıdaki örnekte, iki çalışma zamanı rotası tanımlanmış tipik bir yapılandırma gösterilmektedir:
skipWaiting

boole isteğe bağlı
Varsayılan değer: false

Oluşturulan hizmet işleyiciye skipWaiting() için koşulsuz bir çağrı eklenip eklenmeyeceği. false ise bunun yerine bir message dinleyici eklenir. Bu dinleyici, istemci sayfalarının bekleyen bir hizmet çalışanında postMessage({type: 'SKIP_WAITING'})'ı çağırarak skipWaiting()'yi tetiklemesine olanak tanır.
kaynak haritası

boole isteğe bağlı
Varsayılan değer: true

Oluşturulan hizmet çalışanı dosyaları için kaynak haritası oluşturulup oluşturulmayacağı.
swDest

dize isteğe bağlı
Varsayılan değer: "service-worker.js"

Bu eklenti tarafından oluşturulan hizmet çalışanı dosyasının öğe adı.

InjectManifest

Bu sınıf, swSrc aracılığıyla sağlanan bir hizmet çalışanı dosyasının derlenmesini ve bu hizmet çalışanına, webpack öğe ardışık düzenine dayalı ön önbelleğe alma için URL'lerin ve düzeltme bilgilerinin listesini eklemeyi destekler.

Webpack yapılandırmasının plugins dizisinde InjectManifest örneği kullanın.

Bu eklenti, manifesti eklemenin yanı sıra ana webpack yapılandırmasında bulunan seçenekleri kullanarak swSrc dosyasını derleyecektir.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new InjectManifest({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  swSrc: '...',
});

Özellikler

constructor

geçersiz

InjectManifest örneği oluşturur.

constructor işlevi aşağıdaki gibi görünür:
```
(config: WebpackInjectManifestOptions) => {...}
```
- yapılandırma
  
  WebpackInjectManifestOptions
- returns
  InjectManifest
yapılandırma

WebpackInjectManifestOptions

çalışma kutusu-web paketi-eklentisi

Hangi Eklentiyi Kullanmalısınız?

GenerateSW

GenerateSW ne zaman kullanılır?

GenerateSW NE ZAMAN KULLANILMAMALIDIR?

InjectManifest

InjectManifest ne zaman kullanılır?

InjectManifest NE ZAMAN KULLANILMAMALIDIR?

GenerateSW Eklentisi

InjectManifest Eklenti

Ek Bilgi

Türler

GenerateSW

Özellikler

GenerateSWConfig

Özellikler

InjectManifest

Özellikler

Özellikler

default

Tür

Özellikler

`GenerateSW`

`GenerateSW` ne zaman kullanılır?

`GenerateSW` NE ZAMAN KULLANILMAMALIDIR?

`InjectManifest`

`InjectManifest` ne zaman kullanılır?

`InjectManifest` NE ZAMAN KULLANILMAMALIDIR?

`InjectManifest` Eklenti