Har du nogensinde spekuleret på, hvordan nogle websteder ser ud til at blive ved med at fungere, selv når du er offline? Hemmeligheden er enkel: Disse websteder har servicemedarbejdere.
Servicemedarbejdere er nøgleteknologien bag mange af de native app-lignende funktioner i moderne webapplikationer.
Hvad er servicemedarbejdere?
Servicemedarbejdere er en specialiseret type JavaScript-webarbejdere. En service worker er en JavaScript-fil, der fungerer lidt som en proxy-server. Det fanger udgående netværksanmodninger fra din applikation, så du kan oprette tilpassede svar. Du kan for eksempel vise cachelagrede filer til brugeren, når de er offline.
Servicemedarbejdere lader dig også tilføje funktioner som baggrundssynkronisering til dine webapplikationer.
Hvorfor servicemedarbejdere?
Webudviklere har i lang tid forsøgt at udvide mulighederne for deres apps. Før der kom servicearbejdere, kunne man bruge forskellige løsninger til at gøre dette muligt. En særlig bemærkelsesværdig var AppCache, som gjorde cache-ressourcer praktiske. Desværre havde det problemer, der gjorde det til en upraktisk løsning for de fleste apps.
AppCache så ud til at være en god idé, fordi det gav dig mulighed for at specificere aktiver til cache virkelig nemt. Den lavede dog mange antagelser om, hvad du forsøgte at gøre, og gik så grueligt i stykker, da din app ikke fulgte disse antagelser nøjagtigt. Læs Jake Archibald's (desværre med titlen, men velskrevet) Application Cache er en Douchebag for flere detaljer. (Kilde: MDN)
Servicemedarbejdere er det nuværende forsøg på at reducere begrænsningerne ved webapps uden ulemperne ved teknologi som AppCache.
Use Cases for Service Workers
Så hvad lader servicemedarbejdere dig gøre? Servicemedarbejdere giver dig mulighed for at tilføje funktioner, der er karakteristiske for native apps, til din webapplikation. De kan også give en normal oplevelse på enheder, der ikke understøtter servicemedarbejdere. Apps som denne kaldes nogle gange Progressive Web Apps (PWA'er).
Her er nogle af de funktioner, servicemedarbejdere gør mulige:
- At lade brugeren blive ved med at bruge appen (eller i det mindste dele af den), når de ikke længere er forbundet til internettet. Servicemedarbejdere opnår dette ved at betjene cachelagrede aktiver som svar på anmodninger.
- I Chromium-baserede browsere er en servicemedarbejder et af kravene for, at en webapp kan installeres.
- Servicemedarbejdere er nødvendige for, at din webapplikation kan implementere push-meddelelser.
En servicemedarbejders livscyklus
Servicemedarbejdere kan kontrollere anmodninger for et helt websted eller kun en del af webstedets sider. En bestemt webside kan kun have én aktiv servicemedarbejder, og alle servicemedarbejdere har en hændelsesbaseret livscyklus. En servicemedarbejders livscyklus ser generelt sådan ud:
- Registrering og download af arbejderen. En servicemedarbejders levetid starter, når en JavaScript-fil registrerer den. Hvis registreringen lykkes, downloader servicearbejderen og begynder derefter at køre i en speciel tråd.
- Når en side, der styres af servicearbejderen, indlæses, modtager servicearbejderen en 'installer'-hændelse. Dette er altid den første begivenhed, en servicemedarbejder modtager, og du kan konfigurere en lytter til denne begivenhed inde i arbejderen. 'install'-hændelsen bruges generelt til at hente og/eller cache de ressourcer, som servicemedarbejderen har brug for.
- Når servicemedarbejderen er færdig med at installere, modtager den en "aktiver"-hændelse. Denne hændelse gør det muligt for arbejderen at rydde op i overflødige ressourcer brugt af tidligere servicemedarbejdere. Hvis du opdaterer en servicemedarbejder, udløses aktiveringshændelsen kun, når det er sikkert at gøre dette. Dette er, når der ikke er nogen indlæste sider, der stadig bruger den gamle version af serviceworkeren.
- Derefter har servicemedarbejderen fuld kontrol over alle sider, der blev indlæst, efter at den blev registreret.
- Den sidste fase af livscyklussen er redundans, som opstår, når servicemedarbejderen fjernes eller erstattes af en nyere version.
Sådan bruges Service Workers i JavaScript
Service Worker API (MDN) giver den grænseflade, der giver dig mulighed for at oprette og interagere med servicemedarbejdere i JavaScript.
Servicemedarbejdere beskæftiger sig primært med netværksanmodninger og andre asynkrone hændelser. Som et resultat gør service worker API'en stor brug af Løfter og asynkron programmering.
For at oprette en servicemedarbejder er den første ting, du skal gøre, at ringe til navigator.serviceWorker.register() metode. Sådan kan det se ud:
hvis ('servicearbejder' i navigator) {
navigator.serviceWorker.register('/sw.js').then(fungere(tilmelding){
console.log('Servicemedarbejderregistreringen lykkedes:', registrering);
}).catch((fejl) => { console.log('Servicemedarbejderregistrering mislykkedes:', fejl); });
} andet {
console.log('Servicemedarbejdere understøttes ikke.');
}
Den yderste if-blok udfører funktionsdetektion. Det sikrer, at servicearbejderrelateret kode kun kører på browsere, der understøtter servicearbejdere.
Dernæst kalder koden for Tilmeld metode. Den sender stien videre til servicemedarbejderen (i forhold til webstedets oprindelse) for at registrere og downloade den. Det Tilmeld metoden accepterer også en valgfri parameter kaldet scope, som kan bruges til at begrænse de sider, der kontrolleres af arbejderen. Servicemedarbejdere kontrollerer som standard alle en applikations sider. Det Tilmeld metoden returnerer et løfte, der angiver, om registreringen lykkedes.
Hvis løftet løser sig, registrerede servicemedarbejderen sig. Koden udskriver derefter et objekt, der repræsenterer den registrerede servicemedarbejder, til konsollen.
Hvis registreringsprocessen mislykkes, fanger koden fejlen og logger den til konsollen.
Dernæst er her et forenklet eksempel på, hvordan selve servicemedarbejderen kan se ud:
self.addEventListener('installere', (begivenhed) => {
event.waitUntil(nyLøfte((afgør, afvis) => {
console.log("laver opsætningsting")
beslutte()
}))
console.log("Servicemedarbejder er færdig med at installere")
})self.addEventListener('aktivere', (begivenhed) => {
event.waitUntil(nyLøfte((afgør, afvis) => {
console.log("laver oprydningsting!")
beslutte()
}))
console.log('aktivering udført!')
})
self.addEventListener('hente', (begivenhed) => {
console.log("Anmodning aflyttet", begivenhed)
});
Denne demoservicemedarbejder har tre begivenhedslyttere, der er registreret mod sig selv. Den har en for 'install'-hændelsen, 'activate'-hændelsen og 'fetch'-hændelsen.
Inde i de to første lyttere bruger koden vent indtil metode. Denne metode accepterer et løfte. Dens opgave er at sikre, at servicemedarbejderen venter på, at løftet løses eller afvises, før han går videre til den næste begivenhed.
Hent-lytteren udløses, når der fremsættes en anmodning om en ressource, som servicearbejderen kontrollerer.
De ressourcer, der kontrolleres af en servicemedarbejder, omfatter alle de sider, den kontrollerer, såvel som alle aktiver, der henvises til på disse sider.
Forbedre dine webapps med servicearbejdere
Servicemedarbejdere er en særlig form for webarbejder, der tjener et unikt formål. De sidder foran netværksanmodninger for at aktivere funktioner som offline app-adgang. Brug af servicemedarbejdere i en webapplikation kan forbedre brugeroplevelsen betydeligt. Du kan oprette service workers og interagere med dem ved hjælp af service worker API.
