Gdy mechanizmy Service Worker pojawiły się po raz pierwszy, pojawił się zestaw typowych strategii buforowania. Strategia buforowania to wzorzec określający sposób, w jaki skrypt service worker generuje odpowiedź po otrzymaniu zdarzenia pobierania.
workbox-strategies
udostępnia najczęstsze strategie buforowania, dzięki czemu można je łatwo zastosować w skryptach service worker.
Nie będziemy się szczegółowo omawiać poza strategiami obsługiwanymi przez Workbox. Więcej informacji znajdziesz w Książkach kucharskich offline.
Korzystanie ze strategii
W podanych niżej przykładach pokażemy, jak korzystać ze strategii buforowania w Workbox w przypadku workbox-routing
. Istnieją opcje, które możesz zdefiniować w ramach każdej strategii. Omówione w sekcji Konfigurowanie strategii w tym dokumencie.
W sekcji Zaawansowane użycie omówimy, jak używać strategii buforowania bezpośrednio bez workbox-routing
.
Nieaktualne podczas ponownej weryfikacji
Wzorzec stale-when-revalidate (nieaktualny podczas rewalidacji) pozwala jak najszybciej odpowiedzieć na żądanie za pomocą odpowiedzi z pamięci podręcznej (jeśli jest dostępna). Jeśli żądanie nie jest przechowywane w pamięci podręcznej, powraca do żądania sieciowego. Żądanie sieciowe jest następnie używane do aktualizacji pamięci podręcznej. W odróżnieniu od niektórych implementacji nieaktualnych metod weryfikacji podczas ponownej weryfikacji ta strategia zawsze wysyła żądanie ponownej weryfikacji, niezależnie od tego, ile lat znajduje się w pamięci podręcznej.
Jest to dość powszechna strategia, w której dostęp do aktualnych materiałów nie jest kluczowy dla aplikacji.
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/images/avatars/'),
new StaleWhileRevalidate()
);
Najpierw pamięć podręczna (pamięć podręczna powraca do sieci)
Aplikacje internetowe offline w dużym stopniu korzystają z pamięci podręcznej, ale w przypadku zasobów niekrytycznych i mogących być stopniowo zapisywane w pamięci podręcznej najlepiej jest korzystać z pamięci podręcznej.
Jeśli w pamięci podręcznej znajduje się odpowiedź, żądanie zostanie zrealizowane za pomocą tej odpowiedzi, a sieć w ogóle nie będzie używana. W przypadku braku odpowiedzi z pamięci podręcznej żądanie zostanie zrealizowane przez żądanie sieciowe, a odpowiedź zostanie zapisana w pamięci podręcznej, tak aby następne żądanie było obsługiwane bezpośrednio z tej pamięci.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(({request}) => request.destination === 'style', new CacheFirst());
Najpierw sieć (sieć wróci do pamięci podręcznej)
W przypadku żądań, które często się aktualizują, idealnym rozwiązaniem jest strategia najpierw sieć. Domyślnie próbuje pobrać najnowszą odpowiedź z sieci. Jeśli żądanie zostanie zrealizowane, odpowiedź zostanie umieszczona w pamięci podręcznej. Jeśli sieć nie zwróci odpowiedzi, zostanie użyta odpowiedź z pamięci podręcznej.
import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
registerRoute(
({url}) => url.pathname.startsWith('/social-timeline/'),
new NetworkFirst()
);
Tylko sieć
Jeśli chcesz, aby określone żądania były realizowane z sieci, użyj strategii tylko sieć.
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());
Tylko pamięć podręczna
Strategia Tylko pamięć podręczna zapewnia pobieranie odpowiedzi z pamięci podręcznej. Jest to rzadziej używane rozwiązanie w polu roboczym, ale może być przydatne, jeśli masz własny krok precyzowania.
import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';
registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());
Konfigurowanie strategii
Wszystkie strategie umożliwiają skonfigurowanie:
- Nazwa pamięci podręcznej, która ma być używana w strategii.
- Ograniczenia ważności pamięci podręcznej stosowane w strategii.
- Tablica wtyczek, których metody cyklu życia będą wywoływane podczas pobierania i buforowania żądania.
Zmienianie pamięci podręcznej używanej przez strategię
Możesz zmienić używaną strategię dotyczącą pamięci podręcznej, podając nazwę pamięci podręcznej. Jest to przydatne, gdy chcesz rozdzielić zasoby, by ułatwić debugowanie.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
})
);
Korzystanie z wtyczek
Workbox ma zestaw wtyczek, których można używać z tymi strategiami.
- workbox-background-sync,
- workbox-broadcast-update,
- workbox-cacheable-response,
- workbox-expiration
- żądania-zakresu-workbox
Aby użyć dowolnej z tych wtyczek (lub wtyczki niestandardowej), musisz po prostu przekazać instancje do opcji plugins
.
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
],
})
);
Strategie niestandardowe
Oprócz konfigurowania strategii Workbox umożliwia tworzenie własnych strategii niestandardowych.
Możesz to zrobić, importując i rozszerzając klasę bazową Strategy
z workbox-strategies
:
import {Strategy} from 'workbox-strategies';
class NewStrategy extends Strategy {
_handle(request, handler) {
// Define handling logic here
}
}
W tym przykładzie handle()
jest używany jako strategia żądań do określenia określonej logiki obsługi. Można stosować 2 strategie dotyczące żądań:
handle()
: wykonuje strategię żądań i zwracaPromise
, który zostanie rozwiązany za pomocą wywołaniaResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.handleAll()
: element podobny dohandle()
, ale zwraca dwa obiektyPromise
. Pierwsza jest odpowiednikiem wartości zwracanych przez funkcjęhandle()
, a druga zostanie zrealizowana po spełnieniu obietnic dodanych do funkcjievent.waitUntil()
w ramach strategii.
Obie strategie żądania są wywoływane z dwoma parametrami:
request
:Request
, w przypadku którego strategia zwróci odpowiedź.handler
: instancjaStrategyHandler
została automatycznie utworzona dla bieżącej strategii.
Tworzenie nowej strategii
Oto przykład nowej strategii, która ponownie implementuje działanie elementu NetworkOnly
:
class NewNetworkOnlyStrategy extends Strategy {
_handle(request, handler) {
return handler.fetch(request);
}
}
Zwróć uwagę, że wywoływana jest metoda handler.fetch()
zamiast natywnej metody fetch
. Klasa StrategyHandler
udostępnia szereg działań pobierania i pamięci podręcznej, których można używać zawsze wtedy, gdy używana jest zasada handle()
lub handleAll()
:
fetch
: pobiera określone żądanie i wywołuje metody cyklu życia wtyczkirequestWillFetch()
,fetchDidSucceed()
orazfetchDidFail()
cacheMatch
: dopasowuje żądanie z pamięci podręcznej i wywołuje metody cyklu życia wtyczkicacheKeyWillBeUsed()
orazcachedResponseWillBeUsed()
cachePut
: umieszcza parę żądanie/odpowiedź w pamięci podręcznej oraz wywołuje metody cyklu życia wtyczkicacheKeyWillBeUsed()
,cacheWillUpdate()
icacheDidUpdate()
.fetchAndCachePut
: wywołujefetch()
i uruchamia w tlecachePut()
dla odpowiedzi wygenerowanej przezfetch()
.hasCallback
: przyjmuje wywołanie zwrotne jako dane wejściowe i zwraca wartość „prawda”, jeśli strategia ma co najmniej 1 wtyczkę z danym wywołaniem zwrotnym.runCallbacks
: uruchamia wszystkie wywołania zwrotne wtyczki pasujące do podanej nazwy w określonej kolejności, przekazując dany obiekt parametru (scalony z bieżącym stanem wtyczki) jako jedyny argument.iterateCallbacks
: przyjmuje wywołanie zwrotne i zwraca powtarzalne wywołanie zwrotne wtyczki, w którym każde wywołanie zwrotne jest dodawane z obecnym stanem modułu obsługi (np. przy każdym wywołaniu każdy przekazywany parametr obiektu zostanie scalony z bieżącym stanem wtyczki).waitUntil
: dodaje obietnicę do przedłużenia okresu trwania zdarzenia powiązanego z obsłużonym żądaniem (zwykleFetchEvent
).doneWaiting
: zwraca obietnicę, która znika po spełnieniu wszystkich obietnic przekazanych dowaitUntil()
.destroy
: przerywa stosowanie strategii i natychmiast rozwiązuje wszystkie oczekujące obietnice typuwaitUntil()
.
Niestandardowa strategia wyścigu sieciowego pamięci podręcznej
Poniższy przykład opiera się na danych cache-network-race z książki kucharskiej offline (których nie ma w zestawie Workbox), ale idzie o krok dalej i zawsze aktualizuje pamięć podręczną po udanym żądaniu sieci. To przykład bardziej złożonej strategii, która obejmuje wiele działań.
import {Strategy} from 'workbox-strategies';
class CacheNetworkRace extends Strategy {
_handle(request, handler) {
const fetchAndCachePutDone = handler.fetchAndCachePut(request);
const cacheMatchDone = handler.cacheMatch(request);
return new Promise((resolve, reject) => {
fetchAndCachePutDone.then(resolve);
cacheMatchDone.then(response => response && resolve(response));
// Reject if both network and cache error or find no response.
Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
results => {
const [fetchAndCachePutResult, cacheMatchResult] = results;
if (
fetchAndCachePutResult.status === 'rejected' &&
!cacheMatchResult.value
) {
reject(fetchAndCachePutResult.reason);
}
}
);
});
}
}
Zaawansowane użycie
Jeśli chcesz użyć tych strategii we własnej logice zdarzeń pobierania, możesz użyć klas strategii, aby uruchomić żądanie w ramach określonej strategii.
Aby np. użyć strategii „Nieaktualne podczas ponownej weryfikacji”, możesz wykonać te czynności:
self.addEventListener('fetch', event => {
const {request} = event;
const url = new URL(request.url);
if (url.origin === location.origin && url.pathname === '/') {
event.respondWith(new StaleWhileRevalidate().handle({event, request}));
}
});
Listę dostępnych klas znajdziesz w dokumentacji dotyczącej strategii Workbox.
Typy
CacheFirst
Implementacja strategii żądania pierwszej w pamięci podręcznej.
Strategia priorytetowa w pamięci podręcznej jest przydatna w przypadku zasobów, których wersje zostały zmienione, takich jak adresy URL w rodzaju /styles/example.a8f5f1.css
, ponieważ mogą być przechowywane w pamięci podręcznej przez długi czas.
Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania w pamięci podręcznej, spowoduje to zgłoszenie wyjątku WorkboxError
.
Właściwości
-
konstruktor
void
Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako właściwości instancji publicznej.
Uwaga: jeśli klasa strategii niestandardowej rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi określać własnego konstruktora.
Funkcja
constructor
wygląda tak:(options?: StrategyOptions) => {...}
-
Opcje
Opcjonalne StrategyOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
CacheOnly
Implementacja strategii wysyłania żądań tylko z pamięci podręcznej.
Ta klasa jest przydatna, jeśli chcesz korzystać z dowolnych wtyczek Workbox.
Jeśli nie ma dopasowania w pamięci podręcznej, spowoduje to zgłoszenie wyjątku WorkboxError
.
Właściwości
-
konstruktor
void
Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako właściwości instancji publicznej.
Uwaga: jeśli klasa strategii niestandardowej rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi określać własnego konstruktora.
Funkcja
constructor
wygląda tak:(options?: StrategyOptions) => {...}
-
Opcje
Opcjonalne StrategyOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
NetworkFirst
Wdrożenie strategii żądania najpierw sieci.
Domyślnie ta strategia zapisuje w pamięci podręcznej odpowiedzi z kodem stanu 200 oraz nieprzejrzyste odpowiedzi. Odpowiedzi nieprzezroczyste to żądania z innych domen, w przypadku których odpowiedź nie obsługuje CORS.
Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania w pamięci podręcznej, spowoduje to zgłoszenie wyjątku WorkboxError
.
Właściwości
-
konstruktor
void
Funkcja
constructor
wygląda tak:(options?: NetworkFirstOptions) => {...}
-
Opcje
Opcjonalny NetworkFirstOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
NetworkFirstOptions
Właściwości
-
cacheName
ciąg znaków opcjonalny
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
networkTimeoutSeconds
Liczba opcjonalnie
-
wtyczki
WorkboxPlugin[] opcjonalny
NetworkOnly
Wdrożenie strategii żądania tylko sieci.
Ta klasa jest przydatna, jeśli chcesz korzystać z dowolnych wtyczek Workbox.
Jeśli żądanie sieciowe nie powiedzie się, spowoduje to zgłoszenie wyjątku WorkboxError
.
Właściwości
-
konstruktor
void
Funkcja
constructor
wygląda tak:(options?: NetworkOnlyOptions) => {...}
-
Opcje
opcjonalnie NetworkOnlyOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
NetworkOnlyOptions
Właściwości
-
fetchOptions
RequestInit opcjonalnie
-
networkTimeoutSeconds
Liczba opcjonalnie
-
wtyczki
WorkboxPlugin[] opcjonalny
StaleWhileRevalidate
Wdrożenie strategii wysyłania żądań stale-pending-revalidate (nieaktualny w czasie ponownej weryfikacji).
Żądania zasobów są pobierane równolegle z pamięci podręcznej i sieci. W odpowiedzi strategia przedstawi wersję z pamięci podręcznej, jeśli jest dostępna. W przeciwnym razie zaczekaj na odpowiedź sieci. Pamięć podręczna jest aktualizowana odpowiedzią sieciową po każdym pomyślnym żądaniu.
Domyślnie ta strategia zapisuje w pamięci podręcznej odpowiedzi z kodem stanu 200 oraz nieprzejrzyste odpowiedzi. Odpowiedzi nieprzezroczyste to żądania z innych domen, w przypadku których odpowiedź nie obsługuje CORS.
Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania w pamięci podręcznej, spowoduje to zgłoszenie wyjątku WorkboxError
.
Właściwości
-
konstruktor
void
Funkcja
constructor
wygląda tak:(options?: StrategyOptions) => {...}
-
Opcje
Opcjonalne StrategyOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
Strategy
Abstrakcyjna klasa bazowa, z której muszą pochodzić wszystkie pozostałe klasy strategii:
Właściwości
-
konstruktor
void
Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako właściwości instancji publicznej.
Uwaga: jeśli klasa strategii niestandardowej rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi określać własnego konstruktora.
Funkcja
constructor
wygląda tak:(options?: StrategyOptions) => {...}
-
Opcje
Opcjonalne StrategyOptions
-
returns
-
-
cacheName
string,
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
-
_awaitComplete
void
Funkcja
_awaitComplete
wygląda tak:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
Obietnica<Response>
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
Funkcja
_getResponse
wygląda tak:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
moduł obsługi
-
Poproś
Prośba
-
event
ExtendableEvent
-
returns
Obietnica<Response>
-
-
_nick
void
Funkcja
_handle
wygląda tak:(request: Request, handler: StrategyHandler) => {...}
-
Poproś
Prośba
-
moduł obsługi
-
returns
Obietnica<Response>
-
-
nick
void
Wykonuje strategię żądań i zwraca kod
Promise
, który zostanie rozwiązany za pomocąResponse
, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.Jeśli instancja strategii jest zarejestrowana w Workbox
workbox-routing.Route
, ta metoda jest wywoływana automatycznie po dopasowaniu trasy.Tej metody można też używać w samodzielnym nasłuchującym
FetchEvent
, przekazując ją doevent.respondWith()
.Funkcja
handle
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
Obietnica<Response>
-
-
handleAll
void
Podobnie jak w przypadku
workbox-strategies.Strategy~handle
, ale zamiast zwrócenia po prostu wartościPromise
zwracającej wartośćResponse
zwraca on kropkę[response, done]
, gdzie pierwsza z nich (response
) odpowiada temu, co zwracahandle()
, a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych doevent.waitUntil()
w ramach realizacji strategii.Możesz poczekać na obietnicę
done
, aby mieć pewność, że każda dodatkowa praca wykonywana przez strategię (zwykle odpowiedzi w pamięci podręcznej) zakończy się pomyślnie.Funkcja
handleAll
wygląda tak:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
Opcje
FetchEvent | HandlerCallbackOptions
FetchEvent
lub obiekt o właściwościach wymienionych poniżej.
-
returns
[Promise<Response>, Promise<void>]
Kropka [response,Done], której można użyć do określenia, kiedy odpowiedź zostanie zakończona, a także o wykonaniu całej pracy przez moduł.
-
StrategyHandler
Klasa tworzona za każdym razem, gdy instancja strategii wywołuje workbox-strategies.Strategy~handle
lub workbox-strategies.Strategy~handleAll
, pakując wszystkie działania pobierania i pamięci podręcznej związane z wywołaniami zwrotnymi wtyczki i śledzi moment realizacji strategii (tj. wszystkie dodane obietnice typu event.waitUntil()
zostały zrealizowane).
Właściwości
-
konstruktor
void
Tworzy nową instancję powiązaną z przekazaną strategią i zdarzeniem, które przetwarza żądanie.
Konstruktor inicjuje też stan, który będzie przekazywany do każdej wtyczki obsługującej to żądanie.
Funkcja
constructor
wygląda tak:(strategy: Strategy, options: HandlerCallbackOptions) => {...}
-
strategiczne
-
Opcje
-
returns
-
-
event
ExtendableEvent
-
params
dowolne opcjonalne
-
Poproś
Prośba
-
URL
Adres URL opcjonalny
-
cacheMatch
void
Dopasowuje żądanie z pamięci podręcznej (i wywołuje odpowiednie metody wywołania zwrotnego wtyczki) za pomocą
cacheName
,matchOptions
iplugins
zdefiniowanych w obiekcie strategii.Przy użyciu tej metody wywoływane są następujące metody cyklu życia wtyczki:
- cacheKeyWillByUsed()
- cachedResponseWillByUsed()
Funkcja
cacheMatch
wygląda tak:(key: RequestInfo) => {...}
-
klucz
RequestInfo
Żądanie lub adres URL do użycia jako klucz pamięci podręcznej.
-
returns
Obietnica<Response>
Pasująca odpowiedź, jeśli została znaleziona.
-
cachePut
void
Umieszcza parę żądanie/odpowiedź w pamięci podręcznej (i wywołuje odpowiednie metody wywołania zwrotnego wtyczki) za pomocą metod
cacheName
iplugins
zdefiniowanych w obiekcie strategii.Przy użyciu tej metody wywoływane są następujące metody cyklu życia wtyczki:
- cacheKeyWillByUsed()
- cacheWillUpdate()
- cacheDidUpdate()
Funkcja
cachePut
wygląda tak:(key: RequestInfo, response: Response) => {...}
-
klucz
RequestInfo
Żądanie lub adres URL do użycia jako klucz pamięci podręcznej.
-
odpowiedź
Odpowiedź
Odpowiedź na pamięć podręczną.
-
returns
Promise<boolean>
false
, jeśli parametr cacheWillUpdate spowodował, że odpowiedź nie została zapisana w pamięci podręcznej. W przeciwnym razietrue
.
-
destroy
void
Zatrzymuje stosowanie strategii i od razu rozwiązuje wszystkie oczekujące obietnice typu
waitUntil()
.Funkcja
destroy
wygląda tak:() => {...}
-
doneWaiting
void
Zwraca obietnicę, która znika po sfinalizowaniu wszystkich obietnic przekazanych do
workbox-strategies.StrategyHandler~waitUntil
.Uwaga: wszelkie działania wykonane po uzgodnieniach
doneWaiting()
powinny być ręcznie przekazywane do metodywaitUntil()
zdarzenia (a nie metodywaitUntil()
tego modułu obsługi). W przeciwnym razie wątek skryptu service worker zostanie zatrzymany przed ukończeniem Twojej pracy.Funkcja
doneWaiting
wygląda tak:() => {...}
-
returns
Promise<void>
-
-
fetch
void
Pobiera dane żądanie (i wywołuje odpowiednie metody wywołania zwrotnego wtyczki) za pomocą metody
fetchOptions
(w przypadku żądań niezwiązanych z nawigacją) iplugins
zdefiniowanej w obiekcieStrategy
.Przy użyciu tej metody wywoływane są następujące metody cyklu życia wtyczki:
requestWillFetch()
fetchDidSucceed()
fetchDidFail()
Funkcja
fetch
wygląda tak:(input: RequestInfo) => {...}
-
dane wejściowe
RequestInfo
Adres URL lub żądanie do pobrania.
-
returns
Obietnica<Response>
-
fetchAndCachePut
void
Wywołania
this.fetch()
i (w tle) uruchamiająthis.cachePut()
w odpowiedzi wygenerowanej przezthis.fetch()
.Wywołanie
this.cachePut()
automatycznie wywołujethis.waitUntil()
, więc nie musisz ręcznie wywoływać metodywaitUntil()
w zdarzeniu.Funkcja
fetchAndCachePut
wygląda tak:(input: RequestInfo) => {...}
-
dane wejściowe
RequestInfo
Żądanie lub adres URL do pobrania i zapisania w pamięci podręcznej.
-
returns
Obietnica<Response>
-
-
getCacheKey
void
Sprawdza listę wtyczek wywołania zwrotnego
cacheKeyWillBeUsed
i wykona wszystkie podane w sekwencji wywołania zwrotne. Ostatni obiektRequest
zwracany przez ostatnią wtyczkę jest traktowany jako klucz pamięci podręcznej na potrzeby odczytu lub zapisu w pamięci podręcznej. Jeśli nie zarejestrowano żadnych wywołań zwrotnych wtyczkicacheKeyWillBeUsed
, przekazane żądanie jest zwracane bez modyfikacjiFunkcja
getCacheKey
wygląda tak:(request: Request, mode: "read"
| "write"
) => {...}-
Poproś
Prośba
-
tryb
"read"
| "write"
-
returns
Obietnica<Request>
-
-
hasCallback
void
Zwraca wartość „true” (prawda), jeśli strategia ma co najmniej 1 wtyczkę z danym wywołaniem zwrotnym.
Funkcja
hasCallback
wygląda tak:(name: C) => {...}
-
nazwa
C
Nazwa wywołania zwrotnego, które chcesz sprawdzić.
-
returns
boolean
-
-
iterateCallbacks
void
Akceptuje wywołanie zwrotne i zwraca powtarzalne pasujące wywołania zwrotne wtyczki, gdzie każde wywołanie zwrotne jest dodawane z obecnym stanem modułu obsługi (np. przy każdym wywołaniu każdy przekazywany parametr obiektu zostanie scalony z bieżącym stanem wtyczki).
Funkcja
iterateCallbacks
wygląda tak:(name: C) => {...}
-
nazwa
C
Nazwa wywołania zwrotnego, które ma zostać wykonane
-
returns
Generator<NonNullable<indexedAccess>anyunknown>
-
-
runCallbacks
void
Uruchamia wszystkie wywołania zwrotne wtyczki pasujące do podanej nazwy, w kolejności, przekazując podany obiekt parametru (scalony i-tym bieżący stan wtyczki) jako jedyny argument.
Uwaga: ta metoda uruchamia wszystkie wtyczki, więc nie sprawdza się w przypadkach, w których wartość zwrotną wywołania zwrotnego musi zostać zastosowana przed wywołaniem następnego wywołania zwrotnego. Instrukcje postępowania w takim przypadku znajdziesz w instrukcji
workbox-strategies.StrategyHandler#iterateCallbacks
poniżej.Funkcja
runCallbacks
wygląda tak:(name: C, param: Omit<indexedAccess"state"
>) => {...}-
nazwa
C
Nazwa wywołania zwrotnego, które ma być uruchomione w każdej wtyczce.
-
parametr
Pomiń<indexedAccess"state"
>Obiekt, który ma zostać przekazany jako pierwszy (i jedyny) parametr podczas wykonywania każdego wywołania zwrotnego. Ten obiekt zostanie scalony z obecnym stanem wtyczki przed wykonaniem wywołania zwrotnego.
-
returns
Promise<void>
-
-
waitUntil
void
Dodaje obietnicę do zdarzenia [extend future futures]
https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises
zdarzenia powiązanego z obsługiwanym żądaniem (zwykleFetchEvent
).Uwaga: możesz zaczekać
workbox-strategies.StrategyHandler~doneWaiting
na informację, kiedy wszystkie dodane obietnice zostaną spełnione.Funkcja
waitUntil
wygląda tak:(promise: Promise<T>) => {...}
-
obiekt typu Promise
Promise<T>
Obietnica uzupełnienia o dłuższą żywotność obietnicy zdarzenia, które wywołało żądanie.
-
returns
Promise<T>
-
StrategyOptions
Właściwości
-
cacheName
ciąg znaków opcjonalny
-
fetchOptions
RequestInit opcjonalnie
-
matchOptions
CacheQueryOptions opcjonalnie
-
wtyczki
WorkboxPlugin[] opcjonalny