De manieren van Workbox

Workbox is flexibel genoeg om het bouwproces van vrijwel elk project aan te kunnen. Dit betekent dat er meer dan één manier is om Workbox te gebruiken, zodat u de juiste integratie voor uw project kunt kiezen. Ongeacht hoe u met Workbox integreert, de verschillende tools bieden een vergelijkbare API.

generateSW versus injectManifest

U vertrouwt op een van de twee kernmethoden van de buildtools van Workbox: generateSW of injectManifest . Welke u moet gebruiken, hangt af van hoeveel flexibiliteit u nodig heeft. generateSW geeft prioriteit aan gebruiksgemak en eenvoud ten koste van flexibiliteit, waardoor u een reeks configuratie-opties kunt declareren en u in ruil daarvoor een volledig functionele servicemedewerker krijgt.

injectManifest is voorstander van grotere flexibiliteit ten koste van enige eenvoud, omdat u uiteindelijk zelf de code voor uw servicemedewerker gaat schrijven, waarbij injectManifest een precache-manifest levert dat kan worden gebruikt door de precaching-methoden van Workbox.

Wanneer moet u generateSW gebruiken?

U moet generateSW gebruiken als:

  • U wilt bestanden die verband houden met uw bouwproces vooraf in de cache opslaan, inclusief bestanden waarvan de URL's hashes bevatten die u misschien niet van tevoren kent.
  • U heeft eenvoudige runtime-cachingbehoeften die kunnen worden geconfigureerd via de opties van generateSW .

Wanneer generateSW niet gebruiken?

Aan de andere kant moet u generateSW niet gebruiken als:

  • U wilt andere servicemedewerkerfuncties gebruiken (zoals Web Push ).
  • U hebt extra flexibiliteit nodig om extra scripts te importeren of specifieke Workbox-modules te gebruiken om uw servicemedewerker af te stemmen op de behoeften van uw applicatie.

Wanneer injectManifest gebruiken?

U moet injectManifest gebruiken als:

  • U wilt bestanden vooraf cachen, maar u wilt uw eigen servicemedewerker schrijven.
  • U heeft complexe caching- of routeringsbehoeften die niet kunnen worden uitgedrukt via de configuratie-opties van generateSW
  • U wilt graag andere API's gebruiken in uw servicemedewerker (zoals Web Push).

injectManifest verschilt van generateSW doordat u hiervoor een bronservicewerknemersbestand moet opgeven. In deze werkstroom moet het bronservicewerknemerbestand een speciale tekenreeks self.__WB_MANIFEST bevatten, zodat injectManifest dit kan vervangen door het precache manifest .

Wanneer mag u injectManifest niet gebruiken?

U mag injectManifest niet gebruiken als:

  • U wilt geen precaching gebruiken in uw servicemedewerker.
  • onze vereisten voor servicemedewerkers zijn eenvoudig genoeg om te worden gedekt door wat generateSW en de bijbehorende configuratieopties kunnen bieden.
  • U geeft prioriteit aan gebruiksgemak boven flexibiliteit.

Gebruik de Build-tools van Workbox

Als u op zoek bent naar een raamwerkonafhankelijke manier om Workbox in uw bouwproces te gebruiken, heeft u drie opties:

  1. workbox-cli
  2. workbox-build . opdrachtregelprogramma.
  3. Een bundelprogramma gebruiken (zoals workbox-webpack-plugin ).

Elk van deze bouwtools biedt zowel de generateSW als injectManifest modi, met een vergelijkbare reeks opties. Dit zijn allemaal prima keuzes als u uw door Workbox aangedreven servicemedewerker niet aan een bepaald raamwerk wilt binden. Om te weten welke van deze opties het beste bij u past, gaan we ze allemaal even bekijken.

workbox-cli

Als u op zoek bent naar de laagst mogelijke toegangsdrempel met Workbox, dan is de CLI iets voor u:

npm install workbox-cli --save-dev

Om de CLI te gaan gebruiken, voert u de wizard uit met npx workbox wizard . De wizard zal een paar vragen stellen, en de antwoorden op die vragen zullen worden gebruikt om een ​​project op te zetten met een workbox-config.js bestand dat u kunt aanpassen aan uw behoeften. Het zal er ongeveer zo uitzien:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Zodra uw configuratiebestand is gemaakt, kan de CLI de methoden generateSW of injectManifest voor u uitvoeren. De helptekst van de CLI bevat meer informatie en gebruiksvoorbeelden.

workbox-build

workbox-cli is een wrapper rond de workbox-build module, en een alternatief is om workbox-build rechtstreeks te gebruiken. Wanneer u workbox-build gebruikt, gebruikt u, in plaats van opties op te geven met behulp van een workbox-config.js -bestand, de methoden generateSW of injectManifest rechtstreeks als onderdeel van een Node-script, waarbij u een vergelijkbare set opties doorgeeft:

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

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

In het bovenstaande voorbeeld schrijft workbox-build de gegenereerde servicemedewerker naar de map dist wanneer de opdracht node build-sw.mjs wordt uitgevoerd.

Een bundelaar gebruiken

Verschillende bundelaars hebben hun eigen Workbox-plug-ins, maar de enige bundelaar die officieel door het Workbox-team wordt ondersteund is webpack, via workbox-webpack-plugin . Net als workbox-cli en workbox-build voert workbox-webpack-plugin de methoden generateSW of injectManifest uit, behalve dat de plug-in deze methodenamen met een hoofdletter schrijft als GenerateSW of InjectManifest . Anders is het gebruik vergelijkbaar met workbox-build :

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

De opties die u doorgeeft aan GenerateSW of InjectManifest zijn niet hetzelfde als generateSW of injectManifest , maar er is aanzienlijke overlap. In het bijzonder hoeft u geen globDirectory optie voor GenerateSW op te geven, omdat webpack al weet waar uw productiemiddelen zijn gebundeld.

Gebruik een raamwerk

Alles wat dit punt verhult, richt zich op het gebruik van Workbox, ongeacht iemands raamwerkvoorkeuren. Het is echter mogelijk om Workbox binnen een specifiek raamwerk te gebruiken als dit de ontwikkeling eenvoudiger maakt. create-react-app wordt bijvoorbeeld standaard meegeleverd met Workbox . Verschillende raamwerkintegraties met Workbox worden later in een later artikel besproken .

Het is vermeldenswaard dat deze raamwerkspecifieke integraties van Workbox uw mogelijkheden kunnen beperken om Workbox op de door u gewenste manier te configureren. In dit soort gevallen kun je altijd terugvallen op de hier besproken methoden.

Wat moet ik doen als ik geen bouwproces heb?

In dit document wordt ervan uitgegaan dat uw project een bouwproces heeft, maar dat is in werkelijkheid niet het geval voor uw project. Als dat uw situatie beschrijft, is het nog steeds mogelijk om Workbox te gebruiken met de workbox-sw module . Met workbox-sw kunt u de Workbox-runtime laden vanaf een CDN of lokaal, en uw eigen servicemedewerker samenstellen.

Conclusie

De flexibiliteit van Workbox zorgt ervoor dat u het in vrijwel elk project kunt gebruiken, ongeacht de voorkeuren voor het framework of de toolchain. Al deze mogelijkheden stellen u in staat om precaching en runtime caching uit te voeren met behulp van een aantal methoden, terwijl u meer flexibiliteit krijgt om servicemedewerkers te bouwen met meer geavanceerde functies wanneer dat nodig is.