Heb je je ooit afgevraagd hoe sommige websites lijken te blijven werken, zelfs als je offline bent? Het geheim is simpel: deze websites hebben servicemedewerkers.
Servicemedewerkers zijn de belangrijkste technologie achter veel van de native app-achtige functies van moderne webapplicaties.
Wat zijn servicemedewerkers?
Servicemedewerkers zijn een gespecialiseerd type JavaScript-webwerkers. Een servicemedewerker is een JavaScript-bestand dat een beetje werkt als een proxyserver. Het vangt uitgaande netwerkverzoeken van uw toepassing op, zodat u aangepaste antwoorden kunt maken. U kunt bijvoorbeeld gecachte bestanden aan de gebruiker aanbieden wanneer deze offline is.
Met servicemedewerkers kunt u ook functies zoals achtergrondsynchronisatie toevoegen aan uw webtoepassingen.
Waarom servicemedewerkers?
Webontwikkelaars proberen al heel lang de mogelijkheden van hun apps uit te breiden. Voordat er servicemedewerkers kwamen, kon je verschillende oplossingen gebruiken om dit mogelijk te maken. Een bijzonder opvallende was AppCache, die het cachen van bronnen gemakkelijk maakte. Helaas had het problemen waardoor het voor de meeste apps een onpraktische oplossing was.
AppCache leek een goed idee, omdat je hiermee activa heel gemakkelijk in de cache kon specificeren. Het maakte echter veel aannames over wat je probeerde te doen en brak vervolgens vreselijk toen je app die aannames niet precies volgde. Lees Jake Archibald's (helaas getiteld maar goed geschreven) Applicatiecache is een Douchebag voor meer details. (Bron: MDN)
Servicemedewerkers zijn de huidige poging om de beperkingen van web-apps te verminderen, zonder de nadelen van technologie zoals AppCache.
Gebruiksscenario's voor servicemedewerkers
Dus wat laten servicemedewerkers je precies doen? Met servicemedewerkers kunt u kenmerken die kenmerkend zijn voor native apps aan uw webtoepassing toevoegen. Ze kunnen ook een normale ervaring bieden op apparaten die geen ondersteuning bieden aan servicemedewerkers. Dergelijke apps worden soms genoemd Progressive Web Apps (PWA's).
Hier zijn enkele van de functies die servicemedewerkers mogelijk maken:
- De gebruiker de app (of in ieder geval delen ervan) laten blijven gebruiken wanneer ze niet langer verbonden zijn met internet. Servicemedewerkers bereiken dit door in het cachegeheugen opgeslagen activa te leveren als reactie op verzoeken.
- In op Chromium gebaseerde browsers is een servicemedewerker een van de vereisten om een web-app te installeren.
- Servicemedewerkers zijn nodig om uw webapplicatie pushnotificaties te laten implementeren.
De levenscyclus van een servicemedewerker
Servicemedewerkers kunnen verzoeken voor een hele site beheren, of slechts een deel van de pagina's van de site. Een bepaalde webpagina kan slechts één actieve servicemedewerker hebben en alle servicemedewerkers hebben een op gebeurtenissen gebaseerde levenscyclus. De levenscyclus van een servicemedewerker ziet er over het algemeen als volgt uit:
- Registratie en downloaden van de werknemer. Het leven van een servicemedewerker begint wanneer een JavaScript-bestand het registreert. Als de registratie is gelukt, wordt de servicemedewerker gedownload en wordt deze uitgevoerd in een speciale thread.
- Wanneer een door de servicemedewerker beheerde pagina wordt geladen, ontvangt de servicemedewerker een 'install'-gebeurtenis. Dit is altijd de eerste gebeurtenis die een servicemedewerker ontvangt en u kunt binnen de medewerker een listener voor deze gebeurtenis instellen. De gebeurtenis 'install' wordt over het algemeen gebruikt om resources op te halen en/of te cachen die de servicemedewerker nodig heeft.
- Nadat de servicemedewerker klaar is met installeren, ontvangt deze een 'activeren'-gebeurtenis. Met deze gebeurtenis kan de werknemer overtollige resources opschonen die door eerdere servicemedewerkers zijn gebruikt. Als u een servicemedewerker bijwerkt, wordt de activatiegebeurtenis alleen geactiveerd als dit veilig kan. Dit is zodra er geen geladen pagina's zijn die nog de oude versie van de servicemedewerker gebruiken.
- Daarna heeft de servicemedewerker volledige controle over alle pagina's die zijn geladen nadat deze met succes is geregistreerd.
- De laatste fase van de levenscyclus is redundantie, die optreedt wanneer de servicemedewerker wordt verwijderd of vervangen door een nieuwere versie.
Servicemedewerkers gebruiken in JavaScript
De Service Worker-API (MDN) biedt de interface waarmee u servicemedewerkers in JavaScript kunt maken en ermee kunt communiceren.
Servicemedewerkers behandelen voornamelijk netwerkverzoeken en andere asynchrone gebeurtenissen. Als gevolg hiervan maakt de service worker-API intensief gebruik van: Beloften en asynchrone programmering.
Om een servicemedewerker aan te maken, is het eerste wat u hoeft te doen de navigator.serviceWorker.register() methode. Hier is hoe dat eruit zou kunnen zien:
als ('servicewerker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(functie(registratie){
console.log('Registratie van servicemedewerker geslaagd:', registratie);
}).catch((fout) => { console.log('Registratie van servicemedewerker mislukt:', fout); });
} anders {
console.log('Servicemedewerkers worden niet ondersteund.');
}
Het buitenste if-blok voert functiedetectie uit. Het zorgt ervoor dat servicemedewerker-gerelateerde code alleen wordt uitgevoerd in browsers die servicemedewerkers ondersteunen.
Vervolgens roept de code de register methode. Het geeft het pad door aan de servicemedewerker (ten opzichte van de oorsprong van de site) om het te registreren en te downloaden. De register methode accepteert ook een optionele parameter met de naam scope, die kan worden gebruikt om de pagina's te beperken die door de werknemer worden beheerd. Servicemedewerkers beheren standaard alle pagina's van een toepassing. De register methode retourneert een belofte die aangeeft of de registratie is geslaagd.
Als de belofte wordt opgelost, heeft de servicemedewerker zich succesvol geregistreerd. De code drukt vervolgens een object af dat de geregistreerde servicemedewerker vertegenwoordigt naar de console.
Als het registratieproces mislukt, vangt de code de fout op en logt deze in de console.
Hierna volgt een vereenvoudigd voorbeeld van hoe de servicemedewerker er zelf uit zou kunnen zien:
self.addEventListener('installeren', (gebeurtenis) => {
evenement.wachtTot(nieuweBelofte((oplossen, afwijzen) => {
console.log("setup dingen doen")
oplossen()
}))
console.log("Servicemedewerker klaar met installeren")
})self.addEventListener('activeren', (gebeurtenis) => {
evenement.wachtTot(nieuweBelofte((oplossen, afwijzen) => {
console.log("opruimen doen!")
oplossen()
}))
console.log('activatie gedaan!')
})
self.addEventListener('ophalen', (gebeurtenis) => {
console.log("Verzoek onderschept", evenement)
});
Deze demo-servicemedewerker heeft drie gebeurtenislisteners die tegen zichzelf zijn geregistreerd. Het heeft er een voor de 'install'-gebeurtenis, de 'activate'-gebeurtenis en de 'fetch'-gebeurtenis.
Binnen de eerste twee luisteraars gebruikt de code de wacht totdat methode. Deze methode accepteert een belofte. Het is zijn taak om ervoor te zorgen dat de servicemedewerker wacht tot de belofte is opgelost of afgewezen voordat hij doorgaat naar het volgende evenement.
De fetch-listener wordt geactiveerd wanneer er een aanvraag wordt gedaan voor een resource die door de servicemedewerker wordt beheerd.
De resources die door een servicemedewerker worden beheerd, omvatten alle pagina's die hij beheert, evenals alle activa waarnaar op die pagina's wordt verwezen.
Verbeter uw web-apps met servicemedewerkers
Servicemedewerkers zijn een speciaal soort webwerker die een uniek doel dienen. Ze zitten voor netwerkverzoeken om functies zoals offline app-toegang in te schakelen. Het gebruik van servicemedewerkers in een webtoepassing kan de gebruikerservaring enorm verbeteren. U kunt servicemedewerkers maken en met hen communiceren met behulp van de servicemedewerker-API.
