przepisy-pocztówki

Na tyle powszechnych jest wiele wzorców, zwłaszcza związanych z rutowaniem i zapisywaniem w pamięci podręcznej, które można ustandaryzować w przepisy wielokrotnego użytku. workbox-recipes udostępnia je w łatwym w obsłudze pakiecie, co pozwala na szybkie rozpoczęcie korzystania z wysoce funkcjonalnego skryptu service worker.

Przepisy

Każdy przepis stanowi połączenie wielu modułów Workspace, tworząc powszechnie używane wzorce. Poniższe przepisy zawierają przepis, którego używasz w tym module, oraz odpowiedni wzór używany za pomocą przepisu (jeśli wolisz napisać go samodzielnie).

Kreacja zastępcza offline

Procedura zastępcza offline pozwala skryptowi service worker wyświetlić stronę internetową, obraz lub czcionkę, jeśli wystąpi błąd routingu w przypadku dowolnego z tych 3 elementów (np. jeśli użytkownik jest offline i nie wystąpiło żadne trafienie w pamięci podręcznej). W wersji 6.1.0 aplikacji Workbox Recipes usunięto wymóg zapisywania tych elementów w pamięci podręcznej za pomocą wywołania pamięci podręcznej. Aby zapewnić zgodność wsteczną, narzędzie najpierw będzie szukać elementów w pamięci podręcznej, a następnie wypróbować własną pamięć podręczną.

W tym przepisie domyślnie przyjęto założenie, że strona zastępcza to offline.html oraz że nie ma zastępczej zawartości obrazu ani czcionki. Listę wszystkich opcji konfiguracji znajdziesz w artykule o opcjach kreacji zastępczych offline.

Zastępcza offline jest stosowana tylko wtedy, gdy trasa pasuje do danego żądania. Jeśli używasz samego przepisu kreacji zastępczej offline, musisz samodzielnie utworzyć trasy. Najprostszym sposobem jest użycie metody setDefaultHandler() do utworzenia trasy, która będzie stosować strategię NetworkOnly do wszystkich żądań, jak pokazano poniżej. W przypadku innych przepisów, takich jak pamięć podręczna strony, statyczna pamięć podręczna zasobów czy pamięć podręczna obrazów, skonfiguruj trasy dla odpowiednich pamięci podręcznych. Parametr setDefaultHandler() nie jest wymagany, gdy używasz zarówno kreacji zastępczych offline, jak i jednego z tych przepisów.

Przepis

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

Wzór

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-fallbacks')
      .then(cache => cache.addAll(files))
  );
});

const handler = async options => {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFallback)) || Response.error();
  }

  if (dest === 'image' && imageFallback !== false) {
    return (await cache.match(imageFallback)) || Response.error();
  }

  if (dest === 'font' && fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

Pamięć podręczna strategii z wyprzedzeniem

Przepis dotyczący pamięci podręcznej strategii z wprowadzeniem umożliwia wczytywanie podanych adresów URL do pamięci podręcznej podczas fazy install skryptu service worker i buforowanie ich z wykorzystaniem opcji dostarczonej strategii. Możesz użyć tej opcji zamiast wstępnego zapisywania, jeśli znasz konkretne adresy URL, które chcesz zapisać w pamięci podręcznej, chcesz rozgrzać pamięć podręczną trasy, lub w innych miejscach, w których adresy URL mają być buforowane podczas instalacji.

Listę wszystkich opcji konfiguracji znajdziesz w sekcji Opcje pamięci podręcznej strategii ciepłownych.

Przepis

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

warmStrategyCache({urls, strategy});

Wzór

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

Pamięć podręczna stron

Przepis z pamięci podręcznej strony umożliwia skryptowi service worker w odpowiedzi na żądanie strony HTML (przez nawigację po adresie URL) przy użyciu strategii buforowania najpierw sieci, optymalizowanej pod kątem szybkości działania kreacji zastępczej z pamięci podręcznej, która pozwala na uzyskanie największego wyrenderowania treści poniżej 4, 0 sekundy.

W tym przepisie domyślnie przyjmuje się, że limit czasu sieci powinien wynosić 3 sekundy, i obsługuje on ocieplanie pamięci podręcznej za pomocą opcji warmCache. Listę wszystkich opcji konfiguracji znajdziesz na stronie opcji pamięci podręcznej stron.

Przepis

import {pageCache} from 'workbox-recipes';

pageCache();

Wzór

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cacheName = 'pages';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Pamięć podręczna zasobów statycznych

Przepis na zasoby statyczne w pamięci podręcznej pozwala skryptowi service worker odpowiadać na żądania dotyczące zasobów statycznych, w szczególności żądań CSS, JavaScriptu i Web Worker, przy użyciu strategii buforowania stale-pending-revalidate (nieaktualna w trakcie ponownej weryfikacji), która umożliwia szybkie wyświetlenie tych zasobów z pamięci podręcznej i ich aktualizowanie w tle.

Ten przepis obsługuje ocieplenie pamięci podręcznej za pomocą opcji warmCache. Listę wszystkich opcji konfiguracji znajdziesz na stronie opcji pamięci podręcznej zasobów statycznych.

Przepis

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Wzór

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

const cacheName = 'static-resources';
const matchCallback = ({request}) =>
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Pamięć podręczna obrazów

Przepis na pamięć podręczną obrazów pozwala skryptowi service worker odpowiadać na żądanie obrazów przy użyciu strategii buforowania przedstawiającej pamięć podręczną. Dzięki temu, gdy obrazy są dostępne w pamięci podręcznej, użytkownik nie musi już wysyłać do nich kolejnych żądań.

Ten przepis domyślnie przechowuje w pamięci podręcznej maksymalnie 60 obrazów, każdy na 30 dni, i obsługuje ocieplanie pamięci podręcznej za pomocą opcji warmCache. Listę wszystkich opcji konfiguracji znajdziesz na stronie z opcjami pamięci podręcznej obrazów.

Przepis

import {imageCache} from 'workbox-recipes';

imageCache();

Wzór

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const cacheName = 'images';
const matchCallback = ({request}) => request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

Pamięć podręczna Google Fonts

Przepis Google Fonts zapisuje w pamięci podręcznej 2 części żądania Google Fonts:

• Arkusz stylów z definicjami (@font-face) zawierającymi linki do plików czcionek.
• Statyczne, poprawione pliki czcionek.

Arkusz stylów może się często zmieniać, dlatego używana jest strategia buforowania stale-pending-revalidate (nieaktualna w trakcie ponownej weryfikacji). Z kolei same pliki czcionek nie zmieniają się i mogą korzystać ze strategii pierwszej w pamięci podręcznej.

Ten przepis domyślnie przechowuje w pamięci podręcznej maksymalnie 30 plików czcionek, każdy na rok. Listę wszystkich opcji konfiguracji znajdziesz w sekcji Opcje pamięci podręcznej Google Fonts.

Przepis

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Wzór

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 * 365;
const maxEntries = 30;

registerRoute(
  ({url}) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

Szybkie korzystanie

Połączenie wszystkich przepisów powoduje utworzenie skryptu service worker, który odpowiada na żądania stron za pomocą strategii buforowania najpierw sieci, odpowiada na żądania CSS, JavaScript i Web Worker przy użyciu strategii stałej w czasie ponownej weryfikacji, odpowiada na żądania grafiki najpierw z pamięci podręcznej, poprawnie buforuje czcionki Google Fonts i udostępnia zastępczą konfigurację offline w przypadku żądań stron. Można to zrobić za pomocą następujących funkcji:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
)

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
)

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
)

workbox-recipes.pageCache(
  options?: PageCacheOptions,
)

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
)

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)