Tjenestearbeidere er skript som kjører i bakgrunnen for å gi kraftige hurtigbufferfunksjoner og andre funksjoner til moderne nettapplikasjoner.
Disse funksjonene bringer den sømløse og brukervennlige opplevelsen av native apper til nettleseren.
Tjenestearbeidere er en grunnleggende komponent i opprettelsen av progressive nettapper (PWA).
Innholdsfortegnelse
Forstå servicearbeidere
En tjenestearbeider er en type JavaScript-nettarbeider som kjører i bakgrunnen, atskilt fra JavaScript-hovedtråden, slik at den er ikke-blokkerende. Dette betyr at det ikke forårsaker forsinkelser eller avbrudd i applikasjonens brukergrensesnitt eller brukerens interaksjon med den.
Tjenestearbeidere fungerer som proxy-servere – de sitter mellom nettapplikasjoner og nettverket. De kan fange opp forespørsler og svar, hurtigbufre ressurser og gi offline-støtte. Dette bidrar til å sikre at nettapper føles mer sømløse og brukervennlige, selv når brukeren ikke er online.
Nøkkelapplikasjoner for servicearbeidere
Det finnes flere applikasjoner for servicearbeidere. De inkluderer:
- PWAer: Tjenestearbeidere gir stor kraft til progressive nettapper. De utfører tilpassede nettverksforespørsler, push-varsler, offline-støtte og rask lasting.
- Buffer: Tjenestearbeidere kan lagre applikasjonens eiendeler – bilder, JavaScript-kode og CSS-filer – i nettleserens hurtigbufferlagring. Dette lar nettleseren hente dem fra hurtigbufferen i stedet for å hente dem fra den eksterne serveren over nettverket. Som et resultat laster innholdet raskere, noe som er spesielt nyttig for brukere med trege eller upålitelige internettforbindelser.
- Bakgrunnssynkronisering: Tjenestearbeidere kan synkronisere data og kjøre andre bakgrunnsoppgaver, selv når brukeren ikke aktivt samhandler med applikasjonen eller når applikasjonen ikke er åpen i nettleseren.
Integrering av servicearbeidere i Next.js-applikasjoner
Før du dykker ned i koden, hjelper det å forstå hvordan servicearbeidere jobber. Det er to nøkkelfaser ved bruk av servicearbeidere: registrering og aktivering.
I den første fasen registrerer nettleseren tjenestearbeideren. Her er et enkelt eksempel:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
Koden sjekker først om nettleseren støtter servicearbeidere, noe alle moderne nettlesere gjør. Hvis denne støtten finnes, fortsetter den med å registrere en servicearbeider som befinner seg på den angitte filbanen.
I aktiveringsfasen må du installere og aktivere en servicearbeider ved å lytte til installerings- og aktiveringshendelsene ved å bruke JavaScript-hendelseslyttere. Slik kan du oppnå dette:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Du kan inkludere denne koden rett etter registreringsprosessen. Den skal kjøre rett etter at registreringsprosessen for tjenestearbeideren er vellykket.
Du kan finne dette prosjektets kode i sin GitHub oppbevaringssted.
Opprett et Next.js-prosjekt
For å komme i gang, kjør denne kommandoen for å stillas et Next.js-prosjekt lokalt:
npx create-next-app next-project
Å legge til en servicearbeider i en Next.js-applikasjon innebærer følgende trinn:
Legge til en servicearbeider
Registrer først en servicearbeider. Oppdater src/pages/_app.js-filen som følger. Inkludering av koden i denne filen sikrer at servicearbeideren registrerer når applikasjonen lastes og har tilgang til alle applikasjonens eiendeler.
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-kroken utløses når komponenten monteres. Som i forrige eksempel sjekker koden først om brukerens nettleser støtter servicearbeidere.
Hvis støtten finnes, registrerer den service worker-skriptet som ligger på den angitte filbanen, og spesifiserer omfanget som «/». Dette betyr at servicearbeideren har kontroll over alle ressursene i applikasjonen. Du kan gi et mer detaljert omfang hvis du vil, f.eks. «/produkter».
Hvis registreringen er vellykket, logger den en suksessmelding, sammen med omfanget. Hvis det oppstår en feil under registreringsprosessen, vil koden fange opp den og logge en feilmelding.
Installer og aktiver Service Worker
Legg til følgende kode i en ny fil, 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 å teste om tjenestearbeideren er vellykket registrert, installert og aktivert, start utviklingsserveren og åpne applikasjonen i nettleseren.
npm run dev
Åpne Chromes utviklerverktøy-vindu (eller nettleserens tilsvarende), og naviger til Applikasjonsfanen. Under Service Workers-delen skal du se servicearbeideren du har registrert.
Når tjenestearbeideren er registrert, installert og aktivert, kan du implementere flere funksjoner som bufring, bakgrunnssynkronisering eller sending av push-varsler.
Bufferressurser med servicearbeidere
Bufring av applikasjonsressurser på brukerens enhet kan forbedre ytelsen ved å gi raskere tilgang, spesielt i situasjoner med upålitelige internettforbindelser.
For å bufre appens eiendeler, inkluderer følgende kode i service-worker.js-filen.
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 først går inn på hjemmesiden, sjekker denne koden om det er et bufret svar for forespørselen i hurtigbufferen. Hvis det finnes et bufret svar, returnerer tjenesten det til klienten.
Hvis det ikke finnes noe bufret svar, henter tjenestearbeideren ressursen fra serveren over nettverket. Den serverer svaret til klienten og bufrer det for fremtidige forespørsler.
For å se de bufrede ressursene, åpne Applikasjonsfanen i utviklerverktøyene. Under Bufferlagring-delen skal du se en liste over de bufrede ressursene. Du kan også sjekke alternativet Frakoblet under Service Worker-delen og laste inn siden på nytt for å simulere en frakoblet opplevelse.
Nå, når du besøker hjemmesiden, vil nettleseren betjene ressurser som er lagret i hurtigbufferen i stedet for å forsøke å lage nettverksforespørsler for å hente data.
Bruke servicearbeidere for å forbedre ytelsen
Tjenestearbeidere er et kraftig verktøy for å forbedre ytelsen til Next.js-apper. De kan bufre ressurser, avskjære forespørsler og gi offline-støtte, som alle kan forbedre brukeropplevelsen.
Det er imidlertid viktig å merke seg at servicearbeidere også kan være komplekse å implementere og administrere. Det er viktig å nøye vurdere de potensielle fordelene og ulempene med servicearbeidere før du bruker dem.