receitas-de-caixa de trabalho

Vários padrões comuns, especialmente em relação ao roteamento e ao armazenamento em cache, são comuns o suficiente para serem padronizados em receitas reutilizáveis. workbox-recipes os disponibiliza em um pacote fácil de consumir, permitindo que você comece a trabalhar com um service worker altamente funcional rapidamente.

Receitas

Cada roteiro combina vários módulos do Workbox, agrupando-os em padrões usados com frequência. As receitas abaixo mostram a receita que você usa ao usar esse módulo e o padrão equivalente que ele usa nos bastidores, caso você queira escrever por conta própria.

Fallback off-line

O roteiro substituto off-line permite que o service worker exiba uma página da Web, imagem ou fonte se houver um erro de roteamento para qualquer um dos três, por exemplo, se um usuário estiver off-line e não houver uma ocorrência em cache. Na versão 6.1.0 do Workbox Recipes, a exigência de armazenar esses itens em cache usando precache foi removida. Para compatibilidade com versões anteriores, o recurso vai procurar itens no precache antes de tentar o próprio cache.

Por padrão, esta receita assume que a página de substituição é offline.html e que não há uma imagem ou fonte de substituição. Veja as opções de substituto off-line para obter uma lista de todas as opções de configuração.

O substituto off-line só será aplicado se houver uma rota correspondente para determinada solicitação. Se você estiver usando o roteiro substituto off-line por conta própria, precisará criar rotas por conta própria. A maneira mais simples de fazer isso é usar o método setDefaultHandler() para criar uma rota que aplique a estratégia NetworkOnly a todas as solicitações, conforme mostrado abaixo. Outros roteiros, como cache da página, cache de recursos estáticos ou cache de imagem, configuram rotas para os respectivos caches. setDefaultHandler() não é necessário ao usar o substituto off-line e uma dessas receitas.

Receita

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

setDefaultHandler(new NetworkOnly());

offlineFallback();

Padrão

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 da estratégia aquecida

O roteiro do cache de estratégia de estado salvo permite carregar os URLs fornecidos no cache durante a fase install do service worker, armazenando-os em cache com as opções da estratégia fornecida. Isso pode ser usado como uma alternativa ao armazenamento em cache se você souber os URLs específicos que gostaria de armazenar em cache, se quiser aquecer o cache de uma rota ou em locais semelhantes em que gostaria de armazenar URLs em cache durante a instalação.

Consulte as opções de cache da estratégia de pré-carregamento para conferir uma lista de todas as opções de configuração.

Receita

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

Padrão

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 da página

A receita de cache de página permite que o service worker responda a uma solicitação de uma página HTML (por navegação de URL) com uma estratégia de cache prioridade à rede, otimizada para permitir que a alternativa de cache chegue rápido o suficiente para uma pontuação de pintura de conteúdo mais longa de menos de 4,0 segundos.

Por padrão, essa receita pressupõe que o tempo limite de rede seja de três segundos e oferece suporte ao aquecimento do cache usando a opção warmCache. Consulte as opções de cache da página para ver uma lista com todas as opções de configuração.

Receita

import {pageCache} from 'workbox-recipes';

pageCache();

Padrão

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 de recursos estáticos

A receita de cache de recursos estáticos permite que o service worker responda a uma solicitação de recursos estáticos, especificamente solicitações de CSS, JavaScript e Web Worker, com uma estratégia de cache stale-while-revalidate para que esses recursos possam ser veiculados rapidamente do cache e atualizados em segundo plano.

Este roteiro é compatível com o aquecimento de cache por meio da opção warmCache. Consulte as opções de cache de recursos estáticos para conferir uma lista de todas as opções de configuração.

Receita

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Padrão

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 da imagem

A receita de cache de imagem permite que o service worker responda a uma solicitação de imagens com uma estratégia de cache primeiro para que, quando estiverem disponíveis no cache, o usuário não precise fazer outra solicitação.

Por padrão, essa receita armazena em cache no máximo 60 imagens, cada uma por 30 dias, e é compatível com o aquecimento de cache por meio da opção warmCache. Consulte as opções de cache de imagens para ver uma lista com todas as opções de configuração.

Receita

import {imageCache} from 'workbox-recipes';

imageCache();

Padrão

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 do Google Fonts

A receita do Google Fonts armazena em cache as duas partes de uma solicitação do Google Fonts:

  • A folha de estilo com as definições de @font-face, que está vinculada aos arquivos de fonte.
  • Os arquivos de fontes estáticos revisados.

Como a folha de estilo pode mudar com frequência, uma estratégia de cache desatualizada durante a nova validação é usada. Os arquivos de fonte, por outro lado, não mudam e podem aproveitar uma estratégia de cache primeiro.

Por padrão, essa receita armazena em cache no máximo 30 arquivos de fonte, cada um por um ano. Consulte as opções de cache do Google Fonts para ver uma lista com todas as opções de configuração.

Receita

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Padrão

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

Uso rápido

A combinação de todas as receitas vai gerar um service worker que responde às solicitações de página com uma estratégia de armazenamento em cache prioridade à rede, responde às solicitações de CSS, JavaScript e Web Worker com uma estratégia de validade temporária, responde às solicitações de imagem com uma estratégia de prioridade ao cache, armazena corretamente as fontes do Google em cache e oferece uma alternativa off-line para solicitações de página. Tudo isso pode ser feito com o seguinte:

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Tipos

GoogleFontCacheOptions

Propriedades

  • cachePrefix

    string opcional

  • maxAgeSeconds

    número opcional

  • maxEntries

    número opcional

ImageCacheOptions

Propriedades

  • cacheName

    string opcional

  • matchCallback

    RouteMatchCallback opcional

  • maxAgeSeconds

    número opcional

  • maxEntries

    número opcional

  • plugins

    WorkboxPlugin[] opcional

  • warmCache

    string[] opcional

OfflineFallbackOptions

Propriedades

  • fontFallback

    string opcional

  • imageFallback

    string opcional

  • pageFallback

    string opcional

PageCacheOptions

Propriedades

  • cacheName

    string opcional

  • matchCallback

    RouteMatchCallback opcional

  • networkTimeoutSeconds

    número opcional

  • plugins

    WorkboxPlugin[] opcional

  • warmCache

    string[] opcional

StaticResourceOptions

Propriedades

WarmStrategyCacheOptions

Propriedades

Métodos

googleFontsCache()

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

Uma implementação da receita de armazenamento em cache https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts [fontes do Google]

Parâmetros

imageCache()

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

Uma implementação do [roteiro de armazenamento de imagens em cache]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Parâmetros

offlineFallback()

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

Uma implementação da [receita de substitutos abrangentes]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Inclua os substitutos na injeção de pré-cache

Parâmetros

pageCache()

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

Uma implementação de um roteiro de armazenamento em cache de página com um tempo limite de rede

Parâmetros

staticResourceCache()

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

Uma implementação do [roteiro de arquivos CSS e JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Parâmetros

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Parâmetros