Skip to content

Republic / Artiklar /

Artikeln uppdaterad 2020-05-26.
Skriven av Christofer Sandin.

Lägg till funk­tion­alitet med Ser­vice Workers

W3C har skriv­it en speci­fika­tion som het­er Ser­vice Work­ers. Det är ett sätt att köra script i web­bläsaren på ett nytt sätt. Det innbär bland annat att de Ser­vice Work­ers som körs inte har till­gå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å tit­tar vi på det här.

Ser­vice Work­ers använ­der sig i stor utsträck­n­ing av en ny funk­tion i JavaScript som het­er Promis­es vilket kan vara lite lurigt om du inte arbe­tat med det innan. Det finns en mas­sa per­son­er som både kan mer om det­ta, och förk­larar det bät­tre än vad jag gör. Jag kan bland annat kan jag rek­om­mendera artikeln JavaScript Promis­es — There and back again” på Googles pro­jekt htm​l5rocks​.com samt artikeln ES6 Promis­es in Depth” på Pony Foo. Har du inte hört talas om Promis­es förut, så bör­ja där…

För att använ­da en Ser­vice Work­er så måste du köra via https, men kan även tes­ta dina work­ers på http://localhost.

Web­bläsarstöd

Idag, när den­na artikeln skrivs, har Ser­vice Work­ers stöd i senare ver­sion­er av Chrome och Opera. Förhopp­n­ingsvis föl­jer de andra web­bläsar­na efter så fort som möjligt.

Det fina är däre­mot att den funk­tion­alitet som man byg­ger med hjälp av Ser­vice Work­ers är för­bät­tringar och tillägg till den redan funger­ade webb­plat­sen eller webbtjän­sten, så det är helt ok att det inte funger­ar över­allt med en gång. 

Du kan allt­så bör­ja dra nyt­ta av Ser­vice Work­ers nu, de som har stöd för funk­tion­er­na får nyt­ta av dem meden de som inte har stöd ännu kan använ­da webb­si­dan pré­cis som innan.

En upp­dat­er­ad bild av hur det ser ut finns på Is Ser­vice Work­er ready?

Inspek­tera alla Ser­vice Work­ers som installerats

Nyfiken på vil­ka Ser­vice Work­ers som installer­ats och körs? 

I Chrome kan du skri­va in chrome://inspect/#service-workers i adress­fäl­tet för att få upp en lista med vil­ka script som körs, du kan inspek­tera dessa samt ta bort de du inte vill ha. Utveck­lar du i Opera så är det browser://serviceworker-internals som gäller istället.

Du kan ock­så hit­ta dessa i van­li­ga Dev Tools (under Resources) i Chrome Canary och Opera Beta vilket tyder på att det är där de kom­mer lan­da i de van­li­ga ver­sion­er­na framöver också.

Oli­ka design pat­terns för Ser­vice Workers

Jake Archibald på Google Chrome har satt ihop en sida med recept” på små design pat­terns som man kan använ­da sig av när man skriv­er kod för Ser­vice Workers. 

Det kan vara bra att läsa igenom dessa då de ofta används av de som skriv­er om Ser­vice Workers.

Ett förs­ta exempel

I artikeln My first Ser­vice Work­er” beskriv­er Jere­my Kei­th sitt förs­ta script som körs som Ser­vice Work­er. Ett lät­tläst och bra exem­pel att bör­ja med om ni är intresser­ade. Jere­mys serviceworkers.js finns även pub­licer­ad som en Gist på Github under Pub­lic Domain-licens om ni vill ha ett fungerande exem­pel att bör­ja med.