strategie skrzynki roboczej

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

Diagram Nieaktualny 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)

Pierwszy schemat pamięci podręcznej

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)

Pierwszy schemat sieci

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ć

Diagram 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

Diagram przedstawiający tylko pamięć podręczną

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.

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 zwraca Promise, który zostanie rozwiązany za pomocą wywołania Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.
  • handleAll(): element podobny do handle(), ale zwraca dwa obiekty Promise. Pierwsza jest odpowiednikiem wartości zwracanych przez funkcję handle(), a druga zostanie zrealizowana po spełnieniu obietnic dodanych do funkcji event.waitUntil() w ramach strategii.

Obie strategie żądania są wywoływane z dwoma parametrami:

  • request: Request, w przypadku którego strategia zwróci odpowiedź.
  • handler: instancja StrategyHandler 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 wtyczki requestWillFetch(), fetchDidSucceed() oraz fetchDidFail()
  • cacheMatch: dopasowuje żądanie z pamięci podręcznej i wywołuje metody cyklu życia wtyczki cacheKeyWillBeUsed() oraz cachedResponseWillBeUsed()
  • cachePut: umieszcza parę żądanie/odpowiedź w pamięci podręcznej oraz wywołuje metody cyklu życia wtyczki cacheKeyWillBeUsed(), cacheWillUpdate() i cacheDidUpdate().
  • fetchAndCachePut: wywołuje fetch() i uruchamia w tle cachePut() dla odpowiedzi wygenerowanej przez fetch().
  • 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 (zwykle FetchEvent).
  • doneWaiting: zwraca obietnicę, która znika po spełnieniu wszystkich obietnic przekazanych do waitUntil().
  • destroy: przerywa stosowanie strategii i natychmiast rozwiązuje wszystkie oczekujące obietnice typu waitUntil().

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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • cacheName

    string,

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    void

    Funkcja _awaitComplete wygląda tak: 

    (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • responseDone

      Obietnica<Response>

    • moduł obsługi

      StrategyHandler

    • Poproś

      Prośba

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

    Funkcja _getResponse wygląda tak: 

    (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

    • returns

      Obietnica<Response>

  • _nick

    void

    Funkcja _handle wygląda tak: 

    (request: Request,handler: StrategyHandler)=> {...}

    • 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ą do event.respondWith().

    Funkcja handle wygląda tak: 

    (options: FetchEvent|HandlerCallbackOptions)=> {...}

    • returns

      Obietnica<Response>

  • handleAll

    void

    Podobnie jak w przypadku workbox-strategies.Strategy~handle, ale zamiast zwrócenia po prostu wartości Promise zwracającej wartość Response zwraca on kropkę [response, done], gdzie pierwsza z nich (response) odpowiada temu, co zwraca handle(), a druga jest obietnicą, która zostanie rozwiązana po spełnieniu wszelkich obietnic dodanych do event.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)=> {...}

    • 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)=> {...}

  • 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 i plugins 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 i plugins 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 razie true.

  • 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 metody waitUntil() zdarzenia (a nie metody waitUntil() 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ą) i plugins zdefiniowanej w obiekcie Strategy.

    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 przez this.fetch().

    Wywołanie this.cachePut() automatycznie wywołuje this.waitUntil(), więc nie musisz ręcznie wywoływać metody waitUntil() 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 obiekt Request 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 wtyczki cacheKeyWillBeUsed, przekazane żądanie jest zwracane bez modyfikacji

    Funkcja 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 (zwykle FetchEvent).

    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