routing skrzynki roboczej

Skrypt service worker może przechwytywać żądania sieciowe dotyczące strony. Może zareagować na przeglądarka z treścią w pamięci podręcznej, treściami z sieci lub wygenerowanymi treściami; w mechanizmie Service Worker.

workbox-routing to moduł, który ułatwia kierowanie te prośby do za pomocą różnych funkcji przynoszących odpowiedzi.

Jak jest wykonywane kierowanie

Gdy żądanie sieciowe powoduje zdarzenie pobierania skryptu service worker, workbox-routing spróbuje odpowiedzieć na żądanie przy użyciu podanych tras i modułów obsługi.

Najważniejsze kwestie, o których należy pamiętać powyżej:

• Metoda żądania jest ważna. Domyślnie trasy są rejestrowane dla GET próśb. Aby przechwytywać żądania innych typów, aby określić metodę.

• Kolejność rejestracji trasy ma znaczenie. Jeśli wiele tras która może obsłużyć żądanie, trasa rejestrowana jako pierwsza posłuży do udzielenia odpowiedzi na to żądanie.

Trasę można zarejestrować na kilka sposobów: można użyć wywołań zwrotnych, wyrażeń lub instancji trasy.

Dopasowywanie i obsługa w trasach

„Trasa” w obszarze roboczym są tylko 2 funkcje: „dopasowanie”, funkcja aby określić, czy trasa powinna pasować do żądań i „obsługi” funkcji, który powinien obsłużyć żądanie i odpowiedzieć na nie.

Workbox ma kilka asystentów, które pomogą Ci w dopasowywaniu i obsłudze ale jeśli uznasz, że chcesz działać inaczej, napisz jest najlepszą opcją.

O dopasuj funkcję wywołania zwrotnego jest zaliczany do ExtendableEvent, Request oraz URL obiekt, który można przez zwrócenie wartości rzeczywistej. Dla prostego przykładu można znaleźć dopasowanie do słowa kluczowego konkretnego adresu URL, np.:

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

Większość przypadków użycia można uwzględnić, sprawdzając lub testując url albo request

O funkcja wywołania zwrotnego obsługi otrzyma taką samą wartość ExtendableEvent, Request oraz URL obiekt wraz z wartość params, która jest wartością zwracaną przez „dopasowanie” .

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

Twój moduł obsługi musi zwracać obietnicę zwracającą się do Response. W tym korzystamy na przykład z funkcji async i await. Wewnętrzna wartość zwracanego parametru Response jest związana z obietnicą.

Możesz zarejestrować takie wywołania zwrotne:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

Jedynym ograniczeniem jest to, że wywołanie zwrotne musi synchronicznie zwracać wartość prawda nie może wykonywać żadnych działań asynchronicznych. Powodem jest to, Router musi synchronicznie odpowiadać na zdarzenie pobierania lub zezwalać na spadające a także innych zdarzeń pobierania.

Normalnie „obsługa” wywołanie zwrotne użyje jednej z podanych strategii według takich strategii:

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

registerRoute(matchCb, new StaleWhileRevalidate());

Na tej stronie skoncentrujemy się na workbox-routing, ale możesz dowiedz się więcej o tych strategiach w strategiach pól roboczych.

Jak zarejestrować trasę wyrażenia regularnego

Zwykle używa się wyrażenia regularnego zamiast słowa „match” oddzwanianie. Dzięki Workbox możesz łatwo wdrożyć tę funkcję:

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

W przypadku żądań z to samo miejsce, wyrażenie regularne będzie pasować, jeśli adres URL żądania pasuje do wyrażenie regularne.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

Jednak w przypadku żądań z innych domen wyrażenia regularne muszą być zgodne z początkiem adresu URL. Powodem jest to, mało prawdopodobne, że z wyrażeniem regularnym new RegExp('/styles/.*\\.css') które mają pasować do plików CSS innych firm.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Jeśli zależy Ci na takim działaniu, sprawdź, czy pasuje do początku adresu URL. Gdybyśmy chcieli dopasować żądań dla https://cdn.third-party-site.com, możemy użyć zwykłego wyrażenie new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css').

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Jeśli chcesz dopasować zarówno lokalne, jak i zewnętrzne, możesz użyć symbolu wieloznacznego na początku wyrażenia regularnego, ale należy to robić z rozwagą. aby zapobiec nieoczekiwanym działaniom w Twojej aplikacji internetowej.

Jak zarejestrować trasę nawigacji

Jeśli Twoja witryna to aplikacja jednostronicowa, możesz użyć NavigationRoute do zwrócenie konkretnej odpowiedzi dla wszystkich żądania nawigacji.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

Gdy użytkownik otworzy witrynę w przeglądarce, żądanie wyświetlenia strony będzie będzie żądaniem nawigacji, a zostanie ono wyświetlone w pamięci podręcznej strony /app-shell.html. (Uwaga: strona powinna być zapisana w pamięci podręcznej przez workbox-precaching lub własny etap instalacji).

Domyślnie spowoduje to odpowiadanie na wszystkie prośby o nawigację. Jeśli chcesz i ograniczyć działanie go do podzbioru adresów URL, możesz użyć funkcji allowlist i denylist, by ograniczyć strony pasujące do tej trasy.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

Warto pamiętać, że tag denylist wygrywa, jeśli adres URL znajduje się w obu miejscach. allowlist i denylist.

Ustaw domyślny moduł obsługi

Jeśli chcesz udostępnić „moduł obsługi”, w przypadku żądań, które nie pasują do trasy, można ustawić domyślny moduł obsługi.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

Ustaw moduł obsługi wyjątków

Jeśli któraś z tras powoduje błąd, możesz przechwytywać bez utraty płynności, ustawiając tag obsługi typu catch.

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

Definiowanie trasy dla żądań innych niż GET

Domyślnie wszystkie trasy są uznawane za wszystkie żądania typu GET.

Jeśli chcesz przekierować inne żądania, np. POST, potrzebujesz , aby zdefiniować metodę przy rejestrowaniu trasy, na przykład:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

Logowanie routera

Możesz określić przepływ żądania na podstawie logów z workbox-routing z informacją, które adresy URL są przetwarzane za pomocą Workbox.

Jeśli potrzebujesz bardziej szczegółowych informacji, możesz ustawić poziom rejestrowania na debug wyświetlania logów dotyczących żądań, które nie są obsługiwane przez router. Zapoznaj się z naszą przewodnika debugowania. i ustawić poziom rejestrowania.

Zaawansowane

Jeśli chcesz mieć większą kontrolę nad tym, kiedy jest udostępniany router Workbox żądań, możesz tworzyć własne Wystąpienie Router i wywołanie jest handleRequest() , gdy chcesz używać routera do odpowiadania na żądania.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

Korzystając bezpośrednio z narzędzia Router, musisz też użyć klasy Route, lub dowolnej z klas wydłużających czas do zarejestrowania tras.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string | RegExp | RouteMatchCallback | Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)