Precaching is een van de meest voorkomende dingen die u als servicemedewerker doet, en Workbox biedt veel flexibiliteit in de manier waarop u deze belangrijke taak kunt uitvoeren, ongeacht welke van de bouwtools van Workbox u kiest. In deze handleiding leert u hoe u assets vooraf kunt cachen met behulp van zowel generateSW als injectManifest , en welke van deze methoden mogelijk het beste bij uw project passen.

Precaching met generateSW

generateSW is de gemakkelijkste manier om assets vooraf in Workbox te cachen. Het belangrijkste dat u moet onthouden bij generateSW is dat u niet uw eigen servicemedewerker aan het schrijven bent; u vraagt ​​Workbox om er een voor u te genereren. U kunt het gedrag ervan echter beïnvloeden via een verscheidenheid aan configuratieopties.

generateSW doet standaard verschillende dingen, afhankelijk van welke bouwtool u gebruikt. Wanneer u workbox-webpack-plugin gebruikt, hoeft u geen configuratieopties op te geven. Standaard zal de plug-in alles wat webpack in zijn afhankelijkheidsgrafiek bevat vooraf in de cache plaatsen en een servicemedewerker met de naam service-worker.js naar de map schrijven die is opgegeven door output.path

Aan de andere kant, als u workbox-build of workbox-cli gebruikt, worden alleen HTML-, CSS- en JavaScript-items die uit het lokale bestandssysteem worden gelezen standaard vooraf in de cache geplaatst. Qua configuratie moet u swDest en de globDirectory optie opgeven in de generateSW configuratie om precaching te laten werken. De kans is groot dat u aanvullende opties wilt configureren die ook van invloed zijn op het gedrag van uw servicemedewerkers, dus blader eens door de documentatie.

Precaching met injectManifest

Het gebruik injectManifest is niet zo eenvoudig als het gebruik generateSW , maar u ruilt gebruiksgemak in voor meer flexibiliteit. Waar generateSW de hele generatie servicemedewerkers voor u afhandelt, neemt injectManifest een servicemedewerker die u schrijft als bron en injecteert een lijst met URL's om vooraf in de cache te plaatsen, terwijl de rest van uw servicemedewerker ongewijzigd blijft.

Wanneer u injectManifest gebruikt, bent u verantwoordelijk voor het aansluiten van precaching-logica. Wanneer injectManifest uw invoerservicemedewerker onderzoekt, zoekt deze naar een speciale self.__WB_MANIFEST variabele en vervangt deze door het precache-manifest. Als deze variabele niet aanwezig is, genereert injectManifest een foutmelding.

De lijst met vermeldingen in het precache-manifest kan worden aangepast met extra configuratie-opties .

Vergelijking naast elkaar

Klik op elk van de onderstaande tabbladen om het gebruik van de generateSW en injectManifest te vergelijken:

Omdat generateSW een servicemedewerker genereert, hoeft u alleen een configuratie op te geven. Hieronder ziet u een voorbeeld met behulp van workbox-build :

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

De servicemedewerker kan vervolgens op de opdrachtregel worden gebouwd met Node:

node build-sw.js

Omdat injectManifest een bronservicemedewerker vereist, vereist een minimaal haalbaar voorbeeld een bronservicemedewerkerbestand. Als alles wat nodig is precaching is, kan die invoerservicemedewerker er ongeveer zo uitzien:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Let op de tekenreeks self.__WB_MANIFEST . Dit is een tijdelijke aanduiding die Workbox vervangt door het precache-manifest. Hieronder vindt u een geldige configuratie voor dit gebruiksscenario:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

injectManifest heeft de voorkeur als u complexe vereisten hebt, zoals geavanceerde routering, aangepaste cachingstrategieën of andere zaken die niet worden gedekt door de opties generateSW biedt.

Conclusie

Precaching in Workbox is veel eenvoudiger dan wanneer u de precaching zelf zou moeten beheren, vooral als het om versiebeheer gaat die door bundelaars zijn samengesteld. Precaching is echter niet het enige dat u waarschijnlijk zult doen als servicemedewerker. Naarmate u verdergaat, leert u andere technieken, zoals runtime-caching.