workbox-webpack-plug-in

Workbox biedt twee webpack- plug-ins: één die een volledige servicewerker voor u genereert en één die een lijst met assets genereert die vooraf in de cache moeten worden geplaatst en die in een servicewerkerbestand wordt geïnjecteerd.

De plug-ins zijn geïmplementeerd als twee klassen in de workbox-webpack-plugin module, genaamd GenerateSW en InjectManifest . De antwoorden op de volgende vragen kunnen u helpen bij het kiezen van de juiste plug-in en configuratie.

Welke plug-in u moet gebruiken

GenerateSW

De GenerateSW plug-in maakt een servicemedewerkerbestand voor u en voegt dit toe aan de webpack-activapijplijn.

Wanneer GenerateSW gebruiken?

  • U wilt bestanden vooraf in de cache plaatsen.
  • U heeft eenvoudige runtime-cachebehoeften.

Wanneer GenerateSW NIET gebruiken

  • U wilt andere Service Worker-functies gebruiken (bijvoorbeeld Web Push ).
  • U wilt extra scripts importeren of extra logica toevoegen voor aangepaste cachingstrategieën.

InjectManifest

De InjectManifest plug-in genereert een lijst met URL's die vooraf in de cache moeten worden geplaatst en voegt dat precache-manifest toe aan een bestaand servicemedewerkerbestand. Anders blijft het bestand ongewijzigd.

Wanneer moet u InjectManifest gebruiken?

  • U wilt meer controle over uw servicemedewerker.
  • U wilt bestanden vooraf in de cache plaatsen.
  • U moet de routing en strategieën aanpassen.
  • U wilt uw servicemedewerker gebruiken met andere platformfuncties (bijvoorbeeld Web Push ).

Wanneer mag u InjectManifest NIET gebruiken?

  • U wilt de eenvoudigste manier om een ​​servicemedewerker aan uw site toe te voegen.

GenereerSW-plug-in

U kunt de GenerateSW -plug-in als volgt aan uw webpack-configuratie toevoegen:

// 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: ...,
    }),
  ],
};

Hierdoor wordt een servicemedewerker gegenereerd met precaching-instellingen voor alle webpack-middelen die door uw configuratie worden opgepikt, en met de meegeleverde runtime-cacheregels.

Een volledige set configuratieopties vindt u in de referentiedocumentatie .

InjectManifest plug-in

U kunt de InjectManifest -plug-in als volgt aan uw webpack-configuratie toevoegen:

// 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: '...',
    }),
  ],
};

Hierdoor wordt een precache-manifest gemaakt op basis van de webpack-middelen die door uw configuratie zijn opgepikt en in uw gebundelde en gecompileerde servicemedewerkerbestand geïnjecteerd.

Een volledige set configuratieopties vindt u in de referentiedocumentatie .

Extra info

Richtlijnen voor het gebruik van de plug-ins binnen de context van een grotere webpack-build kunt u vinden in de sectie " Progressieve webapplicatie " van de webpack-documentatie.

Soorten

GenerateSW

Deze klasse ondersteunt het maken van een nieuw, gebruiksklaar servicewerkerbestand als onderdeel van het webpack-compilatieproces.

Gebruik een exemplaar van GenerateSW in de plugins array van een webpack-configuratie.

// 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: ...,
});

Eigenschappen

GenerateSWConfig

Eigenschappen

  • aanvullendeManifestEntries

    (string| ManifestEntry )[] optioneel

    Een lijst met vermeldingen die vooraf in de cache moeten worden opgeslagen, naast eventuele vermeldingen die worden gegenereerd als onderdeel van de buildconfiguratie.

  • babelPresetEnvTargets

    tekenreeks[] optioneel

    Standaardwaarde is: ["chroom >= 56"]

    De doelen die moeten worden doorgegeven aan babel-preset-env bij het transpileren van de servicemedewerkerbundel.

  • cacheId

    tekenreeks optioneel

    Een optionele ID die moet worden toegevoegd aan de cachenamen. Dit is vooral handig voor lokale ontwikkeling waarbij meerdere sites kunnen worden bediend vanaf dezelfde http://localhost:port oorsprong.

  • brokken

    tekenreeks[] optioneel

    Een of meer segmentnamen waarvan de overeenkomstige uitvoerbestanden moeten worden opgenomen in het precache-manifest.

  • opruimenVerouderde Caches

    Booleaans optioneel

    Standaardwaarde is: false

    Of Workbox al dan niet moet proberen precaches te identificeren en te verwijderen die zijn gemaakt door oudere, incompatibele versies.

  • klantenClaim

    Booleaans optioneel

    Standaardwaarde is: false

    Of de servicemedewerker al dan niet bestaande clients moet gaan beheren zodra deze worden geactiveerd.

  • directoryIndex

    tekenreeks optioneel

    Als een navigatieverzoek voor een URL die eindigt op / niet overeenkomt met een vooraf in de cache opgeslagen URL, wordt deze waarde aan de URL toegevoegd en wordt deze gecontroleerd op een vooraf in de cache opgeslagen URL. Dit moet worden ingesteld op wat uw webserver gebruikt voor de directory-index.

  • schakelDevLogs uit

    Booleaans optioneel

    Standaardwaarde is: false

  • dontCacheBustURLsMatching

    RegExp optioneel

    Van assets die hieraan voldoen, wordt aangenomen dat ze een unieke versie hebben via hun URL, en zijn vrijgesteld van de normale HTTP-cache-busting die wordt uitgevoerd bij het vullen van de pre-cache. Hoewel dit niet vereist is, wordt het aanbevolen dat als uw bestaande bouwproces al een [hash] -waarde in elke bestandsnaam invoegt, u een RegExp opgeeft die dit zal detecteren, omdat dit de bandbreedte die wordt verbruikt bij precaching zal verminderen.

  • uitsluiten

    (string|RegExp|functie)[] optioneel

    Een of meer specificaties die worden gebruikt om assets uit te sluiten van het precache-manifest. Dit wordt geïnterpreteerd volgens dezelfde regels als de standaard exclude van webpack . Indien niet opgegeven, is de standaardwaarde [/\.map$/, /^manifest.*\.js$] .

  • sluitChunks uit

    tekenreeks[] optioneel

    Een of meer segmentnamen waarvan de bijbehorende uitvoerbestanden moeten worden uitgesloten van het precache-manifest.

  • negeerURLParametersOvereenkomend

    RegExp[] optioneel

    Alle namen van zoekparameters die overeenkomen met een van de RegExp in deze array worden verwijderd voordat wordt gezocht naar een precache-overeenkomst. Dit is handig als uw gebruikers URL's kunnen opvragen die bijvoorbeeld URL-parameters bevatten die worden gebruikt om de bron van het verkeer bij te houden. Indien niet opgegeven, is de standaardwaarde [/^utm_/, /^fbclid$/] .

  • importScripts

    tekenreeks[] optioneel

    Een lijst met JavaScript-bestanden die moeten worden doorgegeven aan importScripts() in het gegenereerde servicewerkerbestand. Dit is handig als u Workbox uw servicewerkerbestand op het hoogste niveau wilt laten maken, maar extra code wilt toevoegen, zoals een push-gebeurtenislistener.

  • importScriptsViaChunks

    tekenreeks[] optioneel

    Een of meer namen van webpack-chunks. De inhoud van deze chunks wordt opgenomen in de gegenereerde service worker, via een aanroep van importScripts() .

  • erbij betrekken

    (string|RegExp|functie)[] optioneel

    Een of meer specificaties die worden gebruikt om assets op te nemen in het precache-manifest. Dit wordt geïnterpreteerd volgens dezelfde regels als de standaard include optie van webpack .

  • inlineWorkboxRuntime

    Booleaans optioneel

    Standaardwaarde is: false

    Of de runtimecode voor de Workbox-bibliotheek moet worden opgenomen in de servicemedewerker op het hoogste niveau, of moet worden opgesplitst in een afzonderlijk bestand dat naast de servicemedewerker moet worden geïmplementeerd. Door de runtime gescheiden te houden, hoeven gebruikers de Workbox-code niet telkens opnieuw te downloaden wanneer uw servicemedewerker op het hoogste niveau verandert.

  • manifestInvoeren

    ManifestEntry [] optioneel

  • manifestTransformeert

    ManifestTransform [] optioneel

    Een of meer functies die opeenvolgend worden toegepast op het gegenereerde manifest. Als modifyURLPrefix of dontCacheBustURLsMatching ook zijn opgegeven, worden de bijbehorende transformaties eerst toegepast.

  • maximumFileSizeToCacheInBytes

    nummer optioneel

    Standaardwaarde is: 2097152

    Deze waarde kan worden gebruikt om de maximale grootte te bepalen van bestanden die vooraf in de cache worden opgeslagen. Dit voorkomt dat u per ongeluk zeer grote bestanden vooraf in de cache plaatst die mogelijk per ongeluk overeenkomen met een van uw patronen.

  • modus

    tekenreeks optioneel

    Indien ingesteld op 'productie', wordt er een geoptimaliseerde servicemedewerkerbundel geproduceerd die foutopsporingsinformatie uitsluit. Als dit hier niet expliciet wordt geconfigureerd, wordt de mode gebruikt die is geconfigureerd in de huidige webpack -compilatie.

  • wijzigURLPrefix

    object optioneel

    Een objecttoewijzingsreeks wordt voorafgegaan door vervangende tekenreekswaarden. Dit kan worden gebruikt om bijvoorbeeld een padvoorvoegsel uit een manifestitem te verwijderen of toe te voegen als uw webhostinginstellingen niet overeenkomen met uw lokale bestandssysteeminstellingen. Als alternatief met meer flexibiliteit kunt u de optie manifestTransforms gebruiken en een functie opgeven die de vermeldingen in het manifest wijzigt met behulp van de logica die u opgeeft.

    Voorbeeldgebruik:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
  • navigerenFallback

    tekenreeks optioneel

    Standaardwaarde is: nul

    Indien opgegeven, worden alle navigatieverzoeken voor URL's die niet vooraf in de cache zijn geplaatst, uitgevoerd met de HTML op de opgegeven URL. U moet de URL doorgeven van een HTML-document dat in uw precache-manifest staat vermeld. Dit is bedoeld voor gebruik in een Single Page App-scenario, waarin u wilt dat alle navigatie de algemene App Shell HTML gebruikt.

  • navigeerFallbackAllowlist

    RegExp[] optioneel

    Een optionele reeks reguliere expressies die beperkt op welke URL's het geconfigureerde navigateFallback gedrag van toepassing is. Dit is handig als slechts een subset van de URL's van uw site moet worden behandeld als onderdeel van een Single Page App . Als zowel navigateFallbackDenylist als navigateFallbackAllowlist zijn geconfigureerd, heeft de weigeringslijst voorrang.

    Opmerking : deze RegExps kunnen tijdens een navigatie worden geëvalueerd aan de hand van elke bestemmings-URL. Vermijd het gebruik van complexe RegExps , anders kunnen uw gebruikers vertragingen ondervinden bij het navigeren op uw site.

  • navigeerFallbackDenylist

    RegExp[] optioneel

    Een optionele reeks reguliere expressies die beperkt op welke URL's het geconfigureerde navigateFallback gedrag van toepassing is. Dit is handig als slechts een subset van de URL's van uw site moet worden behandeld als onderdeel van een Single Page App . Als zowel navigateFallbackDenylist als navigateFallbackAllowlist zijn geconfigureerd, heeft de weigeringslijst voorrang.

    Opmerking : deze RegExps kunnen tijdens een navigatie worden geëvalueerd aan de hand van elke bestemmings-URL. Vermijd het gebruik van complexe RegExps , anders kunnen uw gebruikers vertragingen ondervinden bij het navigeren op uw site.

  • navigatieVooraf laden

    Booleaans optioneel

    Standaardwaarde is: false

    Of navigatie vooraf laden wel of niet moet worden ingeschakeld in de gegenereerde servicemedewerker. Wanneer ingesteld op true, moet u runtimeCaching ook gebruiken om een ​​geschikte responsstrategie in te stellen die overeenkomt met navigatieverzoeken, en gebruik maken van het vooraf geladen antwoord.

  • offlineGoogleAnalytics

    booleaans| GoogleAnalyticsInitializeOptions optioneel

    Standaardwaarde is: false

    Bepaalt of ondersteuning voor offline Google Analytics wel of niet moet worden opgenomen. Wanneer true , wordt de aanroep van initialize() van workbox-google-analytics toegevoegd aan de door u gegenereerde servicemedewerker. Wanneer ingesteld op een Object , wordt dat object doorgegeven aan de initialize() aanroep, waardoor u het gedrag kunt aanpassen.

  • runtimeCaching

    RuntimeCaching [] optioneel

    Wanneer u de buildtools van Workbox gebruikt om uw servicemedewerker te genereren, kunt u een of meer runtime-cachingconfiguraties opgeven. Deze worden vervolgens vertaald naar workbox-routing.registerRoute aanroepen met behulp van de match- en handler-configuratie die u definieert.

    Zie de workbox-build.RuntimeCaching documentatie voor alle opties. Het onderstaande voorbeeld toont een typische configuratie, waarbij twee runtime-routes zijn gedefinieerd:

  • overslaanWachten

    Booleaans optioneel

    Standaardwaarde is: false

    Of er een onvoorwaardelijke aanroep van skipWaiting() moet worden toegevoegd aan de gegenereerde servicemedewerker. Indien false , wordt in plaats daarvan een message toegevoegd, waardoor clientpagina's skipWaiting() kunnen activeren door postMessage({type: 'SKIP_WAITING'}) aan te roepen op een wachtende servicemedewerker.

  • bronkaart

    Booleaans optioneel

    Standaardwaarde is: waar

    Of er een brontoewijzing moet worden gemaakt voor de gegenereerde servicemedewerkerbestanden.

  • swDest

    tekenreeks optioneel

    Standaardwaarde is: "service-worker.js"

    De assetnaam van het servicemedewerkerbestand dat door deze plug-in is gemaakt.

InjectManifest

Deze klasse ondersteunt het compileren van een service worker-bestand dat wordt geleverd via swSrc en het injecteren in die service worker van een lijst met URL's en revisie-informatie voor precaching op basis van de webpack asset pipeline.

Gebruik een exemplaar van InjectManifest in de plugins array van een webpack-configuratie.

Naast het injecteren van het manifest, zal deze plug-in een compilatie van het swSrc bestand uitvoeren, met behulp van de opties uit de hoofdwebpack-configuratie.

// 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: '...',
});

Eigenschappen

Eigenschappen

default

Type

voorwerp

Eigenschappen

  • Genereer SW

    vraag

  • InjectManifest

    vraag