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

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)

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)

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ć

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

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.

• workbox-background-sync
• workbox-broadcast-update
• workbox-cacheable-response
• workbox-expiration
• workbox-range-requests

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.

Uwaga: aby sprawdzić wszystkie parametry akceptowane przez każde działanie, zapoznaj się z implementacją źródła StrategyHandler.

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

  • Opcje

    StrategyOptions opcjonalne

  • returns

    CacheFirst

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

  • Opcje

    StrategyOptions opcjonalne

  • returns

    CacheOnly

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

  • Opcje

    NetworkFirstOptions opcjonalne

  • returns

    NetworkFirst

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

  • Opcje

    NetworkOnlyOptions opcjonalne

  • returns

    NetworkOnly

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

  • Opcje

    StrategyOptions opcjonalne

  • returns

    StaleWhileRevalidate

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

  • Opcje

    StrategyOptions opcjonalne

  • returns

    Strategia

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

  • żądanie

    Żądanie

  • moduł obsługi

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

  • strategia

    Strategia

  • Opcje

    HandlerCallbackOptions

  • returns

    StrategyHandler

• 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