ç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

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

Özellikler

default

Tür

nesne

Özellikler

  • GenerateSW

    sorgu

  • InjectManifest

    sorgu