caixa de trabalho-navegação-pré-carregamento

"Acelerar o Service Worker com pré-carregamentos de navegação" explica muito bem o que é o pré-carregamento de navegação e os benefícios que ele oferece aos apps da Web que não processam explicitamente as solicitações de navegação.

O que este módulo faz?

workbox-navigation-preload vai processar a verificação no momento da execução para conferir se o navegador atual é compatível com o pré-carregamento de navegação e, em caso afirmativo, criará automaticamente um manipulador de eventos activate para ativá-lo.

O código compartilhado dentro de workbox-core que processa solicitações de rede em todo o Workbox também foi atualizado para aproveitar automaticamente uma resposta de pré-carregamento, se disponível. Isso significa que qualquer uma das estratégias integradas poderá aproveitar automaticamente o pré-carregamento de navegação depois que ele for ativado.

Quem deve ativar os pré-carregamentos de navegação?

Os desenvolvedores que já estão processando navegações respondendo com HTML pré-armazenado em cache (possivelmente configurado com um substituto do App Shell) não precisam ativar o pré-carregamento da navegação. O objetivo desse recurso é reduzir a latência de navegação para desenvolvedores que não conseguem pré-armazenar o HTML em cache, mas ainda querem usar o Workbox para processar o armazenamento em cache de outros recursos nos sites.

Por exemplo, se você estiver seguindo o padrão do shell do app e já tiver uma rota de navegação configurada para usar o HTML pré-armazenado em cache, ativar o pré-carregamento da navegação será um desperdício. A resposta da rede associada à solicitação de pré-carregamento nunca acabará sendo usada, já que o HTML pré-armazenado em cache será usado incondicionalmente.

Uso básico

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Qual é a história de suporte do navegador?

Atualmente, o Google Chrome é o único navegador que oferece suporte ao pré-carregamento de navegação. O enable() verifica a compatibilidade com o navegador no momento da execução e só tenta ativar o pré-carregamento da navegação se o navegador atual for compatível. Portanto, é seguro chamar enable() incondicionalmente no service worker.

Você precisa estar ciente de que esses navegadores não se beneficiarão da redução da latência da navegação. Recomendamos que você meça cuidadosamente as implicações de desempenho do envio de um service worker que não processa solicitações de navegação e não usa o pré-carregamento de navegação.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()