Workbox biedt twee webpack- plug-ins: één die een volledige servicemedewerker voor u genereert en één die een lijst met activa genereert die vooraf in de cache moeten worden geplaatst en die in een servicemedewerkerbestand 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 informatie
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
- bouwer
leegte
Creëert een exemplaar van GenerateSW.
De
constructor
ziet er als volgt uit:(config?: GenerateSWConfig) => {...}
- configuratie
GenereerSWConfig optioneel
- retourneert
- configuratie
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
vanwebpack
. Indien niet opgegeven, is de standaardwaarde[/\.map$/, /^manifest.*\.js$]
. - sluitChunks uit
tekenreeks[] optioneel
Een of meer segmentnamen waarvan de overeenkomstige 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 vanwebpack
. - 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
ofdontCacheBustURLsMatching
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 huidigewebpack
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.Voorbeeld gebruik:
// Replace a '/dist/' prefix with '/', and also prepend // '/static' to every URL. modifyURLPrefix: { '/dist/': '/', '': '/static', }
tekenreeks optioneel
Standaardwaarde is: nul
Indien gespecificeerd, 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 algemene App Shell HTML gebruikt.
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 zowelnavigateFallbackDenylist
alsnavigateFallbackAllowlist
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.
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 zowelnavigateFallbackDenylist
alsnavigateFallbackAllowlist
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.
Booleaans optioneel
Standaardwaarde is: false
Of navigatievoorladen wel of niet moet worden ingeschakeld in de gegenereerde servicemedewerker. Wanneer ingesteld op true, moet u ook
runtimeCaching
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 vaninitialize()
vanworkbox-google-analytics
toegevoegd aan de door u gegenereerde servicemedewerker. Wanneer ingesteld op eenObject
, wordt dat object doorgegeven aan deinitialize()
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. Alsfalse
, wordt in plaats daarvan eenmessage
toegevoegd, waardoor clientpagina'sskipWaiting()
kunnen activeren doorpostMessage({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
- bouwer
leegte
Creëert een exemplaar van InjectManifest.
De
constructor
ziet er als volgt uit:(config: WebpackInjectManifestOptions) => {...}
- configuratie
WebpackInjectManifestOptions
- retourneert
- configuratie
WebpackInjectManifestOptions
Eigenschappen
default
Type
voorwerp
Eigenschappen
- Genereer SW
vraag
- InjectManifest
vraag