workbox-ricette

Alcuni pattern comuni, in particolare per quanto riguarda il routing e la memorizzazione nella cache, sono abbastanza comuni da poter essere standardizzati in ricette riutilizzabili. workbox-recipes le rende disponibili in un pacchetto di facile utilizzo, che ti consente di essere subito operativi con un service worker altamente funzionale.

Ricette

Ogni formula combina diversi moduli Workbox raggruppandoli in pattern di uso comune. Le ricette riportate di seguito mostrano la ricetta che utilizzi quando usi questo modulo e il pattern equivalente utilizzato sotto il cofano, se vuoi scriverlo autonomamente.

Fallback offline

La formula di riserva offline consente al service worker di pubblicare una pagina web, un'immagine o un carattere se si verifica un errore di routing per uno dei tre, ad esempio se un utente è offline e non si verifica un successo della cache. Nella versione 6.1.0 di Workbox Recipes, è stato rimosso il requisito di memorizzazione nella cache di questi elementi utilizzando la precaching. per verificare la compatibilità con le versioni precedenti, cercherà gli elementi nella preregistrazione prima di provare a utilizzare la propria cache.

Per impostazione predefinita, questa ricetta presuppone che la pagina di riserva sia offline.html e che non esistano immagini o caratteri di riserva. Consulta le opzioni di riserva offline per un elenco di tutte le opzioni di configurazione.

La riserva offline verrà applicata solo se esiste un route corrispondente a una determinata richiesta. Se utilizzi la formula di riserva offline autonomamente, dovrai creare i percorsi personalmente. Il modo più semplice per farlo è utilizzare il metodo setDefaultHandler() per creare un percorso che applichi la strategia NetworkOnly a tutte le richieste, come mostrato di seguito. Altre ricette, come la cache di pagine, la cache delle risorse statiche o la cache delle immagini, configurano i percorsi per le rispettive cache. setDefaultHandler() non è obbligatorio se utilizzi sia il fallback offline sia una di queste ricette.

Recipe

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Pattern

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);

Cache della strategia a caldo

La ricetta della cache della strategia warm ti consente di caricare gli URL forniti nella cache durante la fase install del service worker, memorizzandoli nella cache con le opzioni della strategia fornita. Questa opzione può essere utilizzata come alternativa alla precaching se conosci gli URL specifici che vuoi memorizzare nella cache, vuoi attivare la cache di un percorso o posizioni simili in cui vuoi memorizzare nella cache gli URL durante l'installazione.

Consulta le opzioni della cache della strategia warm per un elenco di tutte le opzioni di configurazione.

Recipe

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});

Pattern

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));
});

Cache delle pagine

La ricetta della cache di pagina consente al tuo service worker di rispondere a una richiesta di una pagina HTML (tramite la navigazione dell'URL) con una strategia di memorizzazione nella cache in primo piano sulla rete, ottimizzata in modo da consentire, idealmente, che il fallback della cache arrivi abbastanza rapidamente per un punteggio largest contentful paint inferiore a 4,0 secondi.

Questa formula, per impostazione predefinita, presuppone che il timeout di rete debba essere di 3 secondi e supporta il riscaldamento della cache tramite l'opzione warmCache. Consulta le opzioni della cache di pagina per un elenco di tutte le opzioni di configurazione.

Recipe

import {pageCache} from 'workbox-recipes';

pageCache();

Pattern

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],
      }),
    ],
  })
);

Cache delle risorse statiche

La ricetta della cache delle risorse statiche consente al tuo service worker di rispondere a una richiesta di risorse statiche, in particolare richieste CSS, JavaScript e Web Worker, con una strategia di memorizzazione nella cache stale-while-revalidate in modo che queste risorse possano essere pubblicate rapidamente dalla cache ed essere aggiornate in background.

Questa ricetta supporta l'ottimizzazione della cache tramite l'opzione warmCache. Consulta le opzioni della cache delle risorse statiche per un elenco di tutte le opzioni di configurazione.

Recipe

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Pattern

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],
      }),
    ],
  })
);

Cache immagini

La ricetta della cache delle immagini consente al tuo service worker di rispondere a una richiesta di immagini con una strategia di memorizzazione nella cache cache-first, in modo che, una volta disponibili nella cache, un utente non debba effettuare un'altra richiesta.

Questa formula, per impostazione predefinita, memorizza nella cache un massimo di 60 immagini, ciascuna per 30 giorni, e supporta il riscaldamento della cache tramite l'opzione warmCache. Consulta le opzioni di cache delle immagini per un elenco di tutte le opzioni di configurazione.

Recipe

import {imageCache} from 'workbox-recipes';

imageCache();

Pattern

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,
      }),
    ],
  })
);

Cache di Google Fonts

La formula di Google Fonts memorizza nella cache le due parti di una richiesta di Google Fonts:

• Il foglio di stile con le definizioni @font-face, che rimandano ai file dei caratteri.
• I file dei caratteri rivisti e statici.

Dal momento che il foglio di stile può cambiare di frequente, viene utilizzata una strategia di memorizzazione nella cache stale-what-revalidate. I file dei caratteri, invece, non cambiano e possono sfruttare una strategia cache first.

Per impostazione predefinita, questa formula memorizza nella cache un massimo di 30 file di caratteri, ciascuno per un anno. Consulta le opzioni di cache di Google Fonts per un elenco di tutte le opzioni di configurazione.

Recipe

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Pattern

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,
      }),
    ],
  })
);

Utilizzo rapido

La combinazione di tutte le ricette produrrà un worker di servizio che risponde alle richieste di pagina con una strategia di memorizzazione nella cache network first, alle richieste di CSS, JavaScript e Web Worker con una strategia stale-while-revalidate, alle richieste di immagini con una strategia cache first, memorizza correttamente i caratteri Google Fonts e fornisce un fallback offline per le richieste di pagina. Tutto questo può essere fatto con:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Tipi

GoogleFontCacheOptions

Proprietà

• cachePrefix

  stringa facoltativa

• maxAgeSeconds

  number facoltativo

• maxEntries

  numero facoltativo

ImageCacheOptions

Proprietà

• cacheName

  stringa facoltativo

• matchCallback

  RouteMatchCallback facoltativo

• maxAgeSeconds

  number facoltativo

• maxEntries

  numero facoltativo

• plugins

  WorkboxPlugin[] facoltativo

• warmCache

  stringa[] facoltativo

OfflineFallbackOptions

Proprietà

• fontFallback

  stringa facoltativa

• imageFallback

  stringa facoltativo

• pageFallback

  stringa facoltativo

PageCacheOptions

Proprietà

• cacheName

  stringa facoltativo

• matchCallback

  RouteMatchCallback facoltativo

• networkTimeoutSeconds

  number facoltativo

• plugins

  WorkboxPlugin[] facoltativo

• warmCache

  stringa[] facoltativo

StaticResourceOptions

Proprietà

• cacheName

  stringa facoltativo

• matchCallback

  RouteMatchCallback facoltativo

• plugins

  WorkboxPlugin[] facoltativo

• warmCache

  stringa[] facoltativo

WarmStrategyCacheOptions

Proprietà

• strategia

  Strategia

• Url

  string[]

Metodi

googleFontsCache()

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

Un'implementazione della ricetta per la memorizzazione nella cache di [Google font]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

Parametri

• opzioni

  GoogleFontCacheOptions facoltativo

imageCache()

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

Un'implementazione della [ricetta di memorizzazione nella cache delle immagini]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parametri

• opzioni

  ImageCacheOptions facoltativo

offlineFallback()

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

Un'implementazione della [ricetta di fallback completa]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Assicurati di includere i fallback nell'inserimento di pre-cache

Parametri

• opzioni

  OfflineFallbackOptions facoltativo

pageCache()

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

Un'implementazione di una ricetta di memorizzazione nella cache della pagina con un timeout di rete

Parametri

• opzioni

  PageCacheOptions facoltativo

staticResourceCache()

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

Un'implementazione della [ricetta per i file CSS e JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parametri

• opzioni

  StaticResourceOptions facoltativo

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parametri

• opzioni

  WarmStrategyCacheOptions