ç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

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

    (string|RegExp|function)[] optional

    Öğ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

    (string|RegExp|function)[] optional

    Öğ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

    boolean|GoogleAnalyticsInitializeOptions optional

    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

Özellikler

default

Tür

nesne

Özellikler

  • GenerateSW

    sorgu

  • InjectManifest

    sorgu