strategie skrzynki roboczej

Gdy po raz pierwszy wprowadzono usługowe pliki cookie, pojawił się zestaw typowych strategii buforowania. Strategia buforowania to wzór określający sposób generowania odpowiedzi przez usługę workera po otrzymaniu zdarzenia pobierania.

workbox-strategies zawiera najczęściej stosowane strategie buforowania, dzięki czemu łatwo je zastosować w usługach workerów.

Nie będziemy się zagłębiać w strategie inne niż te obsługiwane przez Workbox, ale więcej informacji znajdziesz w książce kucharskiej Offline Cookbook.

Korzystanie ze strategii

W następnych przykładach pokażemy, jak używać strategii buforowania Workbox w przypadku workbox-routing. W przypadku każdej strategii możesz zdefiniować pewne opcje, które omawiamy w sekcji Konfigurowanie strategii tego dokumentu.

W sekcji Zaawansowane korzystanie opisujemy, jak bezpośrednio korzystać ze strategii buforowania bez workbox-routing.

Stale-While-Revalidate

Diagram „Stale While Revalidate”

Wzór stale-while-revalidate pozwala na jak najszybsze udzielenie odpowiedzi na żądanie za pomocą odpowiedzi z pamięci podręcznej (jeśli jest dostępna), a w przeciwnym razie za pomocą żądania sieci. Żądanie sieci jest następnie używane do aktualizowania pamięci podręcznej. W przeciwieństwie do niektórych implementacji strategii sprawdzania poprawności w przypadku nieaktualnych danych ta strategia zawsze wysyła żądanie ponownego sprawdzania niezależnie od wieku odpowiedzi z pamięci podręcznej.

Jest to dość powszechna strategia, w której posiadanie najnowszych zasobów nie jest kluczowe dla aplikacji.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Pamięć podręczna w pierwszej kolejności (pamięć podręczna z powrotem do sieci)

Diagram „Pamięć podręczna jako pierwsza”

Aplikacje internetowe offline będą w dużej mierze korzystać z pamięci podręcznej, ale w przypadku zasobów, które nie są krytyczne i mogą być stopniowo umieszczane w pamięci podręcznej, najlepszym rozwiązaniem jest cache first.

Jeśli w pamięci podręcznej znajduje się odpowiedź, żądanie zostanie zrealizowane przy użyciu odpowiedzi z pamięci podręcznej, a sieci w ogóle nie będzie używana. Jeśli nie ma odpowiedzi w pamięci podręcznej, żądanie zostanie spełnione przez żądanie sieciowe, a odpowiedź zostanie zapisana w pamięci podręcznej, aby następne żądanie zostało wyświetlone bezpośrednio z pamięci podręcznej.

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Sieć w pierwszej kolejności (siecią z powrotem do pamięci podręcznej)

Schemat sieci „najpierw”

W przypadku żądań, które są często aktualizowane, idealnym rozwiązaniem jest strategia network first. Domyślnie spró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ć

Schemat tylko sieci

Jeśli chcesz, aby określone żądania były realizowane przez sieć, 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 tylko z pamięcią podręczną

Strategia tylko z pamięci podręcznej zapewnia, że odpowiedzi są uzyskiwane z pamięci podręcznej. Jest to rzadsze w Workbox, ale może być przydatne, jeśli masz własny krok wstępnego buforowania.

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ą konfigurowanie tych ustawień:

  • Nazwa pamięci podręcznej, której ma używać strategia.
  • Ograniczenia dotyczące ważności pamięci podręcznej, które mają być stosowane w strategii.
  • Tablica wtyczek, których metody cyklu życia będą wywoływane podczas pobierania i zapisywania żądania do pamięci podręcznej.

Zmiana 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, jeśli chcesz rozdzielić zasoby, aby 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 zawiera zestaw wtyczek, których można używać z tymi strategiami.

Aby użyć którejkolwiek z tych wtyczek (lub wtyczki niestandardowej), wystarczy 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 możesz też w Workbox tworzyć własne strategie niestandardowe. Aby to zrobić, zaimportuj i rozszerz klasę bazową Strategy z poziomu 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żywane jako strategia żądania w celu zdefiniowania konkretnej logiki obsługi. Dostępne są 2 strategie żądań:

  • handle(): wykonuje strategię żądania i zwraca obiekt Promise, który zostanie rozwiązany jako Response, wywołując wszystkie odpowiednie funkcje zwrotne wtyczki.
  • handleAll(): podobny do handle(), ale zwraca 2 obiekty Promise. Pierwsza z nich jest równoważna wartości zwracanej przez funkcję handle(), a druga zostanie rozwiązana, gdy obietnice dodane do event.waitUntil() w ramach strategii zostaną spełnione.

Obie strategie żądań są wywoływane za pomocą 2 parametrów:

  • request: Request, dla którego strategia zwróci odpowiedź.
  • handler: instancja StrategyHandler utworzona automatycznie dla bieżącej strategii.

Tworzenie nowej strategii

Oto przykład nowej strategii, która ponownie wdraża działanie NetworkOnly:

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Zwróć uwagę, że zamiast natywnej metody fetch wywołujemy metodę handler.fetch(). Klasa StrategyHandler udostępnia kilka działań pobierania i zapisywania do pamięci podręcznej, które można wykorzystać, gdy używane są handle() lub handleAll():

  • fetch: pobiera określone żądanie i wywołuje metody cyklu życia wtyczki requestWillFetch(), fetchDidSucceed() i fetchDidFail().
  • cacheMatch: dopasowuje żądanie do pamięci podręcznej i wywołuje metody cyklu życia wtyczki cacheKeyWillBeUsed() i cachedResponseWillBeUsed()
  • cachePut: umieszcza parę żądanie/odpowiedź w pamięci podręcznej i wywołuje metody cyklu życia wtyczki cacheKeyWillBeUsed(), cacheWillUpdate() i cacheDidUpdate().
  • fetchAndCachePut: wywołuje funkcję fetch() i uruchamia funkcję cachePut() w tle na podstawie odpowiedzi wygenerowanej przez funkcję fetch().
  • hasCallback: przyjmuje jako argument funkcję wywołania zwrotnego i zwraca wartość „prawda”, jeśli strategia ma co najmniej 1 wtyczkę z tym wywołaniem zwrotnym.
  • runCallbacks: wywołuje kolejno wszystkie funkcje zwrotne wtyczki pasujące do podanej nazwy, przekazując jako jedyny argument obiekt param (połączony z bieżącym stanem wtyczki).
  • iterateCallbacks: przyjmuje funkcję zwracającą wywołania zwrotne pasujących wtyczek, gdzie każde wywołanie zwrotne jest otoczone bieżącym stanem modułu obsługi (czyli gdy wywołasz każde wywołanie zwrotne, przekazywany przez Ciebie parametr obiektu zostanie scalony z bieżącym stanem wtyczki).
  • waitUntil: dodaje obietnicę do obietnic o długotrwałym okresie ważności wydarzenia powiązanego z rozpatrywanym zgłoszeniem (zwykle FetchEvent).
  • doneWaiting: zwraca obietnicę, która zostanie spełniona, gdy wszystkie obietnice przekazane do waitUntil() zostaną ustabilizowane.
  • destroy: przerywa działanie strategii i natychmiast rozwiązuje wszystkie oczekujące waitUntil() obietnice.

Niestandardowa strategia rywalizacji w sieci w przypadku tymczasowego przechowywania danych

Ten przykład jest oparty na konkurencji między pamięcią podręczną a siecią z książki Offline Cookbook (której nie udostępnia Workbox), ale idzie o krok dalej i zawsze aktualizuje pamięć podręczną po pomyślnym przesłaniu żądania do sieci. Poniżej przedstawiamy przykład bardziej złożonej strategii, która korzysta z kilku 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żywać strategii we własnej logice zdarzenia pobierania, możesz użyć klas strategii, aby przekazać żądanie do określonej strategii.

Aby na przykład użyć strategii sprawdzania poprawności po potwierdzeniu, wykonaj 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 referencyjnej workbox-strategies.

Typy

CacheFirst

Wdrożenie strategii żądań cache-first.

Strategia „najpierw pamięć podręczna” jest przydatna w przypadku zasobów, które zostały zaktualizowane, takich jak adresy URL, np. /styles/example.a8f5f1.css, ponieważ mogą one być przechowywane w pamięci podręcznej przez długi czas.

Jeśli żądanie sieci nie powiedzie się i nie ma dopasowania w pamięci podręcznej, zostanie zgłoszony wyjątek WorkboxError.

Właściwości

  • constructor

    nieważne

    Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako publiczne właściwości instancji.

    Uwaga: jeśli klasa niestandardowej strategii rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi definiować własnego konstruktora.

    Funkcja constructor ma postać:

    (options?: StrategyOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie funkcje zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą pracę.

CacheOnly

Implementacja strategii żądań tylko do pamięci podręcznej.

Ta klasa jest przydatna, jeśli chcesz korzystać z wtyczek Workbox.

Jeśli nie ma dopasowania w pamięci podręcznej, zostanie rzucony wyjątek WorkboxError.

Właściwości

  • constructor

    nieważne

    Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako publiczne właściwości instancji.

    Uwaga: jeśli klasa niestandardowej strategii rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi definiować własnego konstruktora.

    Funkcja constructor ma postać:

    (options?: StrategyOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą swoją pracę.

NetworkFirst

Wdrożenie strategii żądań najpierw w sieci.

Domyślnie ta strategia będzie przechowywać w pamięci podręcznej odpowiedzi z kodem stanu 200 oraz nieprzezroczyste odpowiedzi. Nieprzejrzystość odpowiedzi dotyczy żądań między domenami, w których odpowiedzi nie obsługuje się CORS.

Jeśli żądanie sieci nie powiedzie się i nie ma dopasowania w pamięci podręcznej, zostanie zgłoszony wyjątek WorkboxError.

Właściwości

  • constructor

    nieważne

    Funkcja constructor ma postać:

    (options?: NetworkFirstOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie funkcje zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą swoją pracę.

NetworkFirstOptions

Właściwości

  • cacheName

    ciąg znaków opcjonalny

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • networkTimeoutSeconds

    number opcjonalny

  • wtyczki

    WorkboxPlugin[] opcjonalnie

NetworkOnly

Wdrożono strategię żądań tylko dla sieci.

Ta klasa jest przydatna, jeśli chcesz korzystać z wtyczek Workbox.

Jeśli żądanie sieciowe się nie powiedzie, zostanie zgłoszony wyjątek WorkboxError.

Właściwości

  • constructor

    nieważne

    Funkcja constructor ma postać:

    (options?: NetworkOnlyOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie funkcje zwracane przez wtyczkę.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą swoją pracę.

NetworkOnlyOptions

Właściwości

  • fetchOptions

    RequestInit opcjonalny

  • networkTimeoutSeconds

    number opcjonalny

  • wtyczki

    WorkboxPlugin[] opcjonalnie

StaleWhileRevalidate

Implementacja strategii żądań stale-while-revalidate.

Zasoby są pobierane równolegle z pamięci podręcznej i sieci. Strategia odpowie wersją z pamięci podręcznej, jeśli jest dostępna, w przeciwnym razie zaczeka na odpowiedź sieci. Pamięć podręczna jest aktualizowana o odpowiedź sieci za każdym razem, gdy żądanie zostanie zrealizowane.

Domyślnie ta strategia będzie przechowywać w pamięci podręcznej odpowiedzi z kodem stanu 200 oraz nieprzezroczyste odpowiedzi. Nieprzejrzystość odpowiedzi to żądania między domenami, w których odpowiedzi nie obsługuje się CORS.

Jeśli żądanie sieci nie powiedzie się i nie ma dopasowania w pamięci podręcznej, zostanie zgłoszony wyjątek WorkboxError.

Właściwości

  • constructor

    nieważne

    Funkcja constructor ma postać:

    (options?: StrategyOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie funkcje zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą swoją pracę.

Strategy

Abstrakcyjna klasa podstawowa, z której muszą pochodzić wszystkie inne klasy strategii:

Właściwości

  • constructor

    nieważne

    Tworzy nową instancję strategii i ustawia wszystkie udokumentowane właściwości opcji jako publiczne właściwości instancji.

    Uwaga: jeśli klasa niestandardowej strategii rozszerza podstawową klasę Strategy i nie potrzebuje więcej niż tych właściwości, nie musi definiować własnego konstruktora.

    Funkcja constructor ma postać:

    (options?: StrategyOptions) => {...}

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnice<Odpowiedź>

  • _handle

    nieważne

    Funkcja _handle ma postać:

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

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

    Wykonuje strategię żądania i zwraca Promise, który zostanie rozwiązany za pomocą Response, wywołując wszystkie odpowiednie funkcje zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w Workbox workbox-routing.Route, ta metoda jest wywoływana automatycznie, gdy trasa pasuje.

    Można też użyć tej metody w samodzielnym odbiorniku FetchEvent, przekazując ją do event.respondWith().

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

    Funkcja ta jest podobna do funkcji workbox-strategies.Strategy~handle, ale zamiast zwracania tylko wartości Promise, która jest równoważna wartości zwracanej przez funkcję Response, zwraca tablicę [response, done] obietnic, gdzie pierwsza z nich (response) jest równoważna wartości zwracanej przez funkcję handle(), a druga to obietnica, która zostanie spełniona, gdy wszystkie obietnice dodane do event.waitUntil() w ramach wykonywania strategii zostaną wykonane.

    Możesz poczekać na done, aby mieć pewność, że wszystkie dodatkowe działania wykonywane przez strategię (zwykle buforowanie odpowiedzi) zostały zakończone pomyślnie.

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

      Obiekt FetchEvent lub obiekt z właściwościami wymienionymi poniżej.

    • returns

      [Promise<Response>, Promise<void>]

      Para [response, done] obietnic, których można użyć do określenia, kiedy odpowiedź zostanie spełniona, a także kiedy przetwarzacz wykonał już całą pracę.

StrategyHandler

Klasa tworzona za każdym razem, gdy instancja klasy Strategy wywołuje metodę workbox-strategies.Strategy~handle lub workbox-strategies.Strategy~handleAll, która obejmuje wszystkie działania związane z pobieraniem i używaniem pamięci podręcznej wokół wywołań zwrotnych w pluginie oraz śledzi, kiedy strategia „zakończy” działanie (czyli wszystkie obietnice event.waitUntil() zostały spełnione).

Właściwości

  • constructor

    nieważne

    Tworzy nową instancję powiązaną z przekazaną strategią i zdarzeniem, które obsługuje żądanie.

    Konstruktor inicjuje też stan, który zostanie przekazany do każdego z wtyczek obsługujących to żądanie.

    Funkcja constructor ma postać:

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • event

    ExtendableEvent

  • params

    dowolne opcjonalne

  • żądanie

    Żądanie

  • URL

    Adres URL opcjonalny

  • cacheMatch

    nieważne

    Dopasowuje żądanie z pamięci podręcznej (i wywołuje odpowiednie metody wywołania wtyczki) za pomocą metod cacheName, matchOptions i plugins zdefiniowanych w obiekcie strategii.

    W ramach tej metody wywoływane są następujące metody cyklu życia wtyczki:

    • cacheKeyWillBeUsed()
    • cachedResponseWillBeUsed()

    Funkcja cacheMatch ma postać:

    (key: RequestInfo) => {...}

    • klucz

      RequestInfo

      Żądanie lub adres URL do użycia jako klucza pamięci podręcznej.

    • returns

      Obietnice<Odpowiedź>

      pasującą odpowiedź, jeśli została znaleziona;

  • cachePut

    nieważne

    umieszcza parę żądanie/odpowiedź w pamięci podręcznej (i wywołuje odpowiednie metody wywołania wtyczki) za pomocą parametrów cacheName i plugins zdefiniowanych w obiekcie strategii.

    W ramach tej metody wywoływane są następujące metody cyklu życia wtyczki:

    • cacheKeyWillBeUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    Funkcja cachePut ma postać:

    (key: RequestInfo, response: Response) => {...}

    • klucz

      RequestInfo

      Żądanie lub adres URL do użycia jako klucza pamięci podręcznej.

    • odpowiedź

      Odpowiedź

      Odpowiedź na pamięć podręczną.

    • returns

      Promise<boolean>

      false, jeśli odpowiedź nie została zapisana w pamięci podręcznej z powodu cacheWillUpdate, oraz true w przeciwnym razie.

  • zniszczyć

    nieważne

    Zatrzymuje działanie strategii i natychmiast rozwiązuje wszystkie oczekujące waitUntil() obietnice.

    Funkcja destroy ma postać:

    () => {...}

  • doneWaiting

    nieważne

    Zwraca obietnicę, która zostanie spełniona, gdy wszystkie obietnice przekazane do funkcji workbox-strategies.StrategyHandler~waitUntil zostaną zrealizowane.

    Uwaga: wszelkie działania wykonywane po zakończeniu działania metody doneWaiting() należy ręcznie przekazać do metody waitUntil() zdarzenia (a nie do metody waitUntil() tego modułu obsługi). W przeciwnym razie wątek usługi może zostać przerwany przed zakończeniem pracy.

    Funkcja doneWaiting ma postać:

    () => {...}

    • returns

      Obietnica<void>

  • pobrać

    nieważne

    Pobiera określone żądanie (i wywołuje odpowiednie metody wywołania wtyczki) za pomocą fetchOptions (w przypadku żądań innych niż dotyczące nawigacji) i plugins zdefiniowanych w obiekcie Strategy.

    W ramach tej metody wywoływane są następujące metody cyklu życia wtyczki:

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

    Funkcja fetch ma postać:

    (input: RequestInfo) => {...}

    • dane wejściowe

      RequestInfo

      Adres URL lub żądanie do pobrania.

    • returns

      Obietnice<Odpowiedź>

  • fetchAndCachePut

    nieważne

    Wywołuje funkcję this.fetch() i (w tle) wykonuje funkcję this.cachePut() na odpowiedzi wygenerowanej przez funkcję this.fetch().

    Wywołanie funkcji this.cachePut() automatycznie wywołuje funkcję this.waitUntil(), dzięki czemu nie musisz ręcznie wywoływać funkcji waitUntil() w ramach tego zdarzenia.

    Funkcja fetchAndCachePut ma postać:

    (input: RequestInfo) => {...}

    • dane wejściowe

      RequestInfo

      Żądanie lub adres URL do pobrania i zapisania do pamięci podręcznej.

    • returns

      Obietnice<Odpowiedź>

  • getCacheKey

    nieważne

    Sprawdza listę wtyczek pod kątem wywołania zwrotnego cacheKeyWillBeUsed i wykonuje wszystkie znalezione wywołania zwrotne w kolejności. Ostatni obiekt Request zwrócony przez ostatni wtyczkę jest traktowany jako klucz pamięci podręcznej do odczytu lub zapisu. Jeśli nie zarejestrowano żadnych wywołań zwrotnych wtyczki cacheKeyWillBeUsed, przekazane żądanie zostanie zwrócone bez zmian

    Funkcja getCacheKey ma postać:

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • żądanie

      Żądanie

    • tryb

      "read"
       | "write"

    • returns

      Promise<Request>

  • hasCallback

    nieważne

    Zwraca wartość „prawda”, jeśli strategia ma co najmniej 1 wtyczkę z danym wywołaniem zwrotnym.

    Funkcja hasCallback ma postać:

    (name: C) => {...}

    • nazwa

      C

      Nazwa wywołania zwrotnego do sprawdzenia.

    • returns

      wartość logiczna

  • iterateCallbacks

    nieważne

    Przyjmuje funkcję zwracającą wywołania zwrotne pasujących wtyczek, gdzie każde wywołanie zwrotne jest owinięte bieżącym stanem modułu (czyli gdy wywołasz każde wywołanie zwrotne, każdy parametr obiektu, który mu przekazujesz, zostanie scalony z bieżącym stanem wtyczki).

    Funkcja iterateCallbacks ma postać:

    (name: C) => {...}

    • nazwa

      C

      Nazwa wywołania zwrotnego do wykonania

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    nieważne

    Wywołuje kolejno wszystkie funkcje zwrotne wtyczki pasujące do podanej nazwy, przekazując jako jedyny argument podany obiekt param (połączony z bieżącym stanem wtyczki).

    Uwaga: ta metoda uruchamia wszystkie wtyczki, więc nie nadaje się do przypadków, w których wartość zwracana przez wywołanie zwrotne musi być stosowana przed wywołaniem następnego wywołania zwrotnego. Aby dowiedzieć się, jak rozwiązać ten problem, poniżej znajdziesz informacje o tym, jak postępować w takim przypadku.workbox-strategies.StrategyHandler#iterateCallbacks

    Funkcja runCallbacks ma postać:

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • nazwa

      C

      Nazwa wywołania zwrotnego, które ma być wykonywane w każdej wtyczce.

    • param

      Omit<indexedAccess"state"
      >

      Obiekt, który ma być przekazywany jako pierwszy (i jedyny) parametr podczas wykonywania każdego wywołania zwrotnego. Przed wykonaniem wywołania zwrotnego ten obiekt zostanie scalony z bieżącym stanem wtyczki.

    • returns

      Obietnica<void>

  • waitUntil

    nieważne

    Dodaje obietnicę do [extend lifetime promises]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promiseszdarzenia powiązanego z obsługiwanym żądaniem (zazwyczaj FetchEvent).

    Uwaga: możesz poczekać, aż wszystkie dodane zobowiązania zostaną rozliczone.workbox-strategies.StrategyHandler~doneWaiting

    Funkcja waitUntil ma postać:

    (promise: Promise<T>) => {...}

    • promise

      Promise<T>

      Obietnica przedłużenia okresu obowiązywania obietnic dotyczących zdarzenia, które spowodowało wysłanie prośby.

    • returns

      Promise<T>

StrategyOptions

Właściwości

  • cacheName

    ciąg znaków opcjonalny

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[] opcjonalnie