tworzenie buforowania w polu roboczym

Jedną z funkcji usług działających w tle jest możliwość zapisania zestawu plików w pamięci podręcznej podczas instalowania. Jest to często nazywane „przedwczesnym buforowaniem”, ponieważ buforujesz treści przed użyciem skryptu service worker.

Głównym powodem jest to, że daje deweloperom kontrolę nad pamięcią podręczną. Oznacza to, że mogą oni określać, kiedy i jak długo plik jest przechowywany w pamięci podręcznej, a także udostępniać go w przeglądarce bez łączenia się z internetem. Dzięki temu można tworzyć aplikacje internetowe, które działają w trybie offline.

Workbox znacznie ułatwia wstępne buforowanie, ponieważ upraszcza interfejs API i zapewnia efektywne pobieranie zasobów.

Jak działa wstępny bufor danych workbox

Gdy aplikacja internetowa zostanie załadowana po raz pierwszy, workbox-precaching sprawdzi wszystkie zasoby, które chcesz pobrać, usunie duplikaty i połączy odpowiednie zdarzenia usługi workera z pobieraniem i przechowywaniem zasobów. Adresy URL, które już zawierają informacje o wersjach (np. skrót treści), są używane jako klucze pamięci podręcznej bez dalszej modyfikacji. Adresy URL, które nie zawierają informacji o wersji, mają dodatkowy parametr zapytania URL dołączony do klucza pamięci podręcznej, który reprezentuje ciąg znaków treści wygenerowany przez Workbox w momencie kompilacji.

workbox-precaching robi to wszystko podczas install wydarzenia usługi.

Gdy użytkownik ponownie otworzy Twoją aplikację internetową, a Ty będziesz mieć nowego pracownika serwisowego z innymi zasobami w pamięci podręcznej, workbox-precaching sprawdzi nową listę i określi, które zasoby są zupełnie nowe, a które z dotychczasowych zasobów wymagają aktualizacji. Wszystkie nowe zasoby lub aktualizacje wersji zostaną dodane do pamięci podręcznej podczas zdarzenia install nowego serwisu workera.

Ten nowy serwis worker nie będzie odpowiadać na żądania, dopóki nie zostanie wywołane zdarzenie activate. W przypadku zdarzenia activate usługa workbox-precaching sprawdzi, czy w pamięci podręcznej nie ma zasobów, których nie ma już na liście obecnych adresów URL, i usunie je z niej.

workbox-precaching wykona te czynności za każdym razem, gdy usługa zostanie zainstalowana i aktywowana, aby zapewnić użytkownikowi najnowsze zasoby i pobrać tylko pliki, które uległy zmianie.

Wyświetlanie odpowiedzi z wykorzystaniem wcześniejszego buforowania

Wywołanie funkcji precacheAndRoute() lub addRoute() spowoduje utworzenie trasy, która pasuje do żądań adresów URL z wykorzystaniem wcześniejszego buforowania.

Strategia odpowiedzi używana na tej ścieżce to najpierw pamięć podręczna: będzie używana odpowiedź z pamięci podręcznej, chyba że nie będzie ona dostępna (z powodu nieoczekiwanego błędu). W takim przypadku zostanie użyta odpowiedź z sieci.

Ważna jest kolejność, w jakiej wywołujesz precacheAndRoute() lub addRoute(). Zazwyczaj należy wywołać go na początku pliku usługi, zanim zarejestrujesz dodatkowe trasy za pomocą funkcji registerRoute(). Jeśli najpierw wywołasz funkcję registerRoute(), a ta trasa pasuje do przychodzącego żądania, do odpowiedzi zostanie użyta strategia zdefiniowana w tej dodatkowej trasie, a nie strategia „najpierw pamięć podręczna” używana przez funkcję registerRoute().workbox-precaching

Wyjaśnienie dotyczące listy do pamięci podręcznej

Parametr workbox-precaching oczekuje tablicy obiektów z właściwością url i revision. Ten tablica jest czasami nazywana plikiem z zawartością do wcześniejszego buforowania:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Ta lista zawiera zestaw adresów URL, z których każdy zawiera informacje o „poprawkach”.

W przypadku drugiego i trzeciego obiektu w przykładzie powyżej właściwość revision jest ustawiona na null. Dzieje się tak, ponieważ informacje o rewizji znajdują się w samym adresie URL, co jest ogólnie sprawdzoną metodą w przypadku zasobów statycznych.

Pierwszy obiekt (/index.html) jawnie ustawia właściwość rewizji, która jest automatycznie wygenerowanym hashem zawartości pliku. W odróżnieniu od zasobów JavaScript i CSS pliki HTML zwykle nie mogą zawierać informacji o wersji w swoich adresach URL, ponieważ w przeciwnym razie linki do tych plików w internecie przestawałyby działać, gdy tylko zmieniłaby się treść strony.

Przekazując właściwość wersji do precacheAndRoute(), Workbox może wiedzieć, kiedy plik się zmienił, i odpowiednio go zaktualizować.

Workbox zawiera narzędzia, które ułatwiają wygenerowanie tej listy:

  • workbox-build: to pakiet node, który można użyć w zbieraniu gulp lub jako skryptu npm run.
  • workbox-webpack-plugin: użytkownicy webpack mogą używać tej wtyczki.
  • workbox-cli: naszego interfejsu wiersza poleceń można też używać do generowania listy zasobów i dodawania ich do Twojego pracownika usługi.

Przychodzące prośby o pliki z pamięci podręcznej

Jedną z funkcji, które workbox-precaching wykonuje domyślnie, jest manipulowanie przychodzącymi żądaniami sieciowymi w celu dopasowania wcześniej wyprzedzającego buforowanie plików. Jest to zgodne ze zwyczajami w internecie.

Na przykład żądanie / może być zaspokojone przez plik o adresie /index.html.

Poniżej znajduje się lista manipulacji, które workbox-precaching wykonuje domyślnie, oraz sposób ich modyfikowania.

Ignorowanie parametrów adresu URL

Żądania z parametrami wyszukiwania można modyfikować, aby usunąć określone wartości lub wszystkie wartości.

Domyślnie parametry wyszukiwania, które zaczynają się od utm_ lub są identyczne z fbclid, są usuwane. Oznacza to, że żądanie dotyczące /about.html?utm_campaign=abcd zostanie spełnione za pomocą wcześniej zapisanego w pamięci podręcznej wpisu /about.html.

Możesz zignorować inny zestaw parametrów wyszukiwania, używając ignoreURLParametersMatching:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Indeks katalogu

Domyślnie żądania zakończone oznaczeniem / będą dopasowywane do wpisów z dołączonym oznaczeniem index.html. Oznacza to, że przychodzące żądanie dotyczące / może być automatycznie obsługiwane za pomocą wcześniej przechowywanego elementu /index.html.

Możesz zmienić to ustawienie na inne lub całkowicie je wyłączyć, ustawiając directoryIndex:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

Czyste adresy URL

Jeśli żądanie nie pasuje do wcześniejszego buforowania, dodamy na końcu .html, aby obsługiwać „czyste” adresy URL (czyli „ładne” adresy URL). Oznacza to, że żądanie /about zostanie obsłużone przez wcześniej zcache'owany wpis /about.html.

Możesz wyłączyć to zachowanie, ustawiając cleanUrls:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Manipulacja niestandardowa

Jeśli chcesz zdefiniować niestandardowe dopasowania z przychodzących żądań do zasobów z cache'em, możesz to zrobić za pomocą opcji urlManipulation. Powinien to być wywołanie zwrotne zwracające tablicę możliwych dopasowań.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Zaawansowane użycie

Bezpośrednie korzystanie z klasy PrecacheController

Domyślnie usługa workbox-precaching skonfiguruje dla Ciebie odbiorców install i activate. Jeśli potrzebujesz większej kontroli, może to nie być pożądane dla deweloperów znających skrypty service worker.

Zamiast eksportu domyślnego możesz użyć bezpośrednio pliku PrecacheController, aby dodać elementy do wstępnego buforowania, określić, kiedy mają zostać zainstalowane te zasoby, oraz kiedy ma nastąpić czyszczenie.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Bezpośrednie odczytywanie zasobów z buforu podręcznego

Czasami może być konieczne odczytanie zasobów z cache'u bezpośrednio, poza kontekstem routingu, który workbox-precaching może wykonać automatycznie. Możesz na przykład wstępnie przechowywać częściowe szablony HTML, które następnie trzeba będzie pobrać i użyć podczas tworzenia pełnej odpowiedzi.

Ogólnie możesz używać interfejsu Cache Storage API do uzyskiwania obiektów Response z zapamiętanym wcześniej buforem, ale jest tu pewien problem: klucza pamięci podręcznej URL, którego należy używać podczas wywoływania interfejsu cache.match(), może zawierać parametr wersji, który workbox-precaching automatycznie tworzy i utrzymuje.

Aby uzyskać prawidłowy klucz pamięci podręcznej, możesz wywołać funkcję getCacheKeyForURL(), podając w niej oryginalny adres URL, a potem użyć wyniku do wykonania funkcji cache.match() na odpowiedniej pamięci podręcznej.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

Jeśli potrzebujesz tylko obiektu Response z cache'u, możesz wywołać funkcję matchPrecache(), która automatycznie użyje odpowiedniego klucza pamięci podręcznej i przeszuka odpowiednią pamięć podręczną:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Usuwanie starych pamięci podręcznych

Większość wersji Workbox używa tego samego formatu do przechowywania danych w pamięci podręcznej. Pamięć podręczna utworzona przez starsze wersje Workbox może być zwykle używana w nowszych wersjach. Rzadko zdarza się jednak, aby w przypadku pamięci podręcznej nastąpiła istotna zmiana, która wymagałaby od dotychczasowych użytkowników ponownego pobrania wszystkich danych. W takim przypadku wcześniej zapisane dane staną się nieaktualne. (ta zmiana nastąpiła między wersjami Workbox 3 i 4).

Te nieaktualne dane nie powinny zakłócać normalnej pracy, ale przyczyniają się do wykorzystania limitu miejsca na dane. Może być też wygodniej dla użytkowników, jeśli usuniesz je ręcznie. Aby to zrobić, dodaj cleanupOutdatedCaches() do skryptu service worker lub ustaw cleanupOutdatedCaches: true, jeśli używasz jednego z narzędzi Workbox do generowania skryptu service worker.

Korzystanie z integralności zasobów podrzędnych

Niektórzy deweloperzy mogą chcieć dodatkowych gwarancji oferowanych przez sprawdzanie integralności zasobów podrzędnych podczas pobierania z sieci adresów URL z pamięci podręcznej.

Do dowolnego wpisu w pliku manifestu domyślnego można dodać dodatkową, opcjonalną właściwość o nazwie integrity. Jeśli podasz tę wartość, zostanie ona użyta jako wartość integrity podczas tworzenia Request służącego do wypełniania pamięci podręcznej. Jeśli wystąpi niezgodność, proces wstępnego buforowania nie powiedzie się.

Określanie, które wpisy w pliku manifestu pre-cache powinny mieć właściwości integrity, oraz ustalanie odpowiednich wartości wykracza poza zakres narzędzi do kompilacji Workboxa. Zamiast tego deweloperzy, którzy chcą korzystać z tej funkcji, powinni zmodyfikować generowany przez Workbox manifest wstępnego buforowania, aby samodzielnie dodać odpowiednie informacje. Opcja manifestTransform w konfiguracji narzędzi do kompilacji Workbox:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

Typy

CleanupResult

Właściwości

  • deletedCacheRequests

    string[]

InstallResult

Właściwości

  • notUpdatedURLs

    string[]

  • updatedURLs

    string[]

PrecacheController

Wykonuje wydajne wstępne buforowanie zasobów.

Właściwości

  • konstruktor

    nieważne

    Utwórz nowy obiekt PrecacheController.

    Funkcja constructor ma postać:

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

    • Opcje

      PrecacheControllerOptions opcjonalny

  • strategia

    Strategia

  • aktywuj

    nieważne

    usuwa zasoby, których nie ma już w bieżącym pliku manifestu do wstępnego buforowania. Wywołuj tę metodę z zdarzenia aktywacji usługi.

    Uwaga: ta metoda wywołuje funkcję event.waitUntil(), więc nie musisz jej wywoływać samodzielnie w obsługach zdarzeń.

    Funkcja activate ma postać:

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • addToCacheList

    nieważne

    Ta metoda spowoduje dodanie elementów do listy wstępnie zapisanych danych, usunięcie duplikatów i sprawdzenie poprawności informacji.

    Funkcja addToCacheList ma postać:

    (entries: (string | PrecacheEntry)[]) => {...}

    • wpisy

      (ciąg | PrecacheEntry)[]

      Tablica wpisów do wstępnego zapisania do pamięci.

  • createHandlerBoundToURL

    nieważne

    Zwraca funkcję, która wyszukuje url w precache (biorąc pod uwagę informacje o wersji) i zwraca odpowiadający Response.

    Funkcja createHandlerBoundToURL ma postać:

    (url: string) => {...}

    • URL

      ciąg znaków

      Zasadniczo z wykorzystaniem zasobów podręcznych adres URL, który posłuży do wyszukiwaniaResponse.

  • getCacheKeyForURL

    nieważne

    Zwraca klucz pamięci podręcznej używany do przechowywania danego adresu URL. Jeśli adres URL jest w wersji nieopublikowanej, np. „/index.html”, kluczem pamięci podręcznej będzie oryginalny adres URL z dołączonym parametrem wyszukiwania.

    Funkcja getCacheKeyForURL ma postać:

    (url: string) => {...}

    • URL

      ciąg znaków

      Adres URL, którego klucz pamięci podręcznej chcesz sprawdzić.

    • returns

      ciąg znaków

      Adres URL z wersją, który odpowiada kluczowi pamięci podręcznej dla pierwotnego adresu URL, lub nieokreślony, jeśli ten adres URL nie jest wstępnie przechowywany w pamięci podręcznej.

  • getCachedURLs

    nieważne

    Zwraca listę wszystkich adresów URL, które zostały wstępnie zapisane w pamięci podręcznej przez bieżącego pracownika obsługi.

    Funkcja getCachedURLs ma postać:

    () => {...}

    • returns

      string[]

      Adresy URL z wstępnie zapisanymi w pamięci.

  • getIntegrityForCacheKey

    nieważne

    Funkcja getIntegrityForCacheKey ma postać:

    (cacheKey: string) => {...}

    • cacheKey

      ciąg znaków

    • returns

      ciąg znaków

      Integralność zasobu podrzędnego powiązanego z kluczem pamięci podręcznej lub nieokreślona, jeśli nie jest ustawiona.

  • getURLsToCacheKeys

    nieważne

    Zwraca mapowanie adresu URL z zapamiętanej w pamięci podręcznej wersji do odpowiedniego klucza pamięci podręcznej, biorąc pod uwagę informacje o wersji adresu URL.

    Funkcja getURLsToCacheKeys ma postać:

    () => {...}

    • returns

      Map<stringstring>

      Adres URL mapowania kluczy pamięci podręcznej.

  • Zainstaluj

    nieważne

    Wstępnie buforuje nowe i zaktualizowane zasoby. Wywołuj tę metodę z zdarzenia instalacji usługi.

    Uwaga: ta metoda wywołuje funkcję event.waitUntil(), więc nie musisz jej wywoływać samodzielnie w obsługach zdarzeń.

    Funkcja install ma postać:

    (event: ExtendableEvent) => {...}

    • event

      ExtendableEvent

  • matchPrecache

    nieważne

    Jest to zamiennik funkcji cache.match(), który różni się od niej w następujący sposób:

    • Zna on nazwę pamięci podręcznej i sprawdza tylko tę pamięć.
    • Umożliwia ono przekazanie „oryginalnego” adresu URL bez parametrów wersji, a następnie automatyczne wyszukiwanie prawidłowego klucza pamięci podręcznej dla bieżącej wersji tego adresu URL.

    Np. matchPrecache('index.html') znajdzie prawidłową odpowiedź z poziomu pamięci podręcznej dla obecnie aktywnego workera usługi, nawet jeśli rzeczywisty klucz pamięci podręcznej to '/index.html?__WB_REVISION__=1234abcd'.

    Funkcja matchPrecache ma postać:

    (request: string | Request) => {...}

    • żądanie

      ciąg znaków | Request

      Klucz (bez parametrów rewizji) do sprawdzenia w pamięci podręcznej.

    • returns

      Obietnice<Odpowiedź>

  • pamięć podręczna

    nieważne

    Dodaje elementy do listy wstępnie zapisanych danych, usuwając duplikaty, i zapisuje pliki w pamięci podręcznej, gdy usługa workera jest instalowana.

    Metodę tę można wywołać wielokrotnie.

    Funkcja precache ma postać:

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

Właściwości

  • integralność

    string opcjonalny

  • wersja

    string opcjonalny

  • URL

    ciąg znaków

PrecacheFallbackPlugin

PrecacheFallbackPlugin umożliwia określenie odpowiedzi „awaryjnej” na potrzeby offline, która będzie używana, gdy dana strategia nie będzie w stanie wygenerować odpowiedzi.

Robi to, przechwytując wywołanie zwrotne wtyczki handlerDidError i zwracając wcześniej z pamięci podręcznej odpowiedź, automatycznie uwzględniając parametr oczekiwanej poprawki.

Jeśli nie przekazujesz konstruktorowi instancji PrecacheController, używana jest instancja domyślna. Ogólnie rzecz biorąc, większość programistów będzie używać ustawień domyślnych.

Właściwości

  • konstruktor

    nieważne

    Tworzy nowy PrecacheFallbackPlugin z powiązanym adresem fallbackURL.

    Funkcja constructor ma postać:

    (config: object) => {...}

    • konfiguracja

      Obiekt

      • fallbackURL

        ciąg znaków

        Adres URL z cachem do użycia jako adres awaryjny, jeśli powiązana strategia nie może wygenerować odpowiedzi.

      • precacheController

        PrecacheController opcjonalny

PrecacheRoute

Podklasa workbox-routing.Route, która przyjmuje instancję workbox-precaching.PrecacheController i używa jej do dopasowywania przychodzących żądań oraz obsługi pobierania odpowiedzi z precache.

Właściwości

PrecacheRouteOptions

Właściwości

  • cleanURLs

    wartość logiczna opcjonalna

  • directoryIndex

    string opcjonalny

  • ignoreURLParametersMatching

    RegExp[] opcjonalny

  • urlManipulation

    urlManipulation opcjonalnie

PrecacheStrategy

Implementacja workbox-strategies.Strategy, która została specjalnie zaprojektowana do współpracy z workbox-precaching.PrecacheController, aby buforować i pobierać zasobów z buforem.

Uwaga: instancja tej klasy jest tworzona automatycznie podczas tworzenia PrecacheController. Zazwyczaj nie trzeba jej tworzyć samodzielnie.

Właściwości

  • konstruktor

    nieważne

    Funkcja constructor ma postać:

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

    • Opcje

      PrecacheStrategyOptions opcjonalne

  • cacheName

    ciąg znaków

  • fetchOptions

    RequestInit opcjonalny

  • matchOptions

    CacheQueryOptions opcjonalnie

  • wtyczki

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    nieważne

    Funkcja _awaitComplete ma postać:

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

    • responseDone

      Obietnice<Odpowiedź>

    • handler

      StrategyHandler

    • żądanie

      Żądanie

    • event

      ExtendableEvent

    • returns

      Obietnica<void>

  • _getResponse

    nieważne

    Funkcja _getResponse ma postać:

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

    • returns

      Obietnice<Odpowiedź>

  • _handleFetch

    nieważne

    Funkcja _handleFetch ma postać:

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

    • returns

      Obietnice<Odpowiedź>

  • _handleInstall

    nieważne

    Funkcja _handleInstall ma postać:

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

    • returns

      Obietnice<Odpowiedź>

  • nick

    nieważne

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

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

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

    Funkcja handle ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

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

    • returns

      Obietnice<Odpowiedź>

  • handleAll

    nieważne

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

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

    Funkcja handleAll ma postać:

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

    • Opcje

      FetchEvent | HandlerCallbackOptions

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

    • returns

      [Promise<Response>, Promise<void>]

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

urlManipulation()

workbox-precaching.urlManipulation(
  { url }: object,
)

Typ

funkcja

Parametry

  • { url }

    Obiekt

    • URL

      URL

Zwroty

  • URL[]

Metody

addPlugins()

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

Dodaje wtyczki do strategii wstępnego buforowania.

Parametry

addRoute()

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

Dodaj do skryptu service worker listenera fetch, który będzie odpowiadać na fetchhttps://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requestsz zasobami wstępnie zapisanymi w pamięci podręcznej.

Na żądania dotyczące zasobów, które nie zostały wcześniej zapisane w pamięci podręcznej, FetchEvent nie będzie odpowiadać, co pozwoli na przekazanie zdarzenia innym odbiorcom zdarzenia fetch.

Parametry

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Dodaje detektor zdarzeń activate, który usunie niekompatybilne pamięci podręczne utworzone przez starsze wersje Workbox.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Funkcja pomocnicza, która wywołuje PrecacheController#createHandlerBoundToURL w domyślnej instancji PrecacheController.

Jeśli tworzysz własną funkcję PrecacheController, wywołaj ją w tym przypadku, zamiast używać tej funkcji.PrecacheController#createHandlerBoundToURL

Parametry

  • URL

    ciąg znaków

    Zasadniczo z wykorzystaniem zaimplementowanego w pamięci podręcznej adresu URL, który posłuży do wyszukiwaniaResponse.

Zwroty

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Odbiera adres URL i zwraca odpowiadający mu adres URL, który można wykorzystać do wyszukiwania wpisu w precache.

Jeśli podany zostanie adres URL bezwzględny, jako podstawa zostanie użyta lokalizacja pliku usługi.

W przypadku wpisów z zapamiętaną zawartością bez informacji o wersji klucz pamięci podręcznej będzie taki sam jak pierwotny adres URL.

W przypadku wpisów z wstępnie zcacheowanych informacjami o rewizji kluczem pamięci podręcznej będzie oryginalny adres URL z dodatkowym parametrem zapytania służącym do śledzenia informacji o rewizji.

Parametry

  • URL

    ciąg znaków

    Adres URL, którego klucza pamięci podręcznej chcesz sprawdzić.

Zwroty

  • ciąg tekstowy | nieokreślony

    Klucz pamięci podręcznej odpowiadający temu adresowi URL.

matchPrecache()

workbox-precaching.matchPrecache(
  request: string | Request,
)

Funkcja pomocnicza, która wywołuje funkcję PrecacheController#matchPrecache w domyślnej instancji PrecacheController.

Jeśli tworzysz własną funkcję PrecacheController, wywołaj ją w tym przypadku, zamiast używać tej funkcji.PrecacheController#matchPrecache

Parametry

  • żądanie

    ciąg znaków | Request

    Klucz (bez parametrów rewizji) do sprawdzenia w pamięci podręcznej.

Zwroty

  • Obietnica<odpowiedź | nieokreślony>

precache()

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

Dodaje elementy do listy wstępnie zapisanych danych, usuwając duplikaty, i zapisuje pliki w pamięci podręcznej podczas instalacji usługi.

Metodę tę można wywołać wielokrotnie.

Uwaga: ta metoda nie będzie udostępniać żadnych plików z pamięci podręcznej. Wystarczy tylko wstępnie załadować pliki. Aby odpowiedzieć na prośbę sieci, zadzwoń: workbox-precaching.addRoute.

Jeśli masz pojedynczy tablica plików do wstępnego zapisania, możesz po prostu wywołać funkcję workbox-precaching.precacheAndRoute.

Parametry

precacheAndRoute()

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)

Ta metoda doda wpisy do listy wstępnie zapisanych danych i doda trasę do obsługi zdarzeń pobierania.

Jest to wygodna metoda, która wywołuje metody workbox-precaching.precache i workbox-precaching.addRoute w jednym wywołaniu.

Parametry