Tjenestearbeidere er små programmer som kjører i bakgrunnen og gir moderne nettapplikasjoner avanserte funksjoner for hurtigbufring og andre forbedringer.
Disse funksjonene bidrar til en brukervennlig og smidig opplevelse som ligner på native mobilapper, men direkte i nettleseren.
Tjenestearbeidere er en essensiell del av teknologien bak progressive webapper (PWA).
Forstå tjenestearbeidere
En tjenestearbeider er i bunn og grunn en spesiell type JavaScript-nettarbeider som opererer i bakgrunnen, separat fra hovedtråden i JavaScript. Dette forhindrer at den blokkerer eller forsinker applikasjonens brukergrensesnitt eller brukerens samhandling med den.
Tjenestearbeidere fungerer som mellomledd eller proxy-servere, og posisjonerer seg mellom nettapplikasjonen og nettverket. De kan fange opp forespørsler og svar, lagre ressurser midlertidig (hurtigbufring) og muliggjøre offline-funksjonalitet. Dette bidrar til en mer jevn og brukervennlig opplevelse, selv når brukeren ikke er tilkoblet internett.
Viktige bruksområder for tjenestearbeidere
Tjenestearbeidere har flere bruksområder, inkludert:
- PWAer: De utgjør kjernen i progressive webapper ved å håndtere tilpassede nettverksforespørsler, pushvarsler, offline-modus og rask lasting.
- Hurtigbufring: Tjenestearbeidere kan lagre applikasjonens filer – som bilder, JavaScript-kode og CSS-filer – i nettleserens lagring. Dette tillater nettleseren å laste inn disse filene fra hurtigbufferen istedenfor å hente dem fra serveren over nettverket. Dette resulterer i raskere lasting av innhold, noe som er spesielt fordelaktig for brukere med dårlig eller ustabil internettforbindelse.
- Bakgrunnssynkronisering: Tjenestearbeidere kan synkronisere data og utføre andre oppgaver i bakgrunnen, selv når brukeren ikke aktivt bruker applikasjonen eller når applikasjonen ikke er åpen i nettleseren.
Integrere tjenestearbeidere i Next.js-applikasjoner
Før man starter med kodingen, er det nyttig å forstå hvordan tjenestearbeidere opererer. Det er to hovedfaser i bruken av dem: registrering og aktivering.
I den første fasen, registreringen, gjenkjenner nettleseren tjenestearbeideren. Her er et grunnleggende eksempel:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};
registerServiceWorker();
Koden sjekker om nettleseren støtter tjenestearbeidere, noe som er tilfelle i alle moderne nettlesere. Hvis støtten er til stede, fortsetter den med å registrere en tjenestearbeider som ligger i den angitte filbanen.
I aktiveringsfasen må en tjenestearbeider installeres og aktiveres ved å lytte til installasjons- og aktiveringshendelsene ved hjelp av JavaScript-hendelseslyttere. Slik kan dette gjøres:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Denne koden kan legges til rett etter registreringsprosessen. Den vil kjøre umiddelbart etter at registreringen av tjenestearbeideren er fullført.
Koden til dette prosjektet er tilgjengelig på GitHub.
Opprette et Next.js-prosjekt
For å starte, bruk følgende kommando for å sette opp et nytt Next.js-prosjekt lokalt:
npx create-next-app next-project
For å legge til en tjenestearbeider i en Next.js-applikasjon, må du følge disse stegene:
Legge til en tjenestearbeider
Først må du registrere tjenestearbeideren. Oppdater filen src/pages/_app.js med følgende kode. Ved å legge til koden i denne filen sikrer du at tjenestearbeideren registreres når applikasjonen laster, og at den har tilgang til alle applikasjonens ressurser.
import { useEffect } from 'react';
export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
UseEffect-hooken aktiveres når komponenten monteres. Som i forrige eksempel sjekker koden først om nettleseren støtter tjenestearbeidere.
Hvis støtten er til stede, registrerer koden tjenestearbeider-skriptet som befinner seg i den angitte filbanen, og definerer virkeområdet som «/». Dette betyr at tjenestearbeideren har kontroll over alle ressurser i applikasjonen. Om ønskelig, kan du angi et mer detaljert virkeområde, som for eksempel «/produkter».
Ved vellykket registrering vil en bekreftelsesmelding sammen med virkeområdet logges. Skulle det oppstå en feil under registreringen, fanges den opp og en feilmelding logges.
Installere og aktivere tjenestearbeideren
Legg til følgende kode i en ny fil som heter public/service-worker.js.
const installEvent = () => {
self.addEventListener('install', () => {
console.log('service worker installed!!!!');
});
};
installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('service worker activated!!!');
});
};
activateEvent();
For å sjekke om tjenestearbeideren er registrert, installert og aktivert, start utviklingsserveren og åpne applikasjonen i nettleseren.
npm run dev
Åpne utviklerverktøyene i Chrome (eller tilsvarende verktøy i din nettleser) og naviger til fanen «Applikasjon». I seksjonen for «Tjenestearbeidere» skal du se den tjenestearbeideren du har registrert.
Når tjenestearbeideren er registrert, installert og aktivert, kan du implementere ytterligere funksjoner, som for eksempel hurtigbufring, bakgrunnssynkronisering eller sending av pushvarsler.
Hurtigbufring av ressurser med tjenestearbeidere
Hurtigbufring av applikasjonsressurser på brukerens enhet kan øke ytelsen ved å gi raskere tilgang, spesielt i situasjoner med ustabil internettforbindelse.
For å hurtigbufre appens ressurser, legg til følgende kode i filen service-worker.js.
const cacheName="test-cache";
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Når en bruker besøker hjemmesiden for første gang, sjekker denne koden om det finnes et hurtigbufret svar for forespørselen. Hvis det finnes et slikt svar, leverer tjenesten det til klienten.
Hvis det ikke finnes et hurtigbufret svar, henter tjenestearbeideren ressursen fra serveren over nettverket. Deretter leverer den svaret til klienten og hurtigbufrer det for fremtidige forespørsler.
Du kan se de hurtigbufrede ressursene under fanen «Applikasjon» i utviklerverktøyene. Under seksjonen for «Lagring» skal du se en oversikt over de lagrede ressursene. Du kan også krysse av for «Frakoblet» i seksjonen for «Tjenestearbeidere» og laste inn siden på nytt for å simulere en frakoblet opplevelse.
Nå, når du besøker hjemmesiden, vil nettleseren benytte seg av de ressursene som er lagret i hurtigbufferen istedenfor å forsøke å sende nettverksforespørsler for å hente data.
Bruke tjenestearbeidere for å forbedre ytelsen
Tjenestearbeidere er et effektivt verktøy for å forbedre ytelsen til Next.js-apper. De kan lagre ressurser i hurtigbuffer, fange opp forespørsler og støtte offline-bruk, noe som samlet forbedrer brukeropplevelsen.
Det er viktig å huske at tjenestearbeidere kan være komplekse å implementere og administrere. Det er derfor nødvendig å nøye vurdere de potensielle fordelene og ulempene før de tas i bruk.