Werkboxvenster gebruiken

Eén Workbox-module die in deze documentatie nog niet veel aandacht heeft gekregen, is workbox-window , een reeks modules die bedoeld zijn om in het window te draaien. De doelen van deze module zijn:

  • Om de registratie en updates van servicemedewerkers te vereenvoudigen door ontwikkelaars te helpen kritieke momenten in de levenscyclus van servicemedewerkers te identificeren, waardoor het gemakkelijker wordt om op die momenten te reageren.
  • Om te voorkomen dat ontwikkelaars veelgemaakte fouten maken, zoals het registreren van een servicemedewerker in de verkeerde scope.
  • Om de berichtenuitwisseling tussen het window en het bereik van de servicemedewerker te vereenvoudigen.

Importeren en gebruiken workbox-window

De export die u het vaakst zult gebruiken vanuit workbox-window is de Workbox klasse, die u kunt importeren in Node of vanuit het CDN op een webpagina.

Een lokale bundel maken

Als uw toolchain een bundelprogramma zoals webpack of Rollup bevat, kunt u workbox-window lokaal bundelen.

Installeer eerst workbox-window als productieafhankelijkheid van uw applicatie:

npm install workbox-window --save

Vervolgens kunt u in uw JavaScript-toepassing de Workbox klasse import vanuit workbox-window :

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

Hoewel workbox-window vrij klein is, kunt u het splitsen van de kernapplicatielogica van uw website met behulp van dynamic import , waardoor de grootte van de hoofdbundel van uw pagina kan worden verkleind: 

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

Het CDN gebruiken

Hoewel dit niet de aanbevolen aanpak is, is een eenvoudigere manier om workbox-window te gebruiken het importeren vanuit een CDN:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

U zult merken dat het <script> -element in het bovenstaande voorbeeld het type="module" attribuut gebruikt. Dit is vereist als u statische import in de browser wilt gebruiken zonder een build-stap. Alle grote browsers die servicemedewerkers ondersteunen ondersteunen ook JavaScript-modules, dus het is prima om deze code aan elke browser te leveren, aangezien oudere browsers <script> -elementen met een type attribuutwaarde van "module" zullen negeren.

Een servicemedewerker registreren

Het registreren van een servicemedewerker met workbox-window gebeurt als volgt met de register van de Workbox -klasse:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

Het lijkt misschien dat dit hetzelfde is als het zelf registreren van een servicemedewerker via navigator.serviceWorker.register . Workbox.register zorgt er echter voor dat er wordt gewacht tot de gebeurtenis load window voordat de servicemedewerker wordt geregistreerd. Dit is wenselijk in situaties waarbij precaching betrokken is, zodat bandbreedteconflicten die het opstarten van de pagina kunnen vertragen, kunnen worden vermeden.

Communiceren tussen het window en het bereik van de servicemedewerker

Servicemedewerkers hebben hun eigen bereik, los van het window , en hebben slechts toegang tot een subset van de API's die beschikbaar zijn in het window . Het is echter wel mogelijk om te communiceren tussen het window en de servicemedewerker. workbox-window maakt eenvoudigere communicatie tussen de twee scopes mogelijk met de messageSW methode van workbox-window module.

Workbox gebruikt een specifiek formaat voor berichten en is een object met de volgende eigenschappen:

  • type is een vereiste unieke tekenreeks die het bericht identificeert. De notatie moet in hoofdletters zijn, met onderstrepingstekens die de woorden scheiden (bijvoorbeeld CACHE_URLS ).
  • meta is een optionele tekenreeks die de naam vertegenwoordigt van het Workbox-pakket dat het bericht verzendt, en wordt meestal weggelaten.
  • payload is een optionele parameter die de gegevens vertegenwoordigt die u wilt verzenden. Het kan elk gegevenstype zijn.

Hieronder ziet u een voorbeeld van hoe messageSW werkt, te beginnen met de code in uw servicemedewerker:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

En dan de volgende code in uw webpagina:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

Er zijn veel gevallen waarin communicatie tussen een servicemedewerker en het window nuttig kan zijn, zoals het informeren van de gebruiker wanneer er een update voor de servicemedewerker beschikbaar is . Dat recept is afhankelijk van een speciale hulpmethode voor self.skipWaiting genaamd messageSkipWaiting , die een bericht verzendt met de type SKIP_WAITING .