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

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)

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)

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ć

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

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.

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

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().

.

Uwaga: zapoznaj się ze źródłem implementacji zdarzenia StrategyHandler, aby zobaczyć wszystkie parametry akceptowane przez każde działanie

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

  • Opcje

    Opcjonalne StrategyOptions

  • returns

    CacheFirst

• 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<Response>

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    Opcjonalne StrategyOptions

  • returns

    CacheOnly

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    Opcjonalne NetworkFirstOptions

  • returns

    NetworkFirst

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    Opcjonalne NetworkOnlyOptions

  • returns

    NetworkOnly

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    Opcjonalne StrategyOptions

  • returns

    StaleWhileRevalidate

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    Opcjonalne StrategyOptions

  • returns

    Strategia

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

  • żądanie

    Żądanie

  • moduł obsługi

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • Opcje

    FetchEvent | HandlerCallbackOptions

    FetchEvent lub obiekt z atrybutem wymienionych poniżej.

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

  • strategia

    Strategia

  • Opcje

    HandlerCallbackOptions

  • returns

    StrategyHandler

• 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