workbox-ricette

Alcuni pattern comuni, in particolare relativi al routing e alla memorizzazione nella cache, sono sufficientemente comuni da poter essere standardizzati in ricette riutilizzabili. workbox-recipes le rende disponibili in un pacchetto di facile utilizzo, che ti consente di essere operativo rapidamente con un service worker altamente funzionale.

Ricette

Ogni formula combina diversi moduli di Workbox e li raggruppa in pattern di uso comune. Le ricette di seguito mostrano la ricetta che utilizzi quando utilizzi questo modulo e l'equivalente pattern che utilizza in background, se vuoi scriverla tu.

Di riserva offline

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

Per impostazione predefinita, questa formula presuppone che la pagina di riserva sia offline.html e che non esista un'immagine o un carattere di riserva. Consulta le opzioni di riserva offline per un elenco di tutte le opzioni di configurazione.

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

Formula

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Sequenza

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 formula della cache con strategia calda 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 soluzione può essere utilizzata in alternativa alla pre-memorizzazione nella cache se conosci gli URL specifici da memorizzare nella cache, se vuoi scaldare la cache di una route o posizioni simili in cui vorresti memorizzare gli URL nella cache durante l'installazione.

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

Formula

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

Sequenza

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 della pagina

La formula della cache della pagina consente al service worker di rispondere a una richiesta di una pagina HTML (tramite la navigazione nell'URL) con una strategia di memorizzazione nella cache network first, ottimizzata, per consentire, idealmente, che la cache di riserva arrivi abbastanza velocemente da ottenere un punteggio Largest Contentful Paint, inferiore a 4,0 secondi.

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

Formula

import {pageCache} from 'workbox-recipes';

pageCache();

Sequenza

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 risorse statiche

La formula della cache delle risorse statiche consente al 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 gli asset possano essere pubblicati rapidamente dalla cache ed essere aggiornati in background

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

Formula

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Sequenza

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 formula della cache delle immagini consente al service worker di rispondere a una richiesta di immagini con una strategia di memorizzazione nella cache cache-first di modo che, una volta disponibili nella cache, l'utente non debba fare un'altra richiesta.

Per impostazione predefinita, questa formula 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.

Formula

import {imageCache} from 'workbox-recipes';

imageCache();

Sequenza

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 statici sottoposti a revisione.

Poiché il foglio di stile può cambiare di frequente, viene utilizzata una strategia di memorizzazione nella cache stale-while-revalidate. I file dei caratteri stessi, invece, non cambiano e possono utilizzare una strategia cache first.

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

Formula

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Sequenza

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

Combinando insieme tutte le formule, si ottiene un service worker che risponde alle richieste di pagina con una strategia di memorizzazione nella cache network first, risponde alle richieste CSS, JavaScript e Web Worker con una strategia stale-while-revalidate, risponde alle richieste di immagini con una strategia cache first, memorizza nella cache Google Fonts correttamente e fornisce un riserva offline per le richieste di pagina. Tutto questo può essere fatto con quanto segue:

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