Sådan integreres Service Workers i Next.js-applikationer

Servicemedarbejdere er scripts, der kører i baggrunden for at levere kraftfulde caching-funktioner og andre funktioner til moderne webapplikationer.

Disse funktioner bringer den sømløse og brugervenlige oplevelse af native apps til webbrowseren.

Servicemedarbejdere er en grundlæggende komponent i skabelsen af ​​Progressive Web Apps (PWA'er).

Forståelse af servicemedarbejdere

En servicemedarbejder er en type JavaScript webarbejder der kører i baggrunden, adskilt fra JavaScript-hovedtråden, så den er ikke-blokerende. Det betyder, at det ikke forårsager forsinkelser eller afbrydelser af applikationens brugergrænseflade eller brugerens interaktion med den.

Servicemedarbejdere fungerer som proxyservere – der sidder mellem webapplikationer og netværket. De kan opsnappe anmodninger og svar, cache ressourcer og yde offline support. Dette er med til at sikre, at webapps føles mere sømløse og brugervenlige, selv når brugeren ikke er online.

Nøgleapplikationer til servicemedarbejdere

Der er flere applikationer til servicemedarbejdere. De omfatter:

• PWA'er: Servicemedarbejdere leverer stor kraft til progressive webapps. De udfører tilpassede netværksanmodninger, push-meddelelser, offline support og hurtig indlæsning.
• Caching: Servicemedarbejdere kan gemme applikationens aktiver – billeder, JavaScript-kode og CSS-filer – i browserens cachelager. Dette lader browseren hente dem fra sin cache i stedet for at hente dem fra fjernserveren over netværket. Som et resultat indlæses indhold hurtigere, hvilket er særligt nyttigt for brugere med langsomme eller upålidelige internetforbindelser.
• Baggrundssynkronisering: Servicemedarbejdere kan synkronisere data og køre andre baggrundsopgaver, selv når brugeren ikke aktivt interagerer med applikationen, eller når applikationen ikke er åben i browseren.

Integration af Service Workers i Next.js-applikationer

Før du dykker ned i koden, hjælper det at forstå, hvordan servicemedarbejdere arbejder. Der er to nøglefaser ved brug af servicemedarbejdere: registrering og aktivering.

I den første fase registrerer browseren servicemedarbejderen. Her er et simpelt eksempel:

const registerServiceWorker = async () => {
if ("serviceWorker"in navigator) {
 registration = await navigator.serviceWorker.register("/sw.js");
 }
};
registerServiceWorker();

Koden tjekker først, om browseren understøtter servicearbejdere, hvilket alle moderne webbrowsere gør. Hvis denne understøttelse findes, fortsætter den med at registrere en servicearbejder, der er placeret på den angivne filsti.

I aktiveringsfasen skal du installere og aktivere en servicemedarbejder ved at lytte til installere og aktivere begivenheder ved hjælp af JavaScript-begivenhedslyttere. Sådan kan du opnå dette:

registration.addEventListener("install", () => {
console.log("Service worker installed");
});
registration.addEventListener("activate", () => {
console.log("Service worker activated");
});

Du kan inkludere denne kode lige efter registreringsprocessen. Det bør køre lige efter, at servicearbejder-registreringsprocessen er vellykket.

Du kan finde dette projekts kode i dens GitHub depot.

Opret et Next.js-projekt

For at komme i gang skal du køre denne kommando for at stilladsere et Next.js-projekt lokalt:

npx create-next-app next-project

Tilføjelse af en serviceworker til en Next.js-applikation involverer følgende trin:

1. Registrer en servicemedarbejder i det globale miljø.
2. Opret en service worker JavaScript-fil i den offentlige mappe.

Tilføjelse af en servicemedarbejder

Først skal du registrere en servicemedarbejder. Opdater src/pages/_app.js fil som følger. Medtagelse af koden i denne fil sikrer, at servicemedarbejderen registrerer, når applikationen indlæses, og har adgang til alle applikationens aktiver.

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} />;
} 

Det useEffect krog udløses, når komponenten monteres. Som det foregående eksempel kontrollerer koden først, om brugerens browser understøtter servicearbejdere.

Hvis understøttelsen findes, registrerer den serviceworker-scriptet, der er placeret på den angivne filsti, og angiver dets omfang som "/”. Det betyder, at servicemedarbejderen har kontrol over alle ressourcer i applikationen. Du kan angive et mere detaljeret omfang, hvis du vil, f.eks. "/products”.

Hvis registreringen lykkes, logger den en succesmeddelelse sammen med dens omfang. Hvis der er en fejl under registreringsprocessen, vil koden fange den og logge en fejlmeddelelse.

Installer og aktivér Service Worker

Tilføj følgende kode til 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 at teste, om servicearbejderen er blevet registreret, installeret og aktiveret, skal du starte udviklingsserveren og åbne din applikation i browseren.

npm run dev

Åben Chromes udviklerværktøjer vindue (eller din browsers tilsvarende), og naviger til Ansøgning fanen. Under Servicemedarbejdere sektion, bør du se den servicemedarbejder, som du har registreret.

Når servicearbejderen er registreret, installeret og aktiveret, kan du implementere flere funktioner som caching, baggrundssynkronisering eller sende push-beskeder.

Caching ressourcer med servicearbejdere

Caching af applikationsaktiver på brugerens enhed kan forbedre ydeevnen ved at give mulighed for hurtigere adgang, især i situationer med upålidelige internetforbindelser.

For at cache appens aktiver skal du inkludere 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 bruger første gang går ind på hjemmesiden, kontrollerer denne kode, om der er et cache-svar for anmodningen i cachen. Hvis der findes et cachelagret svar, returnerer tjenesten det til klienten.

Hvis der ikke findes et cachelagret svar, henter servicearbejderen ressourcen fra serveren over netværket. Det serverer svaret til klienten og cacher det til fremtidige anmodninger.

For at se de cachelagrede aktiver skal du åbne fanen Applikation i udviklerværktøjerne. Under Cachelager sektion, bør du se en liste over de cachelagrede aktiver. Du kan også tjekke Offline mulighed under Servicemedarbejder sektion og genindlæs siden for at simulere en offline oplevelse.

Nu, når du besøger hjemmesiden, vil browseren betjene ressourcer, der er gemt i cachelageret i stedet for at forsøge at lave netværksanmodninger for at hente data.

Brug af servicemedarbejdere til at forbedre ydeevnen

Servicemedarbejdere er et kraftfuldt værktøj til at forbedre ydelsen af ​​Next.js-apps. De kan cache ressourcer, opsnappe anmodninger og yde offline support, hvilket alt sammen kan forbedre brugeroplevelsen.

Det er dog vigtigt at bemærke, at servicemedarbejdere også kan være komplekse at implementere og administrere. Det er vigtigt nøje at overveje de potentielle fordele og ulemper ved servicemedarbejdere, før du bruger dem.