Hvordan integrere servicearbeidere i Next.js-applikasjoner

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).

Forstå servicearbeidere

En servicearbeider 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 Web Apps. 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 installere og aktivere hendelser ved hjelp av 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:

1. Registrer en servicearbeider i det globale miljøet.
2. Opprett en JavaScript-fil for servicearbeider i den offentlige katalogen.

Legge til en servicearbeider

Registrer først en servicearbeider. Oppdater src/pages/_app.js fil 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';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

De 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 eksisterer, 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. "/products”.

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

Åpen Chromes utviklerverktøy vinduet (eller nettleserens tilsvarende), og naviger til applikasjon fanen. Under Servicearbeidere seksjonen, bør du se servicearbeideren du har registrert.

Når tjenestearbeideren er registrert, installert og aktivert, kan du implementere flere funksjoner som bufring, bakgrunnssynkronisering eller sende 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, ta med følgende kode i service-worker.js fil.

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 seksjonen, bør du se en liste over de bufrede ressursene. Du kan også sjekke Frakoblet alternativet under Servicemedarbeider delen og last inn siden på nytt for å simulere en offline opplevelse.

Nå, når du besøker hjemmesiden, vil nettleseren betjene ressurser som er lagret i hurtigbufferen i stedet for å forsøke å gjøre 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.