Har du noen gang lurt på hvordan enkelte nettsteder ser ut til å fortsette å fungere selv når du er frakoblet? Hemmeligheten er enkel: disse nettstedene har servicearbeidere.

Tjenestearbeidere er nøkkelteknologien bak mange av de native app-lignende funksjonene til moderne nettapplikasjoner.

Hva er servicearbeidere?

Servicearbeidere er en spesialisert type JavaScript-nettarbeidere. En servicearbeider er en JavaScript-fil som fungerer litt som en proxy-server. Den fanger opp utgående nettverksforespørsler fra applikasjonen din, og lar deg lage tilpassede svar. Du kan for eksempel vise bufrede filer til brukeren når de er frakoblet.

Servicearbeidere lar deg også legge til funksjoner som bakgrunnssynkronisering til nettapplikasjonene dine.

Hvorfor servicearbeidere?

Nettutviklere har prøvd å utvide mulighetene til appene sine i lang tid. Før det kom servicearbeidere kunne man bruke ulike løsninger for å gjøre dette mulig. En spesielt bemerkelsesverdig var AppCache, som gjorde caching-ressurser praktisk. Dessverre hadde den problemer som gjorde det til en upraktisk løsning for de fleste apper.

instagram viewer

AppCache så ut til å være en god idé fordi den tillot deg å spesifisere eiendeler for å cache veldig enkelt. Den gjorde imidlertid mange antagelser om hva du prøvde å gjøre, og brøt så fryktelig når appen din ikke fulgte disse antakelsene nøyaktig. Les Jake Archibalds (dessverre tittel, men velskrevet) Application Cache er en Douchebag for flere detaljer. (Kilde: MDN)

Tjenestearbeidere er det nåværende forsøket på å redusere begrensningene til nettapper, uten ulempene med teknologi som AppCache.

Brukssaker for servicearbeidere

Så hva lar servicearbeidere deg gjøre? Tjenestearbeidere lar deg legge til funksjoner som er karakteristiske for native apper til nettapplikasjonen din. De kan også gi en normal opplevelse på enheter som ikke støtter servicearbeidere. Apper som dette kalles noen ganger Progressive Web Apps (PWA).

Her er noen av funksjonene servicearbeidere gjør mulig:

  • La brukeren fortsette å bruke appen (eller i det minste deler av den) når de ikke lenger er koblet til internett. Tjenestearbeidere oppnår dette ved å betjene bufrede ressurser som svar på forespørsler.
  • I Chromium-baserte nettlesere er en tjenestearbeider et av kravene for at en nettapp skal kunne installeres.
  • Tjenestearbeidere er nødvendige for at nettapplikasjonen din skal kunne implementere push-varsler.

Livssyklusen til en servicearbeider

Tjenestearbeidere kan kontrollere forespørsler for et helt nettsted, eller bare en del av nettstedets sider. En bestemt nettside kan bare ha én aktiv tjenestearbeider, og alle tjenestearbeidere har en hendelsesbasert livssyklus. Livssyklusen til en servicearbeider ser vanligvis slik ut:

  1. Registrering og nedlasting av arbeideren. Livet til en tjenestearbeider starter når en JavaScript-fil registrerer den. Hvis registreringen er vellykket, laster tjenestearbeideren ned og begynner deretter å kjøre i en spesiell tråd.
  2. Når en side kontrollert av servicearbeideren lastes inn, mottar servicearbeideren en "installer"-hendelse. Dette er alltid den første hendelsen en servicemedarbeider mottar, og du kan sette opp en lytter for denne hendelsen inne i arbeideren. "Installer"-hendelsen brukes vanligvis til å hente og/eller bufre alle ressurser tjenestearbeideren trenger.
  3. Etter at servicearbeideren er ferdig med installasjonen, mottar den en "aktiver"-hendelse. Denne hendelsen lar arbeideren rydde opp i overflødige ressurser brukt av tidligere servicearbeidere. Hvis du oppdaterer en servicearbeider, vil aktiveringshendelsen bare utløses når det er trygt å gjøre dette. Dette er når det ikke er noen nedlastede sider som fortsatt bruker den gamle versjonen av tjenestearbeideren.
  4. Etter det har servicearbeideren full kontroll over alle sidene som ble lastet etter at den ble registrert.
  5. Den siste fasen av livssyklusen er redundans, som oppstår når servicearbeideren fjernes eller erstattes av en nyere versjon.

Slik bruker du Service Workers i JavaScript

Service Worker API (MDN) gir grensesnittet som lar deg opprette og samhandle med tjenestearbeidere i JavaScript.

Tjenestearbeidere håndterer først og fremst nettverksforespørsler og andre asynkrone hendelser. Som et resultat bruker service worker API mye Løfter og asynkron programmering.

For å opprette en servicearbeider er det første du må gjøre å ringe navigator.serviceWorker.register() metode. Slik kan det se ut:

hvis ('servicearbeider' i navigator) {
 navigator.serviceWorker.register('/sw.js').then(funksjon(registrering){
 console.log('Registrering av servicearbeidere lyktes:', registrering);
 }).catch((feil) => { console.log('Registrering av servicearbeider mislyktes:', feil); });
} ellers {
 console.log('Tjenestearbeidere støttes ikke.');
}

Den ytterste hvis-blokken utfører funksjonsdeteksjon. Det sikrer at tjenestearbeiderrelatert kode bare kjøres på nettlesere som støtter tjenestearbeidere.

Deretter kaller koden registrere metode. Den sender den veien til servicearbeideren (i forhold til nettstedets opprinnelse) for å registrere og laste den ned. De registrere metoden aksepterer også en valgfri parameter kalt scope, som kan brukes til å begrense sidene kontrollert av arbeideren. Tjenestearbeidere kontrollerer alle sidene til en applikasjon som standard. De registrere metoden returnerer et løfte som indikerer om registreringen var vellykket.

Hvis løftet løser seg, har servicearbeideren registrert seg. Koden skriver deretter ut et objekt som representerer den registrerte servicearbeideren til konsollen.

Hvis registreringsprosessen mislykkes, fanger koden opp feilen og logger den til konsollen.

Her er et forenklet eksempel på hvordan selve servicearbeideren kan se ut:

self.addEventListener('installere', (hendelse) => {
 event.waitUntil(nyLove((løse, avvise) => {
 console.log("gjør oppsett ting")
 Løse()
 }))
 console.log("Servicemedarbeider er ferdig med installasjonen")
})
self.addEventListener('aktivere', (hendelse) => {
 event.waitUntil(nyLove((løse, avvise) => {
 console.log("gjør opprydningsting!")
 Løse()
 }))
 console.log('aktivering utført!')
})
self.addEventListener('hente', (hendelse) => {
 console.log("Forespørsel avlyttet", begivenhet)
});

Denne demotjenestearbeideren har tre hendelseslyttere, registrert mot seg selv. Den har en for 'install'-hendelsen, 'aktiver'-hendelsen og 'hent'-hendelsen.

Inne i de to første lytterne bruker koden vent til metode. Denne metoden aksepterer et løfte. Dens jobb er å sørge for at servicearbeideren vil vente på at løftet løses eller avvises før han går videre til neste arrangement.

Hentelytteren utløses hver gang det sendes en forespørsel om en ressurs tjenestearbeideren kontrollerer.

Ressursene som kontrolleres av en servicearbeider inkluderer alle sidene den kontrollerer, så vel som alle eiendeler det refereres til på disse sidene.

Forbedre webappene dine med servicearbeidere

Tjenestearbeidere er en spesiell type nettarbeider som tjener et unikt formål. De sitter foran nettverksforespørsler for å aktivere funksjoner som offline app-tilgang. Å bruke servicearbeidere i en nettapplikasjon kan forbedre brukeropplevelsen betydelig. Du kan opprette service workers og samhandle med dem ved å bruke service worker API.