Lägg till funktionalitet med Service Workers
W3C har skrivit en specifikation som heter Service Workers. Det är ett sätt att köra script i webbläsaren på ett nytt sätt. Det innbär bland annat att de Service Workers som körs inte har tillgång till DOM:en utan måste stå på egna ben. Det kan vara lite lurigt att förstå vad det innebär, men häng med så tittar vi på det här.
Service Workers använder sig i stor utsträckning av en ny funktion i JavaScript som heter Promises vilket kan vara lite lurigt om du inte arbetat med det innan. Det finns en massa personer som både kan mer om detta, och förklarar det bättre än vad jag gör. Jag kan bland annat kan jag rekommendera artikeln ”JavaScript Promises - There and back again” på Googles projekt html5rocks.com samt artikeln ”ES6 Promises in Depth” på Pony Foo. Har du inte hört talas om Promises förut, så börja där…
För att använda en Service Worker så måste du köra via https, men kan även testa dina workers på http://localhost.
Webbläsarstöd
Idag, när denna artikeln skrivs, har Service Workers stöd i senare versioner av Chrome och Opera. Förhoppningsvis följer de andra webbläsarna efter så fort som möjligt.
Det fina är däremot att den funktionalitet som man bygger med hjälp av Service Workers är förbättringar och tillägg till den redan fungerade webbplatsen eller webbtjänsten, så det är helt ok att det inte fungerar överallt med en gång.
Du kan alltså börja dra nytta av Service Workers nu, de som har stöd för funktionerna får nytta av dem meden de som inte har stöd ännu kan använda webbsidan precis som innan.
En uppdaterad bild av hur det ser ut finns på Is Service Worker ready?
Inspektera alla Service Workers som installerats
Nyfiken på vilka Service Workers som installerats och körs?
I Chrome kan du skriva in chrome://inspect/#service-workers i adressfältet för att få upp en lista med vilka script som körs, du kan inspektera dessa samt ta bort de du inte vill ha. Utvecklar du i Opera så är det browser://serviceworker-internals som gäller istället.
Du kan också hitta dessa i vanliga Dev Tools (under Resources) i Chrome Canary och Opera Beta vilket tyder på att det är där de kommer landa i de vanliga versionerna framöver också.
Olika design patterns för Service Workers
Jake Archibald på Google Chrome har satt ihop en sida med ”recept” på små design patterns som man kan använda sig av när man skriver kod för Service Workers.
- Cache only
- Network only
- Cache, falling back to network
- Cache & network race
- Network falling back to cache
- Cache then network
- Generic fallback
- ServiceWorker-side templating
Det kan vara bra att läsa igenom dessa då de ofta används av de som skriver om Service Workers.
Ett första exempel
I artikeln ”My first Service Worker” beskriver Jeremy Keith sitt första script som körs som Service Worker. Ett lättläst och bra exempel att börja med om ni är intresserade. Jeremys serviceworkers.js finns även publicerad som en Gist på Github under Public Domain-licens om ni vill ha ett fungerande exempel att börja med.