przepisy-pocztówki

Wiele typowych wzorców, zwłaszcza związanych z routingiem i buforowaniem, jest na tyle powszechnych, że można je przekształcić w przepisy wielokrotnego użytku. workbox-recipes udostępnia je w łatwym w użyciu pakiecie, dzięki czemu możesz szybko zacząć korzystać z wysokiej jakości usługi.

Przepisy

Każda receptura łączy ze sobą pewną liczbę modułów Workbox, łącząc je w często używane wzorce. W pokazywanych poniżej recepturach znajdziesz recepturę, której używasz w tym module, oraz odpowiedni wzorzec, który jest używany w tle, jeśli chcesz napisać go samodzielnie.

tryb awaryjny offline,

Receptura zapasowa offline umożliwia usługowemu workerowi wyświetlenie strony internetowej, obrazu lub czcionki, jeśli wystąpi błąd routingu w przypadku któregoś z tych elementów, np. jeśli użytkownik jest offline i nie ma dopasowania do pamięci podręcznej. W wersji 6.1.0 Recipebox Recipes usunięto wymaganie dotyczące przechowywania tych elementów w pamięci podręcznej za pomocą wstępnego buforowania. Aby zapewnić zgodność wsteczną, najpierw szuka elementów w pamięci podręcznej, a dopiero potem we własnej pamięci podręcznej.

Ten przepis domyślnie zakłada, że strona zastępcza to offline.html i że nie ma zastępczego obrazu ani czcionki. Pełną listę opcji konfiguracji znajdziesz w sekcji opcje zapasowe w trybie offline.

Zastępcze rozwiązanie offline zostanie zastosowane tylko wtedy, gdy dla danego żądania istnieje pasujący szlak. Jeśli używasz tylko przepisu offline, musisz samodzielnie tworzyć trasy. Najprostszym sposobem jest użycie metody setDefaultHandler() do utworzenia trasy, która stosuje strategię NetworkOnly do wszystkich żądań (jak pokazano poniżej). Inne przepisy, takie jak pamięć podręczna strony, pamięć podręczna statycznych zasobów czy pamięć podręczna obrazów, konfigurują trasy dla swoich odpowiednich pamięci podręcznych. setDefaultHandler() nie jest wymagany, jeśli używasz zarówno rozwiązania zapasowego offline, jak i jednego z tych szablonó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);

Ciepła pamięć podręczna strategii

Przepis na pamięć podręczną strategii „ciepło” pozwala wczytać podane adresy URL do pamięci podręcznej podczas fazy install instancji roboczej i buforować je przy użyciu opcji podanej strategii. Możesz użyć tej opcji jako alternatywy dla wstępnego zapisania w pamięci podręcznej, jeśli znasz konkretne adresy URL, które chcesz zapisać w pamięci podręcznej, chcesz podgrzać pamięć podręczną trasy lub podobnych miejsc, w których chcesz zapisać adresy URL podczas instalacji.

Pełną listę opcji konfiguracji znajdziesz w sekcji Opcje pamięci podręcznej strategii aktywnej.

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 strony

Przepis z pamięcią podręczną strony pozwala mechanizmowi Service Worker zareagować na żądanie strony HTML (przez nawigację po adresie URL) przy użyciu strategii buforowania z pierwszej kolejnością sieci, która jest zoptymalizowana pod kątem, aby zastępcza pamięć podręczna dotarła na tyle szybko, by uzyskać wynik największego wyrenderowania treści krótszy niż 4,0 sekundy.

Ten przepis domyślnie zakłada, że limit czasu sieci powinien wynosić 3 sekundy, i obsługuje podgrzewanie pamięci podręcznej za pomocą opcji warmCache. Pełną listę opcji konfiguracji znajdziesz w sekcji Opcje pamięci podręcznej strony.

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

Receptura pamięci podręcznej zasobów statycznych umożliwia usługowemu workerowi odpowiadanie na żądania dotyczące zasobów statycznych, w szczególności żądania dotyczące plików CSS, JavaScript i workerów sieciowych, przy użyciu strategii buforowania nieaktualizowane – weryfikuj ponownie, dzięki czemu te zasoby mogą być szybko wyświetlane z pamięci podręcznej i aktualizowane w tle.

Ten przepis obsługuje podgrzewanie pamięci podręcznej za pomocą opcji warmCache. Pełną listę opcji konfiguracji znajdziesz w sekcji Opcje 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 grafiki

Przepis z pamięcią podręczną obrazów umożliwia mechanizmowi Service Workerowi reagowanie na żądanie obrazów za pomocą strategii buforowania, która korzysta z pamięci podręcznej. Dzięki temu, gdy obrazy są już dostępne w pamięci podręcznej, użytkownik nie musi wysyłać za nie kolejnych żądań.

Ten przepis domyślnie zapisuje w pamięci podręcznej maksymalnie 60 obrazów, każdy na 30 dni i obsługuje podgrzewanie pamięci podręcznej przy użyciu opcji warmCache. Pełną listę opcji konfiguracji znajdziesz w sekcji Opcje 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:

• Plik stylesheet z definicjami @font-face, które zawierają 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-Tymczasem-revalidate. Z drugiej strony same pliki czcionek się nie zmieniają i można wykorzystać strategię cache first.

Ten przepis domyślnie zapisuje w pamięci podręcznej maksymalnie 30 plików czcionek, każdy na rok. Pełną listę opcji konfiguracji znajdziesz w opcjach 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 wykorzystanie

Połączenie wszystkich tych przepisów powoduje utworzenie mechanizmu Service Worker, który odpowiada na żądania stron za pomocą strategii buforowania najpierw sieć, odpowiada na żądania CSS, JavaScript i Web Worker za pomocą strategii stale-podczas ponownej weryfikacji, odpowiada na żądania obrazów za pomocą strategii pierwszeństwa w pamięci podręcznej, poprawnie buforuje Google Fonts i udostępnia funkcje zastępcze offline dla żądań stron. Możesz to zrobić na kilka sposobów:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Typy

GoogleFontCacheOptions

Właściwości

• cachePrefix

  ciąg znaków opcjonalny

• maxAgeSeconds

  number opcjonalny

• maxEntries

  number opcjonalny

ImageCacheOptions

Właściwości

• cacheName

  ciąg znaków opcjonalny

• matchCallback

  RouteMatchCallback opcjonalny

• maxAgeSeconds

  number opcjonalny

• maxEntries

  liczba opcjonalnie

• plugins

  WorkboxPlugin[] – opcjonalna

• warmCache

  string[] opcjonalnie

OfflineFallbackOptions

Właściwości

• fontFallback

  ciąg znaków opcjonalny

• imageFallback

  ciąg znaków opcjonalny

• pageFallback

  ciąg znaków opcjonalny

PageCacheOptions

Właściwości

• cacheName

  ciąg znaków opcjonalny

• matchCallback

  RouteMatchCallback opcjonalnie

• networkTimeoutSeconds

  liczba opcjonalnie

• wtyczki

  WorkboxPlugin[] opcjonalnie

• warmCache

  string[] opcjonalnie

StaticResourceOptions

Właściwości

• cacheName

  ciąg znaków opcjonalny

• matchCallback

  Opcjonalne RouteMatchCallback

• plugins

  WorkboxPlugin[] opcjonalnie

• warmCache

  string[] opcjonalnie

WarmStrategyCacheOptions

Właściwości

• strategia

  Strategia

• adresy

  string[]

Metody

googleFontsCache()

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

Implementacja przepisu na buforowanie [czcionek Google]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

Parametry

• Opcje

  Opcjonalne GoogleFontCacheOptions

imageCache()

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

Implementacja [przepisu na buforowanie obrazów]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parametry

• Opcje

  Opcjonalne ImageCacheOptions

offlineFallback()

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

Implementacja [przepisu na wszystkie elementy zastępcze]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Pamiętaj, aby uwzględnić substytuty w zapisywaniu do pamięci podręcznej z wyprzedzeniem.

Parametry

• Opcje

  Opcjonalne OfflineFallbackOptions

pageCache()

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

Implementacja przepisu dotyczącego buforowania strony w pamięci podręcznej z limitem czasu sieci

Parametry

• Opcje

  PageCacheOptions opcjonalnie

staticResourceCache()

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

Implementacja [CSS and JavaScript files recipe]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parametry

• Opcje

  StaticResourceOptions opcjonalny;

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parametry

• Opcje

  WarmStrategyCacheOptions