Tjänstearbetare är skript som körs i bakgrunden för att ge kraftfulla cachningsfunktioner och andra funktioner till moderna webbapplikationer.
Dessa funktioner ger webbläsaren den sömlösa och användarvänliga upplevelsen av inbyggda appar.
Servicearbetare är en grundläggande komponent i skapandet av progressiva webbappar (PWA).
Innehållsförteckning
Förstå servicearbetare
En tjänstearbetare är en typ av webbarbetare för JavaScript som körs i bakgrunden, separat från huvudtråden för JavaScript, så att den är icke-blockerande. Detta innebär att det inte orsakar förseningar eller avbrott i applikationens användargränssnitt eller användarens interaktion med det.
Servicearbetare fungerar som proxyservrar – sitter mellan webbapplikationer och nätverket. De kan fånga upp förfrågningar och svar, cache-resurser och ge offlinesupport. Detta hjälper till att säkerställa att webbappar känns mer sömlösa och användarvänliga, även när användaren inte är online.
Nyckelapplikationer för servicearbetare
Det finns flera applikationer för servicearbetare. De inkluderar:
- PWA:er: Servicearbetare ger stor kraft till progressiva webbappar. De utför anpassade nätverksförfrågningar, push-meddelanden, offlinesupport och snabb laddning.
- Cachning: Servicearbetare kan lagra programmets tillgångar – bilder, JavaScript-kod och CSS-filer – i webbläsarens cachelagring. Detta låter webbläsaren hämta dem från sin cache istället för att hämta dem från fjärrservern över nätverket. Som ett resultat laddas innehållet snabbare, vilket är särskilt användbart för användare med långsamma eller opålitliga internetanslutningar.
- Bakgrundssynkronisering: Servicearbetare kan synkronisera data och köra andra bakgrundsuppgifter, även när användaren inte aktivt interagerar med programmet eller när programmet inte är öppet i webbläsaren.
Integrering av Service Workers i Next.js-applikationer
Innan du dyker in i koden hjälper det att förstå hur servicearbetare arbetar. Det finns två nyckelfaser för att använda servicearbetare: registrering och aktivering.
Under den första fasen registrerar webbläsaren servicearbetaren. Här är ett enkelt exempel:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
Koden kontrollerar först om webbläsaren stöder servicearbetare, vilket alla moderna webbläsare gör. Om detta stöd finns fortsätter det att registrera en servicearbetare som finns på den angivna filsökvägen.
I aktiveringsfasen måste du installera och aktivera en servicearbetare genom att lyssna på installations- och aktiverahändelserna med hjälp av JavaScript-händelseavlyssnare. Så här kan du uppnå detta:
registration.addEventListener("install", () => {
console.log("Service worker installed");
});registration.addEventListener("activate", () => {
console.log("Service worker activated");
});
Du kan inkludera denna kod direkt efter registreringsprocessen. Det bör köras direkt efter att registreringsprocessen för servicearbetaren har lyckats.
Du kan hitta detta projekts kod i dess GitHub förvaret.
Skapa ett Next.js-projekt
För att komma igång, kör det här kommandot för att bygga ett Next.js-projekt lokalt:
npx create-next-app next-project
Att lägga till en serviceworker i en Next.js-applikation innebär följande steg:
Lägga till en Service Worker
Registrera först en servicearbetare. Uppdatera filen src/pages/_app.js enligt följande. Att inkludera koden i denna fil säkerställer att servicearbetaren registrerar när applikationen laddas och har tillgång till applikationens alla tillgångar.
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 monteras. Liksom föregående exempel kontrollerar koden först om användarens webbläsare stöder servicearbetare.
Om stödet finns registrerar det serviceworker-skriptet som finns på den angivna filsökvägen och anger dess omfattning som ”/”. Detta innebär att servicearbetaren har kontroll över alla resurser i applikationen. Du kan tillhandahålla en mer detaljerad omfattning om du vill, t.ex. ”/produkter”.
Om registreringen lyckas loggas ett framgångsmeddelande tillsammans med dess omfattning. Om det uppstår ett fel under registreringsprocessen kommer koden att fånga det och logga ett felmeddelande.
Installera och aktivera Service Worker
Lägg till följande kod 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();
För att testa om servicearbetaren har registrerats, installerats och aktiverats, starta utvecklingsservern och öppna din applikation i webbläsaren.
npm run dev
Öppna Chromes fönster för utvecklarverktyg (eller motsvarande i din webbläsare) och navigera till fliken Program. Under avsnittet Servicearbetare bör du se den servicearbetare som du har registrerat.
Med servicearbetaren framgångsrikt registrerad, installerad och aktiverad kan du implementera flera funktioner som cachelagring, bakgrundssynkronisering eller skicka push-meddelanden.
Cacha resurser med servicearbetare
Cachning av programtillgångar på användarens enhet kan förbättra prestandan genom att möjliggöra snabbare åtkomst, särskilt i situationer med opålitliga internetanslutningar.
För att cachelagra appens tillgångar, inkludera följande kod 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 användare först går in på hemsidan kontrollerar denna kod om det finns ett cachat svar för begäran i cachen. Om ett cachat svar finns returnerar tjänsten det till klienten.
Om det inte finns något cachat svar hämtar tjänstearbetaren resursen från servern över nätverket. Det serverar svaret till klienten och cachar det för framtida förfrågningar.
Om du vill se de cachade tillgångarna öppnar du fliken Program i utvecklarverktygen. Under avsnittet Cachelagring bör du se en lista över de cachade tillgångarna. Du kan också markera alternativet Offline under avsnittet Service Worker och ladda om sidan för att simulera en offlineupplevelse.
Nu, när du väl besöker hemsidan, kommer webbläsaren att betjäna resurser som lagras i cachelagringen istället för att försöka göra nätverksbegäranden för att hämta data.
Använda servicearbetare för att förbättra prestanda
Servicearbetare är ett kraftfullt verktyg för att förbättra prestandan för Next.js-appar. De kan cache resurser, avlyssna förfrågningar och tillhandahålla offlinesupport, vilket allt kan förbättra användarupplevelsen.
Det är dock viktigt att notera att servicearbetare också kan vara komplicerade att implementera och hantera. Det är viktigt att noga överväga de potentiella fördelarna och nackdelarna med servicearbetare innan du använder dem.