workbox-navigatie-preload

" Servicemedewerker sneller maken met vooraf geladen navigatie " legt uitstekend uit wat vooraf geladen navigatie is en welke voordelen het biedt voor webapps waarvan de servicemedewerker niet expliciet navigatieverzoeken afhandelt.

Wat doet deze module?

workbox-navigation-preload zal tijdens runtime controleren of de huidige browser het vooraf laden van navigatie ondersteunt, en als dit het geval is, zal het automatisch een activate gebeurtenishandler maken om dit in te schakelen.

De gedeelde code in de workbox-core die het maken van netwerkverzoeken in heel Workbox afhandelt, is ook bijgewerkt om automatisch te profiteren van een vooraf geladen reactie, als deze beschikbaar is. Dit betekent dat elk van de ingebouwde strategieën automatisch kan profiteren van de vooraf geladen navigatie, zodra deze is ingeschakeld.

Wie moet vooraf geladen navigatie inschakelen?

Ontwikkelaars die de navigatie al afhandelen door te reageren met vooraf in de cache opgeslagen HTML (mogelijk geconfigureerd met een App Shell-fallback), hoeven het vooraf laden van de navigatie niet in te schakelen! Deze functie is bedoeld om de navigatielatentie te verminderen voor ontwikkelaars die hun HTML niet vooraf kunnen cachen, maar toch Workbox willen gebruiken om het cachen van andere middelen op hun sites af te handelen.

Als u bijvoorbeeld het App Shell-patroon volgt en u al een navigatieroute hebt ingesteld om de vooraf in de cache opgeslagen HTML te gebruiken, is het zonde om de navigatie vooraf te laden. Het netwerkantwoord dat is gekoppeld aan het vooraf geladen verzoek zal uiteindelijk nooit worden gebruikt, omdat de vooraf in de cache opgeslagen HTML onvoorwaardelijk zal worden gebruikt.

Basisgebruik

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

Wat is het verhaal over browserondersteuning?

Momenteel is Google Chrome de enige browser die het vooraf laden van navigatie ondersteunt. enable() controleert tijdens runtime op browserondersteuning en probeert alleen het vooraf laden van navigatie in te schakelen als de huidige browser dit ondersteunt. Het is daarom veilig om enable() onvoorwaardelijk aan te roepen in uw servicewerker.

U moet zich ervan bewust zijn dat deze browsers niet zullen profiteren van de vermindering van de navigatielatentie, en het wordt aanbevolen dat u zorgvuldig de prestatie-implicaties meet van het sturen van een servicemedewerker die geen navigatieverzoeken afhandelt en geen gebruik maakt van vooraf geladen navigatie.

Methoden

disable()

workbox-navigation-preload.disable()

Als de browser Navigation Preload ondersteunt, wordt deze uitgeschakeld.

enable()

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

Als de browser Navigation Preload ondersteunt, wordt dit ingeschakeld.

Parameters

• headerWaarde

  tekenreeks optioneel

isSupported()

workbox-navigation-preload.isSupported()

Retouren

• Booleaans

  Of de huidige browser het inschakelen van vooraf laden van navigatie ondersteunt.