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(): void
Se o navegador oferecer suporte ao pré-carregamento de navegação, ele será desativado.
enable()
workbox-navigation-preload.enable(
headerValue?: string,
): void
Se o navegador oferecer suporte ao pré-carregamento de navegação, ele será ativado.
Parâmetros
- headerValue
string opcional
isSupported()
workbox-navigation-preload.isSupported(): boolean
Retorna
-
booleano
Se o navegador atual oferece suporte para ativar o carregamento prévio de navegação.