Eén kenmerk van servicemedewerkers is de mogelijkheid om een reeks bestanden in de cache op te slaan wanneer de servicemedewerker aan het installeren is. Dit wordt vaak 'precaching' genoemd, omdat u inhoud in de cache opslaat voordat de servicemedewerker wordt gebruikt.
De belangrijkste reden hiervoor is dat het ontwikkelaars controle geeft over de cache, wat betekent dat ze kunnen bepalen wanneer en hoe lang een bestand in de cache wordt opgeslagen en dat ze dit aan de browser kunnen doorgeven zonder naar het netwerk te gaan, wat betekent dat het kan worden gebruikt om webbestanden te maken. apps die offline werken.
Workbox neemt een groot deel van het zware werk uit precaching weg door de API te vereenvoudigen en ervoor te zorgen dat assets efficiënt worden gedownload.
Hoe werkbox-precaching werkt
Wanneer een webapp voor de eerste keer wordt geladen, kijkt workbox-precaching
naar alle assets die u wilt downloaden, verwijdert eventuele duplicaten en koppelt de relevante servicemedewerkergebeurtenissen aan om de assets te downloaden en op te slaan. URL's die al versie-informatie bevatten (zoals een inhoudshash) worden zonder verdere wijzigingen gebruikt als cachesleutels. URL's die geen versiegegevens bevatten, hebben een extra URL-queryparameter toegevoegd aan hun cachesleutel die een hash van hun inhoud vertegenwoordigt die Workbox tijdens de build genereert.
workbox-precaching
doet dit allemaal tijdens de install
van de servicewerker.
Wanneer een gebruiker uw web-app later opnieuw bezoekt en u een nieuwe servicemedewerker heeft met verschillende vooraf in de cache opgeslagen activa, zal workbox-precaching
naar de nieuwe lijst kijken en bepalen welke activa volledig nieuw zijn en welke van de bestaande activa moeten worden bijgewerkt, op basis van hun revisie. Eventuele nieuwe assets of bijgewerkte revisies worden aan de cache toegevoegd tijdens de install
van de nieuwe servicemedewerker.
Deze nieuwe servicemedewerker wordt pas gebruikt om op aanvragen te reageren nadat de activate
is geactiveerd. Het is in de activate
dat workbox-precaching
controleert of er in de cache opgeslagen assets zijn die niet langer aanwezig zijn in de lijst met huidige URL's, en deze uit de cache verwijdert.
workbox-precaching
voert deze stappen uit elke keer dat uw servicemedewerker wordt geïnstalleerd en geactiveerd, zodat de gebruiker over de nieuwste assets beschikt en alleen de gewijzigde bestanden worden gedownload.
Vooraf in de cache opgeslagen antwoorden weergeven
Door precacheAndRoute()
of addRoute()
aan te roepen, wordt een route gemaakt die overeenkomt met verzoeken voor vooraf in de cache opgeslagen URL's.
De responsstrategie die bij deze route wordt gebruikt, is cache-first : het vooraf in de cache opgeslagen antwoord zal worden gebruikt, tenzij dat in het cachegeheugen opgeslagen antwoord niet aanwezig is (vanwege een onverwachte fout), in welk geval in plaats daarvan een netwerkantwoord zal worden gebruikt.
De volgorde waarin u precacheAndRoute()
of addRoute()
aanroept, is belangrijk. Normaal gesproken wilt u dit al vroeg in uw servicewerknemersbestand aanroepen, voordat u extra routes registreert met registerRoute()
. Als u eerst registerRoute()
hebt aangeroepen en die route overeenkomt met een inkomend verzoek, wordt de strategie die u in die extra route hebt gedefinieerd, gebruikt om te reageren, in plaats van de cache-first-strategie die wordt gebruikt door workbox-precaching
.
Uitleg van de Precache-lijst
workbox-precaching
verwacht een array van objecten met een url
en revision
-eigenschap. Deze array wordt soms een precache-manifest genoemd:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
// ... other entries ...
]);
Deze lijst verwijst naar een reeks URL's, elk met hun eigen stukje "revisie"-informatie.
Voor het tweede en derde object in het bovenstaande voorbeeld is de eigenschap revision
ingesteld op null
. Dit komt omdat de revisie-informatie zich in de URL zelf bevindt , wat over het algemeen een best practice is voor statische items.
Het eerste object ( /index.html
) stelt expliciet een revisie-eigenschap in, wat een automatisch gegenereerde hash is van de inhoud van het bestand. In tegenstelling tot JavaScript- en CSS-bronnen kunnen HTML-bestanden over het algemeen geen revisie-informatie in hun URL's opnemen, anders zouden links naar deze bestanden op internet kapot gaan telkens wanneer de inhoud van de pagina verandert.
Door een revisie-eigenschap door te geven aan precacheAndRoute()
, kan Workbox weten wanneer het bestand is gewijzigd en het dienovereenkomstig bijwerken.
Workbox wordt geleverd met hulpmiddelen die u kunnen helpen bij het genereren van deze lijst:
-
workbox-build
: dit is een knooppuntpakket dat kan worden gebruikt in een gulp-taak of als een npm-run-script. -
workbox-webpack-plugin
: webpack-gebruikers kunnen deze plug-in gebruiken. -
workbox-cli
: Onze CLI kan ook worden gebruikt om de lijst met activa te genereren en deze toe te voegen aan uw servicemedewerker.
Inkomende verzoeken voor vooraf in de cache opgeslagen bestanden
Eén ding dat workbox-precaching
kant-en-klaar zal doen, is het manipuleren van de binnenkomende netwerkverzoeken om te proberen vooraf in de cache opgeslagen bestanden te matchen. Dit biedt ruimte voor gangbare praktijken op internet.
Aan een verzoek om /
kan bijvoorbeeld meestal worden voldaan door het bestand /index.html
.
Hieronder vindt u de lijst met manipulaties die workbox-precaching
standaard uitvoert, en hoe u dat gedrag kunt wijzigen.
Negeer URL-parameters
Verzoeken met zoekparameters kunnen worden gewijzigd om specifieke waarden te verwijderen, of om alle waarden te verwijderen.
Standaard worden zoekparameters die beginnen met utm_
of exact overeenkomen met fbclid
verwijderd, wat betekent dat een verzoek voor /about.html?utm_campaign=abcd
zal worden vervuld met een vooraf in de cache opgeslagen vermelding voor /about.html
.
U kunt een andere set zoekparameters negeren met behulp van ignoreURLParametersMatching
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
// Ignore all URL parameters.
ignoreURLParametersMatching: [/.*/],
}
);
Directory-index
Verzoeken die eindigen op een /
worden standaard vergeleken met vermeldingen met een index.html
aan het einde. Dit betekent dat een binnenkomend verzoek voor /
automatisch kan worden afgehandeld met de vooraf in de cache opgeslagen vermelding /index.html
.
Je kunt dit in iets anders veranderen, of volledig uitschakelen, door directoryIndex
in te stellen:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
directoryIndex: null,
}
);
Schone URL's
Als een verzoek niet overeenkomt met de precache, voegen we .html
toe aan het einde om 'schone' URL's (ook wel 'mooie' URL's genoemd) te ondersteunen. Dit betekent dat een verzoek als /about
wordt afgehandeld door de vooraf in de cache opgeslagen vermelding voor /about.html
.
U kunt dit gedrag uitschakelen door cleanUrls
in te stellen:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
cleanUrls: false,
});
Aangepaste manipulaties
Als u aangepaste overeenkomsten wilt definiëren tussen inkomende verzoeken en vooraf in de cache opgeslagen assets, kunt u dit doen met de optie urlManipulation
. Dit zou een callback moeten zijn die een reeks mogelijke overeenkomsten retourneert.
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
urlManipulation: ({url}) => {
// Your logic goes here...
return [alteredUrlOption1, alteredUrlOption2];
},
}
);
Geavanceerd gebruik
PrecacheController rechtstreeks gebruiken
Standaard zal workbox-precaching
de install
instellen en luisteraars voor u activate
. Voor ontwikkelaars die bekend zijn met servicemedewerkers is dit misschien niet wenselijk als je meer controle nodig hebt.
In plaats van de standaardexport te gebruiken, kunt u de PrecacheController
rechtstreeks gebruiken om items aan de precache toe te voegen, te bepalen wanneer deze assets worden geïnstalleerd en wanneer het opruimen moet plaatsvinden.
import {PrecacheController} from 'workbox-precaching';
const precacheController = new PrecacheController();
precacheController.addToCacheList([
{url: '/styles/example-1.abcd.css', revision: null},
{url: '/styles/example-2.1234.css', revision: null},
{url: '/scripts/example-1.abcd.js', revision: null},
{url: '/scripts/example-2.1234.js', revision: null},
]);
precacheController.addToCacheList([{
url: '/index.html',
revision: 'abcd',
}, {
url: '/about.html',
revision: '1234',
}]);
self.addEventListener('install', (event) => {
// Passing in event is required in Workbox v6+
event.waitUntil(precacheController.install(event));
});
self.addEventListener('activate', (event) => {
// Passing in event is required in Workbox v6+
event.waitUntil(precacheController.activate(event));
});
self.addEventListener('fetch', (event) => {
const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
event.respondWith(caches.match(cacheKey).then(...));
});
Vooraf in de cache opgeslagen activa rechtstreeks lezen
Er zijn momenten waarop u een vooraf in de cache opgeslagen asset rechtstreeks moet lezen, buiten de context van de routering die workbox-precaching
automatisch kan worden uitgevoerd. U wilt bijvoorbeeld gedeeltelijke HTML-sjablonen vooraf in de cache opslaan, die vervolgens moeten worden opgehaald en gebruikt bij het samenstellen van een volledig antwoord.
Over het algemeen kunt u de Cache Storage API gebruiken om de vooraf in de cache opgeslagen Response
objecten te verkrijgen, maar er is één probleem: de URL-cachesleutel die moet worden gebruikt bij het aanroepen van cache.match()
kan een versieparameter bevatten die door workbox-precaching
automatisch wordt gemaakt en onderhoudt.
Om de juiste cachesleutel te verkrijgen, kunt u getCacheKeyForURL()
aanroepen, de originele URL doorgeven en vervolgens het resultaat gebruiken om een cache.match()
uit te voeren op de juiste cache.
import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';
const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));
Als alternatief, als u alleen het vooraf in de cache opgeslagen Response
object nodig heeft, kunt u matchPrecache()
aanroepen, waardoor automatisch de juiste cachesleutel wordt gebruikt en in de juiste cache wordt gezocht:
import {matchPrecache} from 'workbox-precaching';
const response = await matchPrecache('/precached-file.html');
Oude precaches opruimen
De meeste releases van Workbox behouden hetzelfde formaat voor het opslaan van vooraf in de cache opgeslagen gegevens, en precaches die door oudere versies van Workbox zijn gemaakt, kunnen normaal gesproken in nieuwere versies worden gebruikt zoals ze zijn. Zelden is er echter sprake van een ingrijpende verandering in de precaching-opslag, waardoor bestaande gebruikers alles opnieuw moeten downloaden en waardoor eerder geprecached gegevens overbodig worden. (Een dergelijke verandering vond plaats tussen de releases van Workbox v3 en v4.)
Deze verouderde gegevens mogen de normale werking niet verstoren, maar dragen wel bij aan uw algehele gebruik van opslagquota, en het kan vriendelijker zijn voor uw gebruikers om deze expliciet te verwijderen. U kunt dit doen door cleanupOutdatedCaches()
toe te voegen aan uw servicemedewerker, of door cleanupOutdatedCaches: true
in te stellen als u een van de buildtools van Workbox gebruikt om uw servicemedewerker te genereren.
Gebruik van subresource-integriteit
Sommige ontwikkelaars willen mogelijk de extra garanties die worden geboden door de handhaving van de integriteit van subresources bij het ophalen van vooraf in de cache opgeslagen URL's van het netwerk.
Een extra, optionele eigenschap genaamd integrity
kan worden toegevoegd aan elk item in het precache-manifest. Indien opgegeven, wordt deze gebruikt als de integrity
bij het samenstellen van de Request
die wordt gebruikt om de cache te vullen. Als er een mismatch is, mislukt het precachingproces.
Het bepalen welke precache-manifestitems integrity
moeten hebben, en het uitzoeken van de juiste waarden die moeten worden gebruikt, valt buiten het bereik van de buildtools van Workbox. In plaats daarvan moeten ontwikkelaars die zich willen aanmelden voor deze functionaliteit het precache-manifest dat Workbox genereert aanpassen om zelf de juiste informatie toe te voegen. De optie manifestTransform
in de configuratie van de buildtools van Workbox kan helpen:
const ssri = require('ssri');
const integrityManifestTransform = (originalManifest, compilation) => {
const warnings = [];
const manifest = originalManifest.map(entry => {
// If some criteria match:
if (entry.url.startsWith('...')) {
// This has to be a synchronous function call, for example:
// compilation will be set when using workbox-webpack-plugin.
// When using workbox-build directly, you can read the file's
// contents from disk using, e.g., the fs module.
const asset = compilation.getAsset(entry.url);
entry.integrity = ssri.fromData(asset.source.source()).toString();
// Push a message to warnings if needed.
}
return entry;
});
return {warnings, manifest};
};
// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.
Soorten
CleanupResult
Eigenschappen
- verwijderdeCacheRequests
snaar[]
InstallResult
Eigenschappen
- niet bijgewerkte URL's
snaar[]
- bijgewerkte URL's
snaar[]
PrecacheController
Voert efficiënt precaching van activa uit.
Eigenschappen
- bouwer
leegte
Maak een nieuwe PrecacheController.
De
constructor
ziet er als volgt uit:(options?: PrecacheControllerOptions) => {...}
- opties
PrecacheControllerOptions optioneel
- geeft terug
- strategie
Strategie
- activeren
leegte
Verwijdert activa die niet langer aanwezig zijn in het huidige precache-manifest. Roep deze methode aan vanuit de activeringsgebeurtenis van de servicemedewerker.
Opmerking: deze methode roept
event.waitUntil()
voor u aan, dus u hoeft deze niet zelf aan te roepen in uw gebeurtenishandlers.De
activate
ziet er als volgt uit:(event: ExtendableEvent) => {...}
- evenement
UitbreidbaarEvent
- geeft terug
Belofte < Opschoningsresultaat >
- addToCacheList
leegte
Deze methode voegt items toe aan de precachelijst, verwijdert duplicaten en zorgt ervoor dat de informatie geldig is.
De
addToCacheList
functie ziet er als volgt uit:(entries: (string | PrecacheEntry)[]) => {...}
- inzendingen
(string | PrecacheEntry )[]
Een reeks vermeldingen die vooraf in de cache moeten worden geplaatst.
- createHandlerBoundToURL
leegte
Retourneert een functie die
url
in de precache opzoekt (rekening houdend met revisie-informatie) en de bijbehorendeResponse
retourneert.De
createHandlerBoundToURL
functie ziet er als volgt uit:(url: string) => {...}
- URL
snaar
De vooraf in de cache opgeslagen URL die wordt gebruikt om het
Response
op te zoeken.
- geeft terug
- getCacheKeyForURL
leegte
Retourneert de cachesleutel die wordt gebruikt voor het opslaan van een bepaalde URL. Als die URL geen versienummer heeft, zoals `/index.html', dan zal de cachesleutel de originele URL zijn waaraan een zoekparameter is toegevoegd.
De
getCacheKeyForURL
-functie ziet er als volgt uit:(url: string) => {...}
- URL
snaar
Een URL waarvan u de cachesleutel wilt opzoeken.
- geeft terug
snaar
De versie-URL die overeenkomt met een cachesleutel voor de oorspronkelijke URL, of ongedefinieerd als die URL niet vooraf in de cache is opgeslagen.
- getCachedURL's
leegte
Retourneert een lijst met alle URL's die vooraf in de cache zijn geplaatst door de huidige servicemedewerker.
De functie
getCachedURLs
ziet er als volgt uit:() => {...}
- geeft terug
snaar[]
De vooraf in de cache opgeslagen URL's.
- getIntegrityForCacheKey
leegte
De
getIntegrityForCacheKey
functie ziet er als volgt uit:(cacheKey: string) => {...}
- cachesleutel
snaar
- geeft terug
snaar
De integriteit van de subresources die is gekoppeld aan de cachesleutel, of ongedefinieerd als deze niet is ingesteld.
- getURLsToCacheKeys
leegte
Retourneert een toewijzing van een vooraf in de cache opgeslagen URL aan de overeenkomstige cachesleutel, waarbij rekening wordt gehouden met de revisie-informatie voor de URL.
De
getURLsToCacheKeys
functie ziet er als volgt uit:() => {...}
- geeft terug
Map<tekenreeks>
Een URL om sleuteltoewijzing in de cache op te slaan.
- installeren
leegte
Precache nieuwe en bijgewerkte assets. Roep deze methode aan vanuit de installatiegebeurtenis van de servicewerker.
Opmerking: deze methode roept
event.waitUntil()
voor u aan, dus u hoeft deze niet zelf aan te roepen in uw gebeurtenishandlers.De
install
ziet er als volgt uit:(event: ExtendableEvent) => {...}
- evenement
UitbreidbaarEvent
- geeft terug
Beloof < InstallResultaat >
- matchPrecache
leegte
Dit fungeert als een drop-in vervanging voor
cache.match()
met de volgende verschillen:- Het weet wat de naam van de precache is en checkt alleen die cache in.
- Hiermee kunt u een "oorspronkelijke" URL doorgeven zonder versiebeheerparameters, en wordt automatisch de juiste cachesleutel opgezocht voor de momenteel actieve revisie van die URL.
matchPrecache('index.html')
vindt bijvoorbeeld het juiste vooraf in de cache opgeslagen antwoord voor de momenteel actieve servicemedewerker, zelfs als de daadwerkelijke cachesleutel'/index.html?__WB_REVISION__=1234abcd'
is.De
matchPrecache
functie ziet er als volgt uit:(request: string | Request) => {...}
- verzoek
tekenreeks | Verzoek
De sleutel (zonder parameters te herzien) die moet worden gezocht in de precache.
- geeft terug
Beloof<Reactie>
- vooraf cachen
leegte
Voegt items toe aan de precachelijst, verwijdert eventuele duplicaten en slaat de bestanden op in de cache wanneer de servicemedewerker installeert.
Deze methode kan meerdere keren worden aangeroepen.
De
precache
functie ziet er als volgt uit:(entries: (string | PrecacheEntry)[]) => {...}
- inzendingen
(string | PrecacheEntry )[]
PrecacheEntry
Eigenschappen
- integriteit
tekenreeks optioneel
- herziening
tekenreeks optioneel
- URL
snaar
PrecacheFallbackPlugin
PrecacheFallbackPlugin
kunt u een "offline fallback"-antwoord opgeven dat moet worden gebruikt wanneer een bepaalde strategie geen antwoord kan genereren.
Dit gebeurt door de callback van de handlerDidError
-plug-in te onderscheppen en een vooraf in de cache opgeslagen antwoord terug te sturen, waarbij automatisch rekening wordt gehouden met de verwachte revisieparameter.
Tenzij u expliciet een PrecacheController
instantie doorgeeft aan de constructor, wordt de standaardinstantie gebruikt. Over het algemeen zullen de meeste ontwikkelaars uiteindelijk de standaard gebruiken.
Eigenschappen
- bouwer
leegte
Bouwt een nieuwe PrecacheFallbackPlugin met de bijbehorende fallbackURL.
De
constructor
ziet er als volgt uit:(config: object) => {...}
- configuratie
voorwerp
- fallbackURL
snaar
Een vooraf in de cache opgeslagen URL die als reserve kan worden gebruikt als de bijbehorende strategie geen antwoord kan genereren.
- precacheController
PrecacheController optioneel
- geeft terug
PrecacheRoute
Een subklasse van workbox-routing.Route
die een workbox-precaching.PrecacheController
-instantie gebruikt en deze gebruikt om binnenkomende verzoeken te matchen en het ophalen van antwoorden uit de precache af te handelen.
Eigenschappen
- bouwer
leegte
De
constructor
ziet er als volgt uit:(precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}
- precacheController
Een
PrecacheController
instantie die wordt gebruikt om verzoeken te matchen en te reageren op ophaalgebeurtenissen. - opties
PrecacheRouteOptions optioneel
- geeft terug
- catchHandler
RouteHandlerObject optioneel
- begeleider
- overeenkomst
- methode
HTTP-methode
- setCatchHandler
leegte
De
setCatchHandler
functie ziet er als volgt uit:(handler: RouteHandler) => {...}
- begeleider
Een callback-functie die een belofte retourneert die wordt omgezet in een antwoord
PrecacheRouteOptions
Eigenschappen
- schoneURL's
Booleaans optioneel
- directoryIndex
tekenreeks optioneel
- negeerURLParametersOvereenkomend
RegExp[] optioneel
- urlManipulatie
urlManipulatie optioneel
PrecacheStrategy
Een workbox-strategies.Strategy
-implementatie die speciaal is ontworpen om te werken met workbox-precaching.PrecacheController
om vooraf in de cache opgeslagen assets te cachen en op te halen.
Opmerking: er wordt automatisch een exemplaar van deze klasse gemaakt bij het maken van een PrecacheController
; Het is over het algemeen niet nodig om dit zelf te maken.
Eigenschappen
- bouwer
leegte
De
constructor
ziet er als volgt uit:(options?: PrecacheStrategyOptions) => {...}
- opties
PrecacheStrategyOptions optioneel
- geeft terug
- cacheNaam
snaar
- haal Opties op
RequestInit optioneel
- matchOptions
CacheQueryOptions optioneel
- plug-ins
- copyRedirectedCacheableResponsesPlugin
- standaardPrecacheCacheabilityPlugin
- _wachtenVoltooid
leegte
De functie
_awaitComplete
ziet er als volgt uit:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
- reactieGereed
Beloof<Reactie>
- begeleider
- verzoek
Verzoek
- evenement
UitbreidbaarEvent
- geeft terug
Beloof <nietig>
- _reactie terug krijgen
leegte
De
_getResponse
functie ziet er als volgt uit:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
- begeleider
- verzoek
Verzoek
- evenement
UitbreidbaarEvent
- geeft terug
Beloof<Reactie>
- _handleFetch
leegte
De
_handleFetch
functie ziet er als volgt uit:(request: Request, handler: StrategyHandler) => {...}
- verzoek
Verzoek
- begeleider
- geeft terug
Beloof<Reactie>
- _handleInstall
leegte
De functie
_handleInstall
ziet er als volgt uit:(request: Request, handler: StrategyHandler) => {...}
- verzoek
Verzoek
- begeleider
- geeft terug
Beloof<Reactie>
- hendel
leegte
Voer een verzoekstrategie uit en retourneert een
Promise
die zal worden opgelost met eenResponse
, waarbij alle relevante plug-in-callbacks worden aangeroepen.Wanneer een strategie-instantie is geregistreerd met een Workbox
workbox-routing.Route
, wordt deze methode automatisch aangeroepen wanneer de route overeenkomt.Als alternatief kan deze methode worden gebruikt in een zelfstandige
FetchEvent
listener door deze door te geven aanevent.respondWith()
.De
handle
functie ziet er als volgt uit:(options: FetchEvent | HandlerCallbackOptions) => {...}
- opties
FetchEvent | HandlerCallbackOpties
Een
FetchEvent
of een object met de onderstaande eigenschappen.
- geeft terug
Beloof<Reactie>
- handvatAlles
leegte
Vergelijkbaar met
workbox-strategies.Strategy~handle
, maar in plaats van alleen maar eenPromise
terug te geven die in eenResponse
resulteert, zal het een tupel van[response, done]
beloften retourneren, waarbij de eerste (response
) gelijk is aan wathandle()
retourneert , en dit laatste is een belofte die zal worden opgelost zodra alle beloften die aanevent.waitUntil()
zijn toegevoegd als onderdeel van het uitvoeren van de strategie, zijn voltooid.U kunt wachten op de
done
belofte om ervoor te zorgen dat al het extra werk dat door de strategie wordt uitgevoerd (meestal antwoorden in de cache opslaan) met succes wordt voltooid.De
handleAll
functie ziet er als volgt uit:(options: FetchEvent | HandlerCallbackOptions) => {...}
- opties
FetchEvent | HandlerCallbackOpties
Een
FetchEvent
of een object met de onderstaande eigenschappen.
- geeft terug
[Beloof<Reactie>, Belofte<void>]
Een tupel van [response, done] beloften die kunnen worden gebruikt om te bepalen wanneer het antwoord wordt opgelost en wanneer de handler al zijn werk heeft voltooid.
urlManipulation()
workbox-precaching.urlManipulation(
{ url }: object,
)
Type
functie
Parameters
- { url }
voorwerp
- URL
URL
Geeft terug
URL[]
Methoden
addPlugins()
workbox-precaching.addPlugins(
plugins: WorkboxPlugin[],
)
Voegt plug-ins toe aan de precaching-strategie.
Parameters
- plug-ins
addRoute()
workbox-precaching.addRoute(
options?: PrecacheRouteOptions,
)
Voeg een fetch
toe aan de servicemedewerker die zal reageren op [netwerkverzoeken] https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests
met vooraf in de cache opgeslagen assets.
Op verzoeken voor assets die niet vooraf in de cache zijn opgeslagen, wordt niet op de FetchEvent
gereageerd, waardoor de gebeurtenis kan worden doorgegeven aan andere fetch
-gebeurtenislisteners.
Parameters
- opties
PrecacheRouteOptions optioneel
cleanupOutdatedCaches()
workbox-precaching.cleanupOutdatedCaches()
Voegt een activate
gebeurtenislistener toe die incompatibele precaches opruimt die zijn gemaakt door oudere versies van Workbox.
createHandlerBoundToURL()
workbox-precaching.createHandlerBoundToURL(
url: string,
)
Helperfunctie die PrecacheController#createHandlerBoundToURL
aanroept op de standaard PrecacheController
instantie.
Als u uw eigen PrecacheController
maakt, roep dan de PrecacheController#createHandlerBoundToURL
op die instantie aan, in plaats van deze functie te gebruiken.
Parameters
- URL
snaar
De vooraf in de cache opgeslagen URL die wordt gebruikt om het
Response
op te zoeken.
Geeft terug
getCacheKeyForURL()
workbox-precaching.getCacheKeyForURL(
url: string,
)
Neemt een URL op en retourneert de overeenkomstige URL die kan worden gebruikt om het item in de precache op te zoeken.
Als er een relatieve URL wordt opgegeven, wordt de locatie van het servicemedewerkerbestand als basis gebruikt.
Voor vooraf in de cache opgeslagen vermeldingen zonder revisie-informatie is de cachesleutel dezelfde als de oorspronkelijke URL.
Voor vooraf in de cache opgeslagen vermeldingen met revisie-informatie is de cachesleutel de originele URL, met toevoeging van een queryparameter die wordt gebruikt om de revisie-informatie bij te houden.
Parameters
- URL
snaar
De URL waarvan de cachesleutel moet worden opgezocht.
Geeft terug
tekenreeks | ongedefinieerd
De cachesleutel die overeenkomt met die URL.
matchPrecache()
workbox-precaching.matchPrecache(
request: string | Request,
)
Helperfunctie die PrecacheController#matchPrecache
aanroept op de standaard PrecacheController
instantie.
Als u uw eigen PrecacheController
maakt, roep dan PrecacheController#matchPrecache
aan op die instantie, in plaats van deze functie te gebruiken.
Parameters
- verzoek
tekenreeks | Verzoek
De sleutel (zonder parameters te herzien) die moet worden gezocht in de precache.
Geeft terug
Belofte<Reactie | ongedefinieerd>
precache()
workbox-precaching.precache(
entries: (string | PrecacheEntry)[],
)
Voegt items toe aan de precachelijst, verwijdert eventuele duplicaten en slaat de bestanden op in de cache wanneer de servicemedewerker installeert.
Deze methode kan meerdere keren worden aangeroepen.
Let op: deze methode zal geen van de in de cache opgeslagen bestanden voor u weergeven. Het precaches alleen bestanden. Om te reageren op een netwerkverzoek roept u workbox-precaching.addRoute
op.
Als u één array met bestanden vooraf wilt cachen, kunt u gewoon workbox-precaching.precacheAndRoute
aanroepen.
Parameters
- inzendingen
(string | PrecacheEntry )[]
precacheAndRoute()
workbox-precaching.precacheAndRoute(
entries: (string | PrecacheEntry)[],
options?: PrecacheRouteOptions,
)
Deze methode voegt vermeldingen toe aan de precachelijst en voegt een route toe om te reageren op ophaalgebeurtenissen.
Dit is een gemakkelijke methode die workbox-precaching.precache
en workbox-precaching.addRoute
in één keer aanroept.
Parameters
- inzendingen
(string | PrecacheEntry )[]
Een reeks vermeldingen die vooraf in de cache moeten worden geplaatst.
- opties
PrecacheRouteOptions optioneel