Registrere en Service Worker
Installer og aktiver en service worker.
Registrere en Service Worker er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva er en service worker?
En service worker er et skript som nettleseren kjører i bakgrunnen, separat fra siden. Den fungerer som en programmerbar nettverksproxy: Den kan fange opp forespørsler, levere bufrede svar og muliggjøre bruk uten nett.
Funksjonsdeteksjon
Ikke alle miljøer støtter service workers. Kontroller navigator.serviceWorker før registrering, slik at eldre nettlesere håndterer manglende støtte på en god måte.
if ('serviceWorker' in navigator) {
// safe to register
}Registrere
Registrer en service worker ved å sende URL-en til skriptet til navigator.serviceWorker.register. Metoden returnerer et Promise som oppfylles med registreringsobjektet.
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));Registreringens virkeområde
Virkeområdet er mengden URL-er som workeren kontrollerer. Som standard er det katalogen skriptet ligger i. En worker på /sw.js kontrollerer hele nettstedet, mens en på /app/sw.js bare kontrollerer /app/.
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.Angi et eksplisitt virkeområde
De kan begrense virkeområdet med et alternativ, men De kan ikke utvide det til å omfatte mer enn skriptets katalog uten at en spesiell topptekst angis på serveren.
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});Krav om HTTPS
Service workers krever en sikker kontekst: HTTPS i produksjon. localhost regnes som sikker under utvikling. Dette hindrer angripere i å kapre nettverksproxyen.
Hendelsen install
Første gang en worker registreres, kjører den hendelsen install. Det er her De vanligvis forhåndslagrer viktige ressurser, slik at appen fungerer uten nett.
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});Hendelsen activate
Etter installering utløser workeren activate. Her kan De rydde opp i gamle cacher fra tidligere versjoner før workeren begynner å kontrollere sider.
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});Livssyklusen
En service worker går gjennom følgende tilstander:
- installing — kjører installasjonsbehandleren
- installed/waiting — klar, men venter på å overta
- activating / activated — kontrollerer nå sider
Som standard venter en ny worker med å aktiveres til gamle sider er lukket.
Fange opp forespørsler
Når workeren er aktiv, mottar den alle nettverksforespørsler fra virkeområdet sitt gjennom hendelsen fetch. De kan svare fra cache, fra nettverket eller fra en kombinasjon av begge.
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});Oppsummering av registrering
Registrering av en service worker innebærer å kontrollere funksjonsstøtte, kalle register med en skript-URL, ta hensyn til virkeområdet og HTTPS-kravet, og håndtere hendelsene install, activate og fetch i workerskriptet.
Hurtigsjekk
Test forståelsen Deres av hvordan en service worker registreres.
Oppsummering
De har lært å registrere en service worker:
- Kontroller funksjonsstøtte med
'serviceWorker' in navigator. register(url, { scope })returnerer et Promise.- Virkeområdet er som standard skriptets katalog, og HTTPS kreves.
- Håndter
install,activateogfetchi workeren.
Deretter skal vi se på Cache API.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Registrere en Service Worker» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Registrere en Service Worker», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Registrere en Service Worker»?
Installer og aktiver en service worker. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Registrere en Service Worker»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Registrere en Service Worker
- Cache-API-et
- Strategier for hurtigbufring
- Synkronisering og oppdateringer i bakgrunnen