O artigo 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 para apps da Web cujo service worker não processa explicitamente solicitações de navegação.
O que esse módulo faz?
O workbox-navigation-preload vai processar a verificação durante a execução para saber se o navegador atual oferece suporte
ao pré-carregamento de navegação. Se sim, ele vai criar automaticamente um manipulador de eventos activate para
ativá-lo.
O código compartilhado em 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 pode aproveitar automaticamente o pré-carregamento de navegação,
assim que ele for ativado.
Quem deve ativar os carregamentos prévios de navegação?
Os desenvolvedores que já estão processando navegações respondendo com HTML pré-armazenado em cache (provavelmente configurado com um substituto do shell do app) não precisam ativar o pré-carregamento de navegação. O objetivo desse recurso é reduzir a latência de navegação para desenvolvedores que não podem pré-cachear o HTML, mas ainda querem usar o Workbox para gerenciar o armazenamento em cache de outros recursos nos sites.
Por exemplo, se você estiver seguindo o padrão de shell do app e já tiver uma rota de navegação configurada para usar o HTML pré-armazenado em cache, ativar o carregamento prévio de navegação será um desperdício. A resposta da rede associada à solicitação de pré-carregamento nunca será usada, já que o HTML pré-armazenado em cache será usado de forma incondicional.
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 ao navegador?
No momento, o Google Chrome é o único navegador que oferece suporte ao pré-carregamento de navegação.
O enable() vai verificar o suporte do navegador no momento da execução e tentar
ativar o carregamento prévio de navegação somente se o navegador atual for compatível. Portanto,
é seguro chamar enable() incondicionalmente no service worker.
Esses navegadores não vão se beneficiar da redução da latência de navegação. É recomendável medir cuidadosamente as implicações de desempenho ao enviar um worker de serviço que não processa solicitações de navegação nem usa o pré-carregamento de navegação.
Métodos
disable()
workbox-navigation-preload.disable()
Se o navegador oferecer suporte ao pré-carregamento de navegação, ele será desativado.
enable()
workbox-navigation-preload.enable(
headerValue?: string,
)
Se o navegador oferecer suporte ao pré-carregamento de navegação, ele será ativado.
Parâmetros
-
headerValue
string opcional
isSupported()
workbox-navigation-preload.isSupported()
Retorna
-
booleano
Se o navegador atual oferece suporte para ativar o carregamento prévio de navegação.