strategie skrzynki roboczej

Gdy wprowadzono mechanizmy Service Worker, zestaw popularnych strategii buforowania powstała. Strategia buforowania to wzorzec określający sposób, w jaki skrypt service worker generuje odpowiedź po otrzymaniu zdarzenia pobierania.

workbox-strategies podaje najpopularniejsze strategie buforowania, aby ułatwić zastosować je w skrypcie service worker.

Nie będziemy omawiać szczegółowo strategii obsługiwanych przez Workbox, ale możesz dowiedzieć się więcej w Książce kucharskiej offline.

Wykorzystanie strategii

W poniższych przykładach pokażemy, jak korzystać z buforowania Workbox. strategii z workbox-routing. Istnieją opcje, za pomocą których można określić każdej strategii objętej Konfigurowanie strategii w tym dokumencie.

W sekcji Zaawansowane użycie omówimy, jak korzystać strategie buforowania bezpośrednio, bez workbox-routing.

Nieaktualne – podczas ponownej weryfikacji

Diagram jest nieaktualny podczas ponownej weryfikacji

Przycisk Nieaktualne w trakcie ponownej weryfikacji pozwala jak najszybciej odpowiedzieć na żądanie za pomocą odpowiedź z pamięci podręcznej, o ile jest dostępna, a w razie potrzeby do żądania sieciowego nie z pamięci podręcznej. Żądanie sieciowe służy następnie do aktualizacji pamięci podręcznej. W przeciwieństwie do niektóre implementacje „nieaktualne w momencie ponownej weryfikacji”, strategia ta zawsze wysyła żądanie ponownej weryfikacji, bez względu na datę utworzenia odpowiedzi w pamięci podręcznej.

Jest to dość powszechna strategia, w ramach której można korzystać z najbardziej aktualnych zasobów nie jest istotne dla zgłoszenia.

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 z powrotem 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 niekrytyczne, można je stopniowo zapisywać w pamięci podręcznej, najpierw w pamięci podręcznej jest najlepszą opcją.

Jeśli w pamięci podręcznej znajduje się odpowiedź, Żądanie zostanie zrealizowane za pomocą odpowiedź z pamięci podręcznej, dzięki czemu sieć w ogóle nie będzie używana. Jeśli nie ma żądanie zostanie zrealizowane przez żądanie sieciowe i odpowiedź będzie przechowywany w pamięci podręcznej, dzięki czemu następne żądanie jest 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ć (przywrócenie pamięci podręcznej)

Pierwszy schemat sieci

W przypadku często aktualizowanych żądań Najpierw sieć jest najlepszym rozwiązaniem. Domyślnie próbuje pobrać najnowsze odpowiedź z sieci. Jeśli żądanie zostanie zrealizowane, w odpowiedzi pojawi się odpowiedź w pamięci podręcznej. Jeśli sieć nie zwróci odpowiedzi, 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 realizować konkretne żądania z sieci, tylko sieć jest wybrana strategia.

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

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Tylko pamięć podręczna

Diagram dotyczący tylko pamięci podręcznej

Tylko pamięć podręczna daje pewność, że odpowiedzi są pobierane z pamięci podręcznej. Ta opcja jest rzadsza w Workbox, ale może być przydatne, jeśli masz własny etap 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 dostępne strategie pozwalają skonfigurować:

  • Nazwa pamięci podręcznej, która ma być używana w strategii.
  • Ograniczenia dotyczące wygaśnięcia pamięci podręcznej, które mają być używane w strategii.
  • Tablica wtyczek, których metody cyklu życia będą wywoływane, gdy pobierania i buforowania żądania.

Zmiana pamięci podręcznej używanej przez strategię

Możesz zmienić strategię używaną w pamięci podręcznej, podając nazwę pamięci podręcznej. To jest przydatne, jeśli chcesz oddzielić 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 korzystać z tych wtyczek (lub wtyczek niestandardowych), wystarczy przekazać instancji 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 też tworzenie własnych strategii niestandardowych. Można 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żywana jako strategia żądania do definiowania konkretnej logiki obsługi. OK to 2 strategie, których możesz użyć:

  • handle(): wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie rozpoznana za pomocą parametru Response, wszystkie odpowiednie wywołania zwrotne.
  • handleAll(): podobny do handle(), ale zwraca 2 obiekty Promise. Pierwsza to odpowiednik zwracany przez handle(), a drugi zakończy się, gdy nastąpią obietnice, które zostały dodano do event.waitUntil() w ramach strategii.

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

  • request: Request, w przypadku którego strategia zwróci odpowiedź.
  • handler: automatycznie utworzone wystąpienie StrategyHandler na potrzeby bieżącej strategii.

Tworzenie nowej strategii

Oto przykład nowej strategii, która ponownie implementuje działanie NetworkOnly:

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

Zwróć uwagę, że metoda handler.fetch() jest wywoływana zamiast natywnej metody fetch. StrategyHandler klasa udostępnia szereg działań pobierania i pamięci podręcznej, których można użyć, gdy handle() lub Wartość handleAll() jest używana:

  • fetch: pobiera dane żądanie i wywołuje requestWillFetch(), fetchDidSucceed() oraz fetchDidFail() metod cyklu życia wtyczki
  • cacheMatch: dopasowuje żądanie z pamięci podręcznej i wywołuje żądania cacheKeyWillBeUsed() oraz cachedResponseWillBeUsed() metod cyklu życia wtyczki
  • cachePut: umieszcza parę żądanie/odpowiedź w pamięci podręcznej i wywołuje metodę cacheKeyWillBeUsed(), Metody cyklu życia wtyczki cacheWillUpdate() i cacheDidUpdate()
  • fetchAndCachePut: wywołuje metodę fetch() i uruchamia cachePut() w tle w odpowiedzi wygenerowany przez: fetch().
  • hasCallback: pobiera 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 w kolejności wywołania zwrotne wtyczki pasujące do podanej nazwy, przekazując dany parametr (scalony z bieżącym stanem wtyczki) jako jedyny argument.
  • iterateCallbacks: przyjmuje wywołanie zwrotne i zwraca iterację pasujących wywołań zwrotnych wtyczki, gdzie każde wywołanie zwrotne jest zawijane z aktualnym stanem modułu obsługi (tzn. przy wywołaniu każdego wywołania zwrotnego każdy przekazywany parametr obiektu zostanie scalony z bieżącym stanem wtyczki).
  • waitUntil: dodaje obietnicę przedłużenia dożywotni wydarzenie powiązane z wydarzeniem. obsługiwane żądanie (zwykle jest to FetchEvent).
  • doneWaiting: zwraca obietnicę do realizacji, gdy wszystkie obietnice przekazane do waitUntil() zostaną zrealizowane .
  • destroy: przestaje realizować strategię i natychmiast realizuje wszystkie oczekujące obietnice waitUntil().
.

Niestandardowa strategia wyścigu w sieci pamięci podręcznej

Poniższy przykład jest oparty na cache-network-race z Książka kucharska offline (której nie zapewnia Workbox), ale idzie o krok dalej i zawsze aktualizuje pamięci podręcznej po udanym żądaniu sieciowym. To przykład bardziej złożonej strategii, która wykorzystuje wielu 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

Jeśli chcesz użyć strategii we własnej logice zdarzenia pobierania, możesz za pomocą klas strategii, aby uruchomić żądanie z użyciem konkretnej strategii.

Na przykład, aby użyć strategii „nieaktualne w trakcie ponownej weryfikacji”, możesz użyć narzędzia :

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 zajęć znajdziesz w dokumenty z dokumentacją strategii Workbox (w języku angielskim).

Typy

CacheFirst

Implementacja interfejsu buforowanego strategii żądania.

Strategia najpierw w pamięci podręcznej jest przydatna w przypadku zasobów, które zostały poprawione, takich jak /styles/example.a8f5f1.css, bo są one mogą być przechowywane w pamięci podręcznej przez długi czas.

Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania do pamięci podręcznej, spowoduje to wyjątek WorkboxError.

Właściwości

  • konstruktor

    nieważne

    Tworzy nowe wystąpienie strategii i ustawia wszystkie udokumentowane opcje jako właściwości instancji publicznej.

    Uwaga: jeśli niestandardowa klasa strategii rozszerza podstawową klasę strategii i robi to nie potrzebuje więcej niż te właściwości, nie musi za pomocą konstruktora.

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

CacheOnly

Implementacja interfejsu tylko w pamięci podręcznej strategii żądania.

Te zajęcia są przydatne, jeśli chcesz poznać Wtyczki Workspace.

W przypadku braku dopasowania do pamięci podręcznej zostanie zgłoszony wyjątek WorkboxError.

Właściwości

  • konstruktor

    nieważne

    Tworzy nowe wystąpienie strategii i ustawia wszystkie udokumentowane opcje jako właściwości instancji publicznej.

    Uwaga: jeśli niestandardowa klasa strategii rozszerza podstawową klasę strategii i robi to nie potrzebuje więcej niż te właściwości, nie musi za pomocą konstruktora.

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

NetworkFirst

Implementacja Najpierw sieć strategii żądania.

Domyślnie ta strategia buforuje odpowiedzi z kodem stanu 200 jako i nieprzejrzyste odpowiedzi. Nieprzezroczyste odpowiedzi to żądania z innych domen, w których obsługuje CORS.

Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania do pamięci podręcznej, spowoduje to wyjątek WorkboxError.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

NetworkFirstOptions

Właściwości

  • cacheName

    ciąg znaków opcjonalny

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • networkTimeoutSeconds

    liczba opcjonalnie

  • wtyczki

    WorkboxPlugin[] – opcjonalna

NetworkOnly

Implementacja tylko sieć strategii żądania.

Te zajęcia są przydatne, jeśli chcesz poznać Wtyczki Workspace.

Jeśli żądanie sieciowe się nie powiedzie, spowoduje zgłoszenie wyjątku WorkboxError.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

NetworkOnlyOptions

Właściwości

  • fetchOptions

    RequestInit opcjonalnie

  • networkTimeoutSeconds

    liczba opcjonalnie

  • wtyczki

    WorkboxPlugin[] – opcjonalna

StaleWhileRevalidate

Implementacja nieaktualne w trakcie ponownej weryfikacji strategii żądania.

Żądania zasobów są wysyłane równolegle z pamięci podręcznej i z sieci. Strategia poda wersję z pamięci podręcznej, jeśli będzie dostępna. W przeciwnym razie i czekać na odpowiedź sieci. Pamięć podręczna jest aktualizowana na podstawie odpowiedzi sieci z każdym udanym żądaniem.

Domyślnie ta strategia buforuje odpowiedzi z kodem stanu 200 jako i nieprzejrzyste odpowiedzi. Nieprzezroczyste odpowiedzi to żądania z innych domen, w przypadku których nie występuje obsługuje CORS.

Jeśli żądanie sieciowe nie powiedzie się i nie ma dopasowania do pamięci podręcznej, spowoduje to wyjątek WorkboxError.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

Strategy

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

Właściwości

  • konstruktor

    nieważne

    Tworzy nowe wystąpienie strategii i ustawia wszystkie udokumentowane opcje jako właściwości instancji publicznej.

    Uwaga: jeśli niestandardowa klasa strategii rozszerza podstawową klasę strategii i robi to nie potrzebuje więcej niż te właściwości, nie musi za pomocą konstruktora.

    Funkcja constructor wygląda tak: 

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

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete wygląda tak: 

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

    • responseDone

      Promise&lt;Response&gt;

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse wygląda tak: 

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

    • moduł obsługi

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Promise&lt;Response&gt;

  • _handle

    nieważne

    Funkcja _handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • nick

    nieważne

    Wykonuje strategię dotyczącą żądań i zwraca wartość Promise, która zostanie znaleziona za pomocą Response, wywołując wszystkie odpowiednie wywołania zwrotne wtyczki.

    Gdy instancja strategii jest zarejestrowana w aplikacji Workbox workbox-routing.Route, ta metoda jest automatyczna gdy trasa się zmieści.

    Tej metody można też użyć w samodzielnym FetchEvent detektor, przekazując go do usługi event.respondWith().

    Funkcja handle wygląda tak: 

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

    • returns

      Promise&lt;Response&gt;

  • handleAll

    nieważne

    Podobne do workbox-strategies.Strategy~handle, ale zamiast zwracania wartości Promise, która przekształca się w Response zwróci krotkę [response, done] obietnic, gdzie poprzednia wartość (response) jest odpowiednikiem wartości zwracanej handle(), a ten drugi jest Obietnice, które zostaną spełnione, gdy zawarte w nich obietnice Kampania event.waitUntil() w ramach realizacji strategii została zrealizowana.

    Możesz poczekać z obietnicą done do wykonania dodatkowych czynności wykonywanych przez strategia (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 [odpowiedź, gotowa] obietnice, które można wykorzystać do określenia, kiedy odpowiedź staje się a także gdy moduł obsługi zakończy swoją pracę.

StrategyHandler

Klasa tworzona przy każdym wywołaniu instancji strategii workbox-strategies.Strategy~handle lub workbox-strategies.Strategy~handleAll, który obejmuje wszystkie operacje pobierania i buforowanie działań wokół wywołań zwrotnych wtyczki i śledzi, kiedy strategia „gotowe” (tzn. wszystkie dodane obietnice event.waitUntil() zostały rozwiązane).

Właściwości

  • konstruktor

    nieważne

    Tworzy nową instancję powiązaną z przekazaną strategią i zdarzeniem który obsługuje dany wniosek.

    Konstruktor inicjuje również stan, który będzie przekazywany do każdej ze o wtyczkach obsługujących to żądanie.

    Funkcja constructor wygląda tak: 

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

  • event

    ExtendableEvent

  • parametry

    dowolne opcjonalne

  • żądanie

    Żądanie

  • URL

    Adres URL opcjonalny

  • cacheMatch

    nieważne

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

    Przy użyciu tej metody wywoływane są te metody cyklu życia wtyczki:

    • cacheKeyWillByUsed()
    • cachedResponseWillByUsed()

    Funkcja cacheMatch wygląda tak: 

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

    • klucz

      RequestInfo

      Żądanie lub adres URL, które mają być używane jako klucz pamięci podręcznej.

    • returns

      Promise&lt;Response&gt;

      Znaleziono pasującą odpowiedź.

  • cachePut

    nieważne

    Umieszcza w pamięci podręcznej parę żądanie/odpowiedź (i wywołuje odpowiednie opcje) metod wywołania zwrotnego wtyczki) za pomocą metod cacheName i plugins zdefiniowanych na do obiektu strategii.

    Przy użyciu tej metody wywoływane są te metody cyklu życia wtyczki:

    • cacheKeyWillByUsed()
    • cacheWillUpdate()
    • cacheDidUpdate()

    Funkcja cachePut wygląda tak: 

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

    • klucz

      RequestInfo

      Żądanie lub adres URL używany jako klucz pamięci podręcznej.

    • odpowiedź

      Odpowiedź

      Odpowiedź do pamięci podręcznej.

    • returns

      Promise&lt;boolean&gt;

      false, jeśli odpowiedź została wywołana przez pamięć podręcznąWillUpdate nie mogą być przechowywane w pamięci podręcznej, a true w innym przypadku.

  • zniszczyć

    nieważne

    przerywa realizację strategii i natychmiast usuwa oczekujące waitUntil() – obietnice.

    Funkcja destroy wygląda tak: 

    () => {...}

  • doneWaiting

    nieważne

    Zwraca obietnicę do realizacji, gdy wszystkie obietnice przechodzą do workbox-strategies.StrategyHandler~waitUntil uzgodnili.

    Uwaga: wszelkie prace wykonane po rozliczeniu w doneWaiting() powinny być wykonywane ręcznie przekazywane do metody waitUntil() zdarzenia (nie do metody waitUntil()), w przeciwnym razie wątek service worker my zostanie zatrzymany przed ukończeniem pracy.

    Funkcja doneWaiting wygląda tak: 

    () => {...}

    • returns

      Obietnica<void>

  • pobrać

    nieważne

    Pobiera dane żądanie (i wywołuje odpowiednie wywołanie zwrotne wtyczki) ) za pomocą fetchOptions (dla żądań niedotyczących nawigacji) plugins zdefiniowano w obiekcie Strategy.

    Przy użyciu tej metody wywoływane są te 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

      Promise&lt;Response&gt;

  • fetchAndCachePut

    nieważne

    Wywołuje połączenie this.fetch() i (w tle) uruchamia this.cachePut() na odpowiedź wygenerowaną przez this.fetch().

    Wywołanie this.cachePut() powoduje automatyczne wywołanie this.waitUntil(), więc nie musisz ręcznie wywoływać adresu waitUntil() dla tego wydarzenia.

    Funkcja fetchAndCachePut wygląda tak: 

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

    • dane wejściowe

      RequestInfo

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

    • returns

      Promise&lt;Response&gt;

  • getCacheKey

    nieważne

    Sprawdza listę wtyczek dla wywołania zwrotnego cacheKeyWillBeUsed i wykonuje dowolne z tych wywołań zwrotnych występujących w sekwencji. Ostatnie Request obiekt zwrócony przez ostatnią wtyczkę jest traktowany jako klucz pamięci podręcznej dla pamięci podręcznej odczyty i/lub zapisy. Jeśli żadne wywołania zwrotne wtyczki cacheKeyWillBeUsed nie zawierają zostało zarejestrowane, przekazane żądanie jest zwracane jako niezmodyfikowane

    Funkcja getCacheKey wygląda tak: 

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

    • żądanie

      Żądanie

    • tryb

      "read"
       | "write"

    • returns

      Promise&lt;Request&gt;

  • hasCallback

    nieważne

    Zwraca wartość „prawda”, jeśli strategia ma co najmniej jedną wtyczkę z podaną oddzwanianie.

    Funkcja hasCallback wygląda tak: 

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

    • nazwa

      C

      Nazwa wywołania zwrotnego do sprawdzenia.

    • returns

      wartość logiczna

  • iterateCallbacks

    nieważne

    Akceptuje wywołanie zwrotne i zwraca iterację pasujących wywołań zwrotnych wtyczki, gdzie każde wywołanie zwrotne jest opakowane aktualnym stanem modułu obsługi (np. wywołujesz każde wywołanie zwrotne, każdy przekazywany parametr obiektu zostać scalone z bieżącym stanem wtyczki).

    Funkcja iterateCallbacks wygląda tak: 

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

    • nazwa

      C

      Nazwa wywołania zwrotnego do uruchomienia

    • returns

      Generator<NonNullable<indexedAccess>anyunknown>

  • runCallbacks

    nieważne

    Uruchamia wszystkie wywołania zwrotne wtyczki pasujące do podanej nazwy, przekazując w odpowiedniej kolejności danego parametru (scalono i bieżący stan wtyczki) jako jedynego .

    Uwaga: ta metoda uruchamia wszystkie wtyczki, więc nie sprawdza się w przypadkach w którym przed wywołaniem musi zostać zastosowana wartość zwrotna wywołania zwrotnego do następnego wywołania zwrotnego. Zobacz workbox-strategies.StrategyHandler#iterateCallbacks poniżej.

    Funkcja runCallbacks wygląda tak: 

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

    • nazwa

      C

      Nazwa wywołania zwrotnego do uruchomienia w każdej wtyczce.

    • parametr

      Pomiń<indexedAccess"state"
      >

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

    • returns

      Obietnica<void>

  • waitUntil

    nieważne

    Dodaje obietnicę [wydłuż obietnice bezterminowe]https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises zdarzenia powiązanego z przetwarzanym żądaniem (zwykle FetchEvent).

    Uwaga: możesz poczekać workbox-strategies.StrategyHandler~doneWaiting aby wiedzieć, kiedy wszystkie dodatkowe zobowiązania się spełnią.

    Funkcja waitUntil wygląda tak: 

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

    • obiekt typu Promise

      Obietnica<T>

      Obietnica dodania do przedłużenia obietnic dożywotnich zdarzenia, które wywołało żądanie.

    • returns

      Obietnica<T>

StrategyOptions

Właściwości

  • cacheName

    ciąg znaków opcjonalny

  • fetchOptions

    RequestInit opcjonalnie

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[] – opcjonalna