Workbox Core

Workbox ist modular aufgebaut, sodass Entwickler die gewünschten Teile auswählen können, ohne alles in einer einzigen Datei herunterladen zu müssen.

Es gibt jedoch Überschneidungen zwischen den Modulen. Beispielsweise muss jedes Modul mit der Konsole interagieren, aussagekräftige Fehler ausgeben und das Netzwerk oder den Cache nutzen. Damit nicht jedes Modul dieselbe Logik implementiert, enthält workbox-core diesen gemeinsamen Code, auf den jedes Modul angewiesen ist.

Dieses Modul bietet Entwicklern einige Funktionen. Neben Protokollebenen und Caching bietet workbox-core jedoch interne Logik für jedes Modul und nicht für den Endentwickler.

Standard-Cachenamen ansehen und ändern

Workbox definiert seine Caches über cacheNames:

import {cacheNames} from 'workbox-core';

console.log(cacheNames.precache);
console.log(cacheNames.runtime);
console.log(cacheNames.googleAnalytics);

Diese Cachenamen haben das Format Präfix, Name und Suffix. Der Name ändert sich je nach Verwendung des Caches.

<prefix>-<cache-id>-<suffix>

Sie können diese Standardnamen ändern, indem Sie alle oder einige der an setCacheNameDetails() übergebenen Werte ändern.

import {cacheNames, setCacheNameDetails} from 'workbox-core';

setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga',
});

// Will print 'my-app-install-time-v1'
console.log(cacheNames.precache);

// Will print 'my-app-run-time-v1'
console.log(cacheNames.runtime);

// Will print 'my-app-ga-v1'
console.log(cacheNames.googleAnalytics);

Der Haupteinsatzzweck für das Präfix und das Suffix besteht darin, dass Sie Workbox für mehrere Projekte verwenden und für jedes Projekt denselben localhost-Port verwenden. Wenn Sie für jedes Modul ein benutzerdefiniertes Präfix festlegen, wird verhindert, dass die Caches miteinander in Konflikt stehen.

Anspruch des Kunden

Einige Entwickler möchten einen neuen Dienst-Worker veröffentlichen und ihn so konfigurieren, dass er bereits geöffnete Webseiten steuert, sobald er aktiviert wird. Das ist standardmäßig nicht der Fall.

Wenn Sie dieses Verhalten benötigen, bietet workbox-core eine Hilfsmethode:

import {clientsClaim} from 'workbox-core';

// This clientsClaim() should be at the top level
// of your service worker, not inside of, e.g.,
// an event handler.
clientsClaim();

Die Methode clientsClaim() in workbox-core fügt Ihrem Service Worker automatisch einen activate-Ereignis-Listener hinzu und ruft darin self.clients.claim() auf. Wenn self.clients.claim() vor der Aktivierung des aktuellen Dienst-Workers aufgerufen wird, führt dies zu einer Laufzeitausnahme. Der workbox-core-Wrapper sorgt dafür, dass Sie ihn zum richtigen Zeitpunkt aufrufen.

Der „skipWaiting“-Wrapper wird eingestellt

Vor Workbox v6 wurden Entwickler auch dazu aufgefordert, die skipWaiting()-Methode aus workbox-core zu verwenden. Diese Methode bot jedoch nur wenig Mehrwert, da Entwickler dieselben Ergebnisse erzielen, wenn sie self.skipWaiting() explizit aufrufen.

Da der bisherige workbox-core-Wrapper auch einen install-Ereignis-Handler registrierte, in dem self.skipWaiting() aufgerufen wurde, verhielt sich der Wrapper nicht wie erwartet, wenn er nach Abschluss der Installation in einem anderen Ereignis-Handler wie message aufgerufen wurde.

Aus diesen Gründen wird skipWaiting() von workbox-core eingestellt. Entwickler sollten stattdessen direkt self.skipWaiting() aufrufen. Im Gegensatz zu self.clients.claim() wird bei self.skipWaiting() keine Ausnahme ausgelöst, wenn er zum „falschen“ Zeitpunkt aufgerufen wird. Daher muss er nicht in einen Event-Handler eingefügt werden.

Typen

CacheDidUpdateCallback()

workbox-core.CacheDidUpdateCallback(
  param: CacheDidUpdateCallbackParam,
): Promise<void>

Parameter

Ausgabe

  • Promise<void>

CacheDidUpdateCallbackParam

Attribute

  • cacheName

    String

  • event

    ExtendableEvent

  • newResponse

    Antwort

  • oldResponse

    Antwort optional

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

CachedResponseWillBeUsedCallback()

workbox-core.CachedResponseWillBeUsedCallback(
  param: CachedResponseWillBeUsedCallbackParam,
): Promise<void | Response>

Parameter

Ausgabe

  • Promise<void | Response>

CachedResponseWillBeUsedCallbackParam

Attribute

  • cacheName

    String

  • cachedResponse

    Antwort optional

  • event

    ExtendableEvent

  • matchOptions

    CacheQueryOptions optional

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

CacheKeyWillBeUsedCallback()

workbox-core.CacheKeyWillBeUsedCallback(
  param: CacheKeyWillBeUsedCallbackParam,
): Promise<string | Request>

Parameter

Ausgabe

  • Promise<string | Request>

CacheKeyWillBeUsedCallbackParam

Attribute

  • event

    ExtendableEvent

  • Modus

    String

  • params

    beliebig optional

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

CacheWillUpdateCallback()

workbox-core.CacheWillUpdateCallback(
  param: CacheWillUpdateCallbackParam,
): Promise<void | Response>

Parameter

Ausgabe

  • Promise<void | Response>

CacheWillUpdateCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Antwort

    Antwort

  • Bundesstaat

    MapLikeObject optional

FetchDidFailCallback()

workbox-core.FetchDidFailCallback(
  param: FetchDidFailCallbackParam,
): Promise<void>

Parameter

Ausgabe

  • Promise<void>

FetchDidFailCallbackParam

Attribute

  • Fehler

    Fehler

  • event

    ExtendableEvent

  • originalRequest

    Anfrage

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

FetchDidSucceedCallback()

workbox-core.FetchDidSucceedCallback(
  param: FetchDidSucceedCallbackParam,
): Promise<Response>

Parameter

Ausgabe

  • Promise<Response>

FetchDidSucceedCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Antwort

    Antwort

  • Bundesstaat

    MapLikeObject optional

HandlerCallbackOptions

Enum

RouteHandlerCallbackOptions

ManualHandlerCallbackOptions

HandlerDidCompleteCallback()

workbox-core.HandlerDidCompleteCallback(
  param: HandlerDidCompleteCallbackParam,
): Promise<void>

Parameter

Ausgabe

  • Promise<void>

HandlerDidCompleteCallbackParam

Attribute

  • Fehler

    Fehler optional

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Antwort

    Antwort optional

  • Bundesstaat

    MapLikeObject optional

HandlerDidErrorCallback()

workbox-core.HandlerDidErrorCallback(
  param: HandlerDidErrorCallbackParam,
): Promise<Response>

Parameter

Ausgabe

  • Promise<Response>

HandlerDidErrorCallbackParam

Attribute

  • Fehler

    Fehler

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

HandlerDidRespondCallback()

workbox-core.HandlerDidRespondCallback(
  param: HandlerDidRespondCallbackParam,
): Promise<void>

Parameter

Ausgabe

  • Promise<void>

HandlerDidRespondCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Antwort

    Antwort optional

  • Bundesstaat

    MapLikeObject optional

HandlerWillRespondCallback()

workbox-core.HandlerWillRespondCallback(
  param: HandlerWillRespondCallbackParam,
): Promise<Response>

Parameter

Ausgabe

  • Promise<Response>

HandlerWillRespondCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Antwort

    Antwort

  • Bundesstaat

    MapLikeObject optional

HandlerWillStartCallback()

workbox-core.HandlerWillStartCallback(
  param: HandlerWillStartCallbackParam,
): Promise<void>

Parameter

Ausgabe

  • Promise<void>

HandlerWillStartCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

ManualHandlerCallback()

workbox-core.ManualHandlerCallback(
  options: ManualHandlerCallbackOptions,
): Promise<Response>

Der Callback „handler“ wird aufgerufen, wenn eine Router über ihre RouteMatchCallback eine URL/Anfrage mit einer Route abgleicht. Dieser Handler-Callback sollte eine Promise zurückgeben, die in eine Response aufgelöst wird.

Wenn von RouteMatchCallback ein nicht leeres Array oder Objekt zurückgegeben wird, wird es als options.params-Argument an diesen Handler übergeben.

Parameter

Ausgabe

  • Promise<Response>

ManualHandlerCallbackOptions

Optionen, die an eine ManualHandlerCallback-Funktion übergeben werden.

Attribute

  • event

    ExtendableEvent

  • Anfrage

    String | Anfrage

MapLikeObject

PluginState

Derzeit wird nur MapLikeObject verwendet, dies kann aber in Zukunft erweitert oder eingeschränkt werden.

Typ

MapLikeObject

RequestWillFetchCallback()

workbox-core.RequestWillFetchCallback(
  param: RequestWillFetchCallbackParam,
): Promise<Request>

Parameter

Ausgabe

  • Promise<Request>

RequestWillFetchCallbackParam

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • Bundesstaat

    MapLikeObject optional

RouteHandler

Entweder RouteHandlerCallback oder RouteHandlerObject. Die meisten APIs in workbox-routing, die Routen-Handler akzeptieren, akzeptieren entweder

Enum

RouteHandlerCallback

RouteHandlerObject

RouteHandlerCallback()

workbox-core.RouteHandlerCallback(
  options: RouteHandlerCallbackOptions,
): Promise<Response>

Der Callback „handler“ wird aufgerufen, wenn eine Router über ihre RouteMatchCallback eine URL/Anfrage mit einer Route abgleicht. Dieser Handler-Callback sollte eine Promise zurückgeben, die in eine Response aufgelöst wird.

Wenn von RouteMatchCallback ein nicht leeres Array oder Objekt zurückgegeben wird, wird es als options.params-Argument an diesen Handler übergeben.

Parameter

Ausgabe

  • Promise<Response>

RouteHandlerCallbackOptions

Optionen, die an eine RouteHandlerCallback-Funktion übergeben werden.

Attribute

  • event

    ExtendableEvent

  • params

    MapLikeObject | string[] optional

  • Anfrage

    Anfrage

  • URL

    URL

RouteHandlerObject

Ein Objekt mit einer handle-Methode vom Typ RouteHandlerCallback.

Ein Route-Objekt kann entweder mit einer RouteHandlerCallback-Funktion oder mit diesem RouteHandler-Objekt erstellt werden. Der Vorteil von RouteHandler besteht darin, dass es erweitert werden kann (wie das workbox-strategies-Paket).

Attribute

RouteMatchCallback()

workbox-core.RouteMatchCallback(
  options: RouteMatchCallbackOptions,
): any

Über den Callback „match“ wird ermittelt, ob eine Route für eine bestimmte URL und Anfrage angewendet werden soll. Wenn die Übereinstimmung als Reaktion auf ein Abrufereignis vom Client erfolgt, wird auch das event-Objekt bereitgestellt. Da der Abgleich-Callback jedoch auch außerhalb eines Abrufereignisses aufgerufen werden kann, sollte die Abgleichlogik nicht davon ausgehen, dass das event-Objekt immer verfügbar ist. Wenn der Callback für die Übereinstimmung einen wahrheitsgemäßen Wert zurückgibt, wird RouteHandlerCallback der übereinstimmenden Route sofort aufgerufen. Wenn der zurückgegebene Wert ein nicht leeres Array oder Objekt ist, wird dieser Wert auf das options.params-Argument des Handlers gesetzt.

Parameter

Ausgabe

  • beliebig

RouteMatchCallbackOptions

Optionen, die an eine RouteMatchCallback-Funktion übergeben werden.

Attribute

  • event

    ExtendableEvent

  • Anfrage

    Anfrage

  • sameOrigin

    boolean

  • URL

    URL

WorkboxPlugin

Ein Objekt mit optionalen Callback-Eigenschaften für den Lebenszyklus der Abruf- und Cache-Vorgänge.

Attribute

WorkboxPluginCallbackParam

Attribute

Attribute

cacheNames

Ruft die aktuellen Cachenamen und das Präfix/Suffix ab, die von Workbox verwendet werden.

cacheNames.precache wird für vorab im Cache gespeicherte Assets verwendet, cacheNames.googleAnalytics wird von workbox-google-analytics zum Speichern von analytics.js verwendet und cacheNames.runtime wird für alle anderen Zwecke verwendet.

Mit cacheNames.prefix können Sie nur den aktuellen Präfixwert abrufen. Mit cacheNames.suffix können Sie nur den aktuellen Suffixwert abrufen.

Typ

Objekt

Attribute

  • googleAnalytics

    String

  • precache

    String

  • Präfix

    String

  • runtime

    String

  • Suffix

    String

Methoden

clientsClaim()

workbox-core.clientsClaim(): void

Sobald der Dienst-Worker aktiv ist, können Sie alle derzeit verfügbaren Clients beanspruchen. Sie wird normalerweise in Kombination mit skipWaiting() verwendet.

copyResponse()

workbox-core.copyResponse(
  response: Response,
  modifier?: function,
): Promise<Response>

Ermöglicht es Entwicklern, eine Antwort zu kopieren und die Werte headers, status oder statusText zu ändern (die Werte, die über ein [ResponseInit]https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax-Objekt im Konstruktor festgelegt werden können). Wenn Sie diese Werte ändern möchten, übergeben Sie als zweites Argument eine Funktion. Diese Funktion wird mit einem einzelnen Objekt mit den Antworteigenschaften {headers, status, statusText} aufgerufen. Der Rückgabewert dieser Funktion wird als ResponseInit für die neue Response verwendet. Wenn Sie die Werte ändern möchten, ändern Sie entweder die übergebenen Parameter und geben Sie sie zurück oder geben Sie ein völlig neues Objekt zurück.

Diese Methode ist absichtlich auf Antworten mit gleicher Herkunft beschränkt, unabhängig davon, ob CORS verwendet wurde oder nicht.

Parameter

  • Antwort

    Antwort

  • Modifikator

    function optional

    Der Parameter modifier sieht so aus: 

    (responseInit: ResponseInit) => ResponseInit

    • responseInit

      ResponseInit

    • Gibt zurück

      ResponseInit

Ausgabe

  • Promise<Response>

registerQuotaErrorCallback()

workbox-core.registerQuotaErrorCallback(
  callback: Function,
): void

Fügen Sie der Gruppe von quotaErrorCallbacks eine Funktion hinzu, die bei einem Kontingentfehler ausgeführt wird.

Parameter

  • callback

    Funktion

setCacheNameDetails()

workbox-core.setCacheNameDetails(
  details: PartialCacheNameDetails,
): void

Ändert die Standard-Cache-Namen, die von den Workbox-Paketen verwendet werden. Cachenamen werden als <prefix>-<Cache Name>-<suffix> generiert.

Parameter

  • Details

    PartialCacheNameDetails

skipWaiting()

workbox-core.skipWaiting(): void

Diese Methode ist veraltet und wird in Workbox v7 entfernt.

Das Aufrufen von self.skipWaiting() ist äquivalent und sollte stattdessen verwendet werden.