receitas-de-caixa de trabalho

Vários padrões comuns, especialmente em torno do roteamento e do armazenamento em cache, são comuns o suficiente para que possam ser padronizados em roteiros reutilizáveis. O workbox-recipes os disponibiliza em um pacote fácil de consumir, permitindo que você comece a usar rapidamente um service worker altamente funcional.

Recipes

Cada roteiro combina vários módulos da caixa de trabalho, reunindo-os em padrões usados com frequência. As receitas abaixo mostram a receita que você usa ao usar este módulo e o padrão equivalente que ele está usando em segundo plano, caso queira escrevê-lo por conta própria.

Substituto off-line

O roteiro de 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, o requisito de armazenar esses itens em cache usando precaching foi removido. Para compatibilidade com versões anteriores, ele vai procurar itens no pré-cache antes de tentar o próprio cache.

Por padrão, este roteiro presume que a página substituta é offline.html e que não há substituto de imagem ou fonte. Consulte as opções de substituição off-line para uma lista com todas as opções de configuração.

O substituto off-line só será aplicado se houver uma route correspondente para uma determinada solicitação. Se você estiver usando a receita de substituto off-line por conta própria, precisará criar as rotas por conta própria. A maneira mais simples de fazer é 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 o cache de página, cache de recursos estáticos ou de imagens, definem rotas para os respectivos caches. setDefaultHandler() não é necessário ao usar o substituto off-line e um desses roteiros.

Roteiro

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 de estratégia com estado salvo

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

Consulte as opções de cache de estratégia de teste para uma lista com todas as opções de configuração.

Roteiro

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

O roteiro do cache de páginas permite que o service worker responda a uma solicitação de uma página HTML (por meio da navegação por URL) com uma estratégia de armazenamento em cache que prioriza a rede, otimizada, idealmente, para permitir que o substituto do cache chegue rápido o suficiente para uma pontuação de maior exibição de conteúdo inferior a 4,0 segundos.

Por padrão, este roteiro presume que o tempo limite da rede precisa ser de três segundos e oferece suporte ao aquecimento de cache pela opção warmCache. Consulte as opções de cache da página para ver uma lista com todas as opções de configuração.

Roteiro

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

O roteiro do 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 armazenamento em cache desatualizado ao revalidar. Assim, esses recursos podem ser rapidamente veiculados a partir 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 ver uma lista com todas as opções de configuração.

Roteiro

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 de imagens

O roteiro de cache de imagens permite que o service worker responda a uma solicitação de imagens com uma estratégia de armazenamento em cache que prioriza o cache para que, quando elas estiverem disponíveis em cache, o usuário não precise fazer outra solicitação para elas.

Por padrão, este roteiro armazena no máximo 60 imagens em cache, cada uma por 30 dias, e é compatível com o aquecimento do cache usando a opção warmCache. Consulte as opções de cache de imagens para uma lista com todas as opções de configuração.

Roteiro

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

O roteiro 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 se vinculam aos arquivos de fontes.
• Os arquivos de fontes estáticas e revisadas.

Como a folha de estilo pode mudar com frequência, é usada uma estratégia de armazenamento em cache stale-while-revalidate. Por outro lado, os arquivos de fonte não mudam e podem usar uma estratégia de armazenamento em cache.

Por padrão, este roteiro 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.

Roteiro

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

Combinar todas as receitas em conjunto produzirá um service worker que responderá a solicitações de página com uma estratégia de armazenamento em cache primeiro a rede, responderá a solicitações CSS, JavaScript e Web Worker com uma estratégia desatualizada ao revalidar, responde a solicitações de imagem com uma estratégia cache primeiro, armazena em cache corretamente o Google Fonts e fornece um substituto off-line para solicitações de página. Tudo isso pode ser feito da seguinte maneira:

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