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

çalışma kutusu-web paketi-eklentisi

Workbox, iki webpack eklentisi sağlar: Biri sizin için eksiksiz bir hizmet çalışanı oluşturan diğeri, Service Worker dosyasına yerleştirilen ve önbelleğe alınacak öğelerin listesini oluşturan bir eklenti.

Eklentiler workbox-webpack-plugin modülünde GenerateSW ve InjectManifest adlı iki sınıf olarak uygulanır. Aşağıdaki soruların yanıtları, 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 bu dosyayı webpack öğe ardışık düzenine ekler.

`GenerateSW` ne zaman kullanılır?

Dosyaları önbelleğe almak istiyorsunuz.
Çalışma zamanı önbelleğe almayla ilgili basit ihtiyaçlarınız var.

`GenerateSW` ne zaman KULLANILMAZ?

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

`InjectManifest`

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

`InjectManifest` ne zaman kullanılır?

Service Worker'ınız üzerinde daha fazla kontrole sahip olmak istiyorsunuz.
Dosyaları önbelleğe almak istiyorsunuz.
Yönlendirmeyi ve stratejileri özelleştirmeniz gerekir.
Service Worker'ınızı diğer platform özellikleriyle (ör. Web Push) kullanmak istiyorsunuz.

`InjectManifest` ne zaman KULLANILMAZ?

Sitenize Service Worker eklemenin en kolay yolunu öğrenmek istiyorsunuz.

GenerateSW Eklentisi

GenerateSW eklentisini web paketi yapılandırmanıza aşağıdaki ş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 önbelleğe alma kurulumuna sahip bir hizmet çalışanı oluşturur.

Yapılandırma seçeneklerinin tamamını referans belgelerinde bulabilirsiniz.

`InjectManifest` Eklentisi

InjectManifest eklentisini web paketi yapılandırmanıza aşağıdaki ş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 ön önbellek manifesti oluşturur ve bunu, paketlenmiş ve derlenmiş hizmet çalışanı dosyanıza ekler.

Yapılandırma seçeneklerinin tamamını referans belgelerinde bulabilirsiniz.

Ek Bilgi

Daha büyük bir web paketi derlemesi bağlamında eklentilerin kullanımıyla ilgili kılavuzu web paketi dokümanlarının "Progresif Web Uygulaması" bölümünde bulabilirsiniz.

Türler

GenerateSW

Bu sınıf, web paketi derleme işleminin bir parçası olarak yeni ve kullanıma hazır bir Service Worker dosyası oluşturmayı destekler.

Web paketi yapılandırmasının plugins dizisinde GenerateSW örneği 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

oluşturucu

void

Bir GenerateSW örneği oluşturur.

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

GenerateSWConfig

GenerateSWConfig

Özellikler

additionalManifestEntries

(dize | 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ı paketini çevirirken babel-preset-env öğesine iletilecek hedefler.
cacheId

string isteğe bağlı

Önbellek adlarının başına eklenecek isteğe bağlı kimlik. Bu, öncelikli olarak aynı http://localhost:port kaynağından birden fazla sitenin yayınlanabileceği yerel geliştirme için yararlıdır.
parçalar

string[] isteğe bağlı

Karşılık gelen çıkış dosyalarının ön önbellek manifestine eklenmesi gereken bir veya daha fazla yığın adı.
cleanupOutdatedCaches

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

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

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

Service Worker'ın, etkinleştirilir etkinleştirilmez mevcut istemcileri kontrol etmeye başlayıp başlamayacağı.
directoryIndex

string isteğe bağlı

/ ile biten URL için gezinme isteği önceden önbelleğe alınmış bir URL ile eşleşemezse bu değer URL'ye eklenir ve ön önbellek eşleşmesi için kontrol edilir. Bu, web sunucunuzun dizin dizini için kullandığı değere ayarlanmalıdır.
disableDevLogs

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

RegExp isteğe bağlı

Bununla eşleşen öğelerin, URL'leri aracılığıyla benzersiz bir şekilde sürüm oluşturulduğu ve önbelleği doldururken yapılan normal HTTP önbellek 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 önbelleğe alma işlemi sırasında kullanılan bant genişliğini azaltacağından bunu algılayacak bir RegExp sağlamanız önerilir.
hariç tut

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

Öğeleri ön önbellek manifestinden hariç tutmak için bir veya daha fazla tanımlayıcı kullanılır. Bu, webpack ürününün standart exclude seçeneğiyle aynı kurallara göre yorumlanır. Sağlanmazsa varsayılan değer [/\.map$/, /^manifest.*\.js$] olur.
excludeChunks

string[] isteğe bağlı

Karşılık gelen çıkış dosyalarının ön önbellek manifestinden hariç tutulması gereken bir veya daha fazla yığın adı.
ignoreURLParametersMatching

RegExp[] isteğe bağlı

Bu dizideki RegExp'lerden biriyle eşleşen tüm arama parametresi adları, ön önbellek 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 parametreleri için istekte bulunduğunda yararlı olur. Sağlanmazsa varsayılan değer [/^utm_/, /^fbclid$/] olur.
importScripts

string[] isteğe bağlı

Oluşturulan Service Worker dosyasının içinde importScripts()'e iletilmesi gereken JavaScript dosyalarının listesi. Bu, Workbox'ın üst düzey Service Worker dosyanızı oluşturmasına izin vermek ancak push etkinlik işleyici gibi bazı ek kodlar eklemek istediğinizde kullanışlıdır.
importScriptsViaChunks

string[] isteğe bağlı

Web paketi parçalarının bir veya daha fazla adı. Bu parçaların içeriği, importScripts() çağrısı yapılarak oluşturulan Service Worker'a dahil edilir.
dahil et

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

Öğeleri ön önbellek manifestine eklemek için kullanılan bir veya daha fazla tanımlayıcı. Bu, webpack ürününün standart include seçeneğiyle aynı kurallara göre yorumlanır.
inlineWorkboxRuntime

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

Workbox kitaplığı için ç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 bölünmesi mi gerektiği. Çalışma zamanını ayrı tutmak, üst düzey Service Worker'ınız her değiştiğinde kullanıcıların Workbox kodunu yeniden indirmek zorunda kalmayacağı anlamına gelir.
manifestEntries

ManifestEntry[] isteğe bağlı
manifestTransforms

ManifestTransform[] isteğe bağlı

Oluşturulan manifeste sıralı olarak uygulanacak bir veya daha fazla işlevdir. modifyURLPrefix veya dontCacheBustURLsMatching de belirtilmişse önce bunlara karşılık gelen dönüşümler uygulanır.
maximumFileSizeToCacheInBytes

numara 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şen çok büyük dosyaları yanlışlıkla önbelleğe almanızı önler.
mod

string isteğe bağlı

"Üretim" değerine ayarlanırsa hata ayıklama bilgilerini içermeyen optimize edilmiş bir hizmet çalışanı paketi oluşturulur. Burada açıkça yapılandırılmazsa mevcut webpack derlemesinde yapılandırılan mode değeri kullanılır.
modifyURLPrefix

isteğe bağlı

Bir nesne eşleme dizesi, değiştirme dizesi değerlerine ön ek getiriyor. Bu özellik, örneğin web barındırma kurulumunuz yerel dosya sistemi kurulumunuzla eşleşmiyorsa manifest girişinden bir yol önekini kaldırmak veya eklemek için kullanılabilir. Daha fazla esnekliğe sahip 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

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

Belirtilirse önceden önbelleğe alınmamış URL'lere ilişkin tüm gezinme istekleri, sağlanan URL'deki HTML ile yerine getirilir. Önbellek manifestinizde listelenen bir HTML dokümanının URL'sini iletmeniz gerekir. Bu şablon, tüm gezinmelerin ortak Uygulama Kabuğu HTML'sini kullanmasını istediğiniz Tek Sayfalık Uygulama senaryosunda kullanılmak üzere tasarlanmıştır.
navigateFallbackAllowlist

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 Sayfalık Uygulamanın parçası olarak değerlendirilmesi gerektiği durumlarda faydalıdır. Hem navigateFallbackDenylist hem de navigateFallbackAllowlist yapılandırılırsa reddedilenler listesi önceliklidir.

Not: Bu RegExp'ler, gezinme sırasında her hedef URL ile karşılaştırılabilir. Karmaşık RegExp'ler 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 işlem, sitenizin URL'lerinin yalnızca bir alt kümesinin Tek Sayfalık Uygulamanın parçası olarak değerlendirilmesi gerekiyorsa yararlı olur. Hem navigateFallbackDenylist hem de navigateFallbackAllowlist yapılandırılırsa reddedilenler listesi öncelikli olur.

Not: Bu RegExp'ler, gezinme sırasında her hedef URL ile karşılaştırılabilir. Karmaşık RegExp'ler 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 ön yüklemesinin etkinleştirilip etkinleştirilmeyeceği. Doğru değerine ayarlandığında gezinme istekleriyle eşleşecek bir uygun yanıt stratejisi oluşturmak ve önceden yüklenmiş yanıttan yararlanmak için runtimeCaching 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 initialize() aracına yapılan çağrı, oluşturduğunuz hizmet çalışanına eklenir. Object değerine ayarlandığında bu nesne, initialize() çağrısına iletilerek davranışı özelleştirmenize olanak tanır.
runtimeCaching

RuntimeCaching[] isteğe bağlı

Hizmet çalışanınızı oluşturmak için Workbox'ın derleme araçlarını kullanırken bir veya daha fazla çalışma zamanı önbelleğe alma yapılandırması belirtebilirsiniz. Daha sonra bunlar, tanımladığınız eşleştirme ve işleyici yapılandırması kullanılarak workbox-routing.registerRoute çağrılarına dönüştürülür.

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 çalışanına koşulsuz bir çağrının skipWaiting() eklenip eklenmeyeceğini belirtir. false değerine ayarlanırsa bunun yerine bir message işleyicisi eklenir. Böylece, istemci sayfalarının bekleyen bir hizmet çalışanında postMessage({type: 'SKIP_WAITING'}) yöntemini çağırarak skipWaiting() tetikleyicisini tetiklemesine izin verilir.
kaynak eşleme

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

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

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

Bu eklenti tarafından oluşturulan Service Worker dosyasının öğe adı.

InjectManifest

Bu sınıf, swSrc aracılığıyla sağlanan bir Service Worker dosyasının derlemesini ve bu hizmet çalışanına, webpack öğe ardışık düzenine dayalı olarak önbelleğe alma için URL listesi ve düzeltme bilgileri eklenmesini destekler.

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

Bu eklenti, manifest dosyasını yerleştirmeye ek olarak ana web paketi yapılandırmasındaki seçenekleri kullanarak swSrc dosyasını derlemektedir.

// 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

oluşturucu

void

Bir InjectManifest örneği oluşturur.

constructor işlevi şu şekilde görünür:
```
(config: WebpackInjectManifestOptions) => {...}
```
- config
  
  WebpackInjectManifestOptions
- returns
  InjectManifest
config

WebpackInjectManifestOptions

çalışma kutusu-web paketi-eklentisi

Hangi Eklentiyi Kullanmalısınız?

GenerateSW

GenerateSW ne zaman kullanılır?

GenerateSW ne zaman KULLANILMAZ?

InjectManifest

InjectManifest ne zaman kullanılır?

InjectManifest ne zaman KULLANILMAZ?

GenerateSW Eklentisi

InjectManifest Eklentisi

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 KULLANILMAZ?

`InjectManifest`

`InjectManifest` ne zaman kullanılır?

`InjectManifest` ne zaman KULLANILMAZ?

`InjectManifest` Eklentisi