Registrera en Service Worker
Installera och aktivera en service worker.
Registrera en Service Worker är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är en service worker?
En service worker är ett skript som webbläsaren kör i bakgrunden, separat från sidan. Den fungerar som en programmerbar nätverksproxy: den kan fånga upp förfrågningar, leverera cachade svar och möjliggöra funktioner utan nätanslutning.
Funktionsdetektering
Alla miljöer stöder inte service workers. Kontrollera om navigator.serviceWorker finns innan ni registrerar en service worker, så att äldre webbläsare fortsätter fungera med begränsad funktionalitet.
if ('serviceWorker' in navigator) {
// safe to register
}Registrera en service worker
Registrera en service worker genom att skicka dess skript-URL till navigator.serviceWorker.register. Det returnerar ett Promise som löses till registreringsobjektet.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Registreringsscope
scope är mängden URL:er som workern styr över. Som standard är det katalogen där skriptet finns. En worker på /sw.js styr över hela webbplatsen, medan en på /app/sw.js endast styr över /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Ange ett uttryckligt scope
Ni kan begränsa scope med ett alternativ, men ni kan inte utöka det utanför skriptets katalog om inte en särskild header har angetts på servern.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Krav på HTTPS
Service workers kräver en säker kontext: HTTPS i produktion. localhost betraktas som säkert under utveckling. Det hindrar angripare från att kapa nätverksproxyn.
Eventet install
Första gången en worker registreras körs dess install-event. Här förhandslagrar ni vanligtvis viktiga resurser i cachen, så att appen fungerar utan nätanslutning.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});Eventet activate
Efter installationen utlöser workern activate. Här rensar ni vanligtvis bort gamla cachar från tidigare versioner innan workern börjar styra över sidor.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});Livscykeln
En service worker går igenom följande tillstånd:
- installing — kör installationshanteraren
- installed/waiting — klar och väntar på att ta över
- activating / activated — styr nu över sidor
Som standard väntar en ny worker tills gamla sidor stängs innan den aktiveras.
Fånga upp förfrågningar
När workern är aktiv tar den emot alla nätverksförfrågningar inom sitt scope via fetch-eventet. Ni kan svara från cachen, nätverket eller en kombination av båda.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Sammanfattning av registrering
Så registrerar ni en service worker: kontrollera funktionaliteten, anropa register med en skript-URL, ta hänsyn till scope och kravet på HTTPS och hantera eventen install, activate och fetch i workerskriptet.
Snabbtest
Testa er förståelse av hur en service worker registreras.
Sammanfattning
Ni har lärt er att registrera en service worker:
- Kontrollera funktionaliteten med
'serviceWorker' in navigator. register(url, { scope })returnerar ett Promise.- Scope är som standard skriptets katalog; HTTPS krävs.
- Hantera
install,activateochfetchi workern.
Nästa steg är Cache API.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Registrera en Service Worker” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Registrera en Service Worker”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Registrera en Service Worker”?
Installera och aktivera en service worker. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Registrera en Service Worker”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Registrera en Service Worker
- Cache-API:t
- Cachningsstrategier
- Bakgrundssynkronisering och uppdateringar